Форматирование текста в Figma — svgpng.ru

Инструмент Text

Добавить текст в Figma можно с помощью инструмента Text. Вызвать его можно из панели инструментов сверху (буква T), либо с помощью горячей клавиши T.

Размеры текстового поля

В Фигме предусмотрены 3 вида размещения текстового поля:

• Во всю ширину (Auto Width)
• С автоматической высотой (Auto Height)
• Фиксированные длина и ширина (Fixed Size)

В случае с Auto Width текст будет занимать одну строку, его высота составит одну строчку, а ширина будет рассчитана автоматически. Этот вариант подходит для коротких надписей.

Вариант Auto Height является наиболее привычным: для текстового блока задается фиксированная ширина, а высота блока высчитывается из объема текста.

В случае Fixed Size и ширина и высота блока задаются строго, при этом по высоте текст может выходить за пределы области.

Текстовые поля в FigmaПереключение между типами

Т

ри данных типа являются  по сути пресетами, но вы также можете менять настройки текстового поля в блока параметров с его размерами: эти настройки связаны и переключаются синхронно:

Цвет текста, эффекты и обводка

• Для текста представлены все стандартные виды заливки в привычном поле Fill.
• Для текста также доступны все стандартные эффекты: Blur, Shadow, Background Blur, Inner Shadow
• Для текста можно применять обводку

Свойства текста

В блоке настроек Text вы можете изменить параметры непосредственно текста.

Базовые поля:

• Шрифт (Как установить новый шрифт)
• Начертание
• Размер
• Высоту строчки
• Межбуквенное расстояние
• Отступ нового абзаца
• Размеры текстового поля (рассматривали выше)
• Выравнивание по горизонтали
• Выравнивание по вертикали

Эти параметры представлены в открытом виде и достаточно интуитивны, но есть еще дополнительные свойства, которые скрыты. Панель с ними можно открыть, кликнув на три точки в правом нижнем углу.

Дополнительные параметры текста

Вкладка Basics окна Type Settings:

Resizing — здесь можно найти дополнительный вариант размера текстового поля, который будет заканчивать текст, выходящий за рамки блока, троеточием

Alignment — также содержит дополнительный вариант выравнивания по горизонтали по всей ширине

Decoration — доступны вариант с подчеркиванием и зачеркиванием текста

Paragraph indent — отступ «красной строки»

List style — форматирование обычным и нумерованным списком

Case — форматирование строчных и заглавных букв

Вкладка Details

Содержит дополнительные настройки для гарнитуры

Numbers:

• Style — стиль начертания цифр (отличается для разных шрифтов)
• Position — надстрочные и подстрочные шрифты
• Fractions — собирает дроби и другие выражения в компактный вид

Letterforms:

Ligatures — объеднияет некоторые символы в один (Лигату́ра — знак любой системы письма или фонетической транскрипции, образованный путём соединения двух и более графем)

Ordinals — включает порядковые (но не обнаружено на практике)

Вкладка Variable

Для шрифтов, поддерживающих вариативность Font Weight, толщину можно можно задать в числовом значении.

Дополнительная, но важная информация

• Для заливки, обводки, эффектов и свойств шрифта можно создавать и использовать стили.
• Вы можете менять свойства отдельных букв в текстовом поле. Но вообще-то не рекомендую так поступать
• Текст можно трансформировать в вектор
• Текст можно трансформировать с помощью плагина
• Вы можете найти текст с такими же характеристиками

как работать с инструментом. Инструкция на 6 минут.

В этом уроке вы узнаете подробно про инструмент текст в фигме. Разберемся с популярными вопросами, которые возникают у многих пользователей программы. Посмотрите 6 минутное видео или воспользуйтесь текстовой версией урока ниже.

Получить бесплатно 24 раздела landing page для figma

Как сделать текст в Figma

Чтобы создать текст в фигме, выберите сверху инструмент «Text». Затем нажмите на пустую область в вашем проекте либо зажмите левую клавишу мыши и создайте текстовый блок нужных размеров.

Как изменить начертание текста в фигме (сделать его жирным)

Чтобы изменить начертание текста, например седлать его жирным, выберите нужный текстовый блок и в правой панели поставьте bold, normal, light или другое значение.

Как изменить размер текста (кегль)

Чтобы изменить размер текста (кегль) в фигме в правой панели задайте другое значение вручную или выберите подходящее значение из списка.

Как изменить межстрочное расстояние (интерлиньяж) в Figma

Чтобы задать другое значение для межстрочного расстояния текста в фигме измените его в поле (как показано на скриншоте выше).

Изначально стоит значение в процентах (%). Если хотите поставить пиксели, то напишите px.

Как изменить межбуквенное расстояние (трекинг) в фигме

Чтобы изменить трекинг (междуквенное расстояние) измените его значение в цифрах, как показано на скриншоте выше.

Как задать расстояние между 2 абзацами текста в Figma

Чтобы задать расстояние между 2 абзацами в фигме измените значение в пикселях в поле, как показано на скриншоте выше. Если хотите создать новый абзац, то нажмите на клавишу «Enter» на клавиатуре.

Как изменить размеры ширины текстового блока в фигме

Автоматическая ширина текста «Auto width»

Если включить иконку «Auto width», то ширина текстового фрейма будет автоматически увеличиваться в зависимости от того текста, который там есть.

Автоматическая высота текста «Auto height»

При включении иконки автоматическая высота «Auto height» можно задать ширину вручную, а высота будет изменяться в зависимости от количества текста.

Фиксированный размер текстового блока «Fixed size»

При выставлении иконки «Fixed size» будет фиксированная высота и ширина текстового фрейма. Если вы будете добавлять новые предложения, то текст будет заходить за его границы.

Как изменить выравнивание (выключку) текста в Figma

Выключка — это термин из типографики, который означает выравнивание текста. Чтобы изменить выключку в фигме следует нажать на одну из трех иконок (выравнивание по левому краю, по центру, по правому краю). Если хотите сделать выравнивание по ширине (что не рекомендуется для веба), то вам необходимо нажать на 3 точки и появится эта возможность.

Как разместить текст сверху, по центру или снизу (по вертикали фрейма)

Чтобы выравнять текст сверху, по центру или снизу по вертикали выберите нужную иконку, как показано на скриншоте выше. В зависимости от высоты текстового фрейма расположение текста будет меняться.

Как сделать подчеркивание текста в фигме

Чтобы сделать подчеркивание текста в фигме, нажмите на 3 точки в правой панели, где редактируется текст. Выберите соответствующую иконку, которая обозначает подчеркивание.

Как зачеркнуть текст в фигме

Чтобы зачеркнуть текст в фигме, нажмите на 3 точки в панели редактирования текста и выберите пиктограмму обозначающий зачеркнутый текст (strikethrough).

Как сделать красную строку для текста в фигме

Для создания красной строки в Figma, нажмите 3 точки в разделе для редактирования текста (как показано на скриншоте выше) и напротив надписи «Paragraph indent» поставьте значение для отступов в красной строке в пикселях (например 20).

Как сделать заглавные буквы в Figma

Чтобы текст в фигме был заглавными (большими) буквами, нажмите на пиктограмму (три точки) справа и внизу надписи Letter case поставьте «AG». Текстовый блок, который вы выберите будет с большими буквами.

Как изменить цвет текста в фигме

Текст в фигме меняется стандартным образом в правой панели. Для того, чтобы изменить цвет какого-то текстового блока выделите его поменяйте значение как показано на скриншоте выше.

Как сделать обводку текста в фигме

Чтобы задать обводку какому-то тексту выделите его, затем в правой панели напротив надписи Stroke нажмите на иконку «+». Измените толщину обводки. Чтобы обводка была видна текст должен быть большим и жирным.

Как сделать тень для текста в Figma

Чтобы сделать тень тексту в фигме, выделите его и нажмите на плюс напротив надписи «Effects». Можно поставить значение «Drop shadow» — внешняя тень, или «Inner shadow» — внутренняя тень.

Как экспортировать текст в фигме

Чтобы экспортировать текстовый блок из фигмы на ваш компьютер, выберите его и нажмите напротив надписи «Export» на плюс. Выберите нужный формат PNG, SVG, JPG или PDF. После этого нажмите кнопку экспорта и выберите место для сохранения.

Заключение

Итак, вы разобрались с инструментом текст в фигме и узнали как с ним работать. Если у вас остались вопросы, то задавайте их в комментариях ниже, мы ответим на него и дополним эту статью.

P.S. Так же переходите по этой ссылке, чтобы получить бонусный видео урок и материалы для создания дизайна сайтов (Landing Page) в Figma.

Автор статьи: Владимир Чернышов

P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Как редактировать текстовые слои в Figma

Когда вы создаете текстовый слой в Figma, вы можете использовать набор настроек, чтобы ваш текст выглядел хорошо и соответствовал вашему дизайну. Figma позволяет легко изменить текстовый слой. Вы можете использовать шрифты Google и свои собственные шрифты в редакторе, изменять толщину шрифта, легко выравнивать текст и изменять многие другие настройки.

Здесь мы поговорим о том, как изменить размер шрифта, изменить толщину шрифта и центрировать текст. Это самые основные настройки, которые вы будете использовать почти в каждом создаваемом текстовом слое. Дополнительные настройки текста см. в текстовом разделе на правой боковой панели.

Итак, без лишних слов, приступим.

Изменить семейство шрифтов

• Выберите один или несколько текстовых слоев.
• Перейдите в раздел Text на правой боковой панели.

• Переключите меню списка шрифтов, щелкнув стрелку в правом углу имени шрифта.

Список шрифтов включает все ваши локальные шрифты, а также доступ к различным шрифтам Google.

• Чтобы изменить шрифт вашего текстового слоя, выберите имя шрифта из списка.

• Вы также можете выбрать ввод имени шрифта и ввести имя шрифта.

Если шрифт найден в списке шрифтов, он будет использоваться для вашего текстового слоя.

Изменить размер шрифта

• Выберите один или несколько текстовых слоев.
• Перейдите в раздел Text на правой боковой панели.

• Щелкните стрелку рядом с номером размера шрифта и выберите значение.

• Можно также выбрать форму ввода размера шрифта и ввести номер размера.

Изменить толщину шрифта

• Выберите один или несколько текстовых слоев.
• Перейдите в раздел Text на правой боковой панели.

• Под названием шрифта выберите меню веса шрифта.

• Выберите толщину шрифта из списка толщин шрифта, доступных в вашем шрифте.

Отредактируйте толщину шрифта с помощью

Variable fonts

Вы также можете настроить толщину шрифта в текстовом редакторе, используя новую функцию Figma, называемую переменной.

Переменный шрифт предоставляет ряд вариантов динамического шрифта для гарнитуры в одном файле.

• Выберите значок Настройка типа в правом нижнем углу текстовой секции.

• Выберите вкладку Переменная в окне Настройка типа .

• Отрегулируйте вес с помощью горизонтального курсора.

Редактирование высоты строки абзаца

• Выберите слой абзаца.
• Перейдите в раздел Text на правой боковой панели.

Под опцией толщины шрифта вы найдете ввод высоты строки.

• Выберите Высота линии и добавьте свое значение.

Выравнивание текста

Вот как можно выровнять текстовый слой по левому краю, по центру или справа:

• Выберите один или несколько текстовых слоев.
• Перейдите в раздел Text на правой боковой панели.

• В левом нижнем углу текстового раздела выберите Выравнивание текста по центру , чтобы отцентрировать текст.

• Чтобы выровнять текст по правому краю, выберите Выравнивание текста по правому краю.

• Или выберите Выравнивание текста по левому краю, Чтобы выровнять текст по левому краю.

Заключение

Поздравляем, теперь вы знаете, как изменить размер шрифта, толщину шрифта и выравнивание текста по центру! Я надеюсь, что вы нашли это руководство полезным; если да, то вам понравятся другие наши уроки по Figma. Если вы хотите продолжить изучение Figma, мы предоставим вам все, от создания нового файла до организации ваших файлов и совместной работы с вашей командой.

Пожалуйста, поделитесь этим руководством с друзьями, которые хотят изучить Figma; это много значило бы для нас. Увидимся в следующих уроках Figma.

• Как создавать кнопки в Figma — Кнопки с повышенными правами

  7 августа 2022 г. –
  15 минут чтения

• Как опубликовать файл Figma в сообществе

  8 июля 2022 г. –
  1 мин чтения

• Как поделиться ссылкой на файл Figma

  8 июля 2022 –
  1 мин чтения

Этот туториал предназначен для абсолютных новичков и покажет вам, как выровнять текст в Figma. Итак, без лишних слов, приступим. Свойства выравнивания текстаВот как

• Рауф Белахдар

Рауф Белахдар
16 июня 2022 г. • Чтение через 1 мин.

Хотите узнать о Figma с нуля? Вы находитесь в нужном месте. Figma поставляется с сотнями функций, которые помогут вам в создании фантастических

• Рауф Белахдар

Рауф Белахдар
14 июня 2022 г. • Чтение через 1 мин.

Figma 101: Советы и подсказки по Figma

Просмотреть все уроки

Сегодня у нас есть несколько дополнительных советов и подсказок — наша подборка других интересных функций в Figma. Сегодня мы не создаем ничего особенного, но вы можете открыть новый файл Figma и опробовать эти методы или продолжить работу над дизайном планшета/рабочего стола, который вы создали вчера.

Время выполнения: 30 минут

Сегодняшнее руководство

1. Создание нового из файла Sketch

Если вы использовали Sketch раньше, вы, вероятно, нашли большую часть интерфейса Figma интуитивно понятным и знакомым. Но у пользователя Sketch есть дополнительное преимущество — Figma позволяет импортировать файлы Sketch! Есть несколько способов сделать это:

• На Mac перетащите файл Sketch из Finder прямо в окно Figma в браузере
• Или перейдите в меню гамбургера в верхнем левом углу окна Figma и нажмите «Импорт файла»

2.

Вставка и вставка поверх выделения

Это различие знакомо пользователям Adobe. Стандартная команда Figma «Вставить» эквивалентна команде «Вставить на место» в программном обеспечении Adobe: когда вы вставляете элемент, Figma размещает его в том же месте, что и оригинал. Это полезно, если вам нужно вставить элемент в другой фрейм и убедиться, что он находится в постоянном месте.

Но иногда вам нужно вставить элемент точно туда, где находится текущий выбор. Для этого можно использовать команду «Вставить поверх выделения». Сочетание клавиш — ⌘Shift ⇧V на Mac или CtrlShift ⇧V на ПК.

3. Блокировка и разблокировка

В частности, при работе с файлами с большим количеством слоев может быть полезно заблокировать некоторые из них, чтобы предотвратить случайное выделение и редактирование. Для этого выберите любой объект и нажмите ⌘Shift ⇧L (Mac) или CtrlShift ⇧L (ПК). Чтобы разблокировать элемент, убедитесь, что он выбран в списке «Слои», и повторите ту же комбинацию клавиш.

Вы также можете получить доступ к командам блокировки/разблокировки, щелкнув правой кнопкой мыши (Mac/ПК) или удерживая клавишу Ctrl (Mac) на слое или его имени в списке слоев.

4. Показать и скрыть

Команда показать/скрыть работает почти так же, как блокировка/разблокировка, но определяет, виден ли элемент в кадре. Чтобы включить или выключить видимость слоя, нажмите ⌘Shift ⇧H (Mac) или CtrlShift ⇧H (ПК). Любой скрытый слой будет отображаться в списке слоев серым цветом и с маленьким значком глаза рядом с ним.

5. Выбрать все с одинаковым…

Чрезвычайно полезная функция в Figma — возможность выбрать все слои в файле, которые имеют какое-то общее свойство. Например, вы можете выделить все элементы в файле одним и тем же шрифтом. Это позволяет вам как найти эти элементы, так и, при желании, изменить их все сразу. Сделать это так же просто, как:

• Выберите элемент со свойством, которое вы хотите найти (например, текстовое поле, в котором используется шрифт «Roboto»)
• Перейдите в меню гамбургера, затем «Редактировать», затем выберите нужный вариант (например, «Выбрать все одним шрифтом»)
• Figma выберет все подходящие слои в файле. Затем вы можете внести любые изменения во все эти элементы одновременно.

6. Пиксельная сетка

Помимо любых других сеток, которые вы настроили в отдельных кадрах, вы также можете включить «Пиксельную сетку» для всего файла. Это становится видимым при приближении к кадру и позволяет увидеть расположение элементов по отношению к отдельным пикселям.

• Чтобы включить или отключить пиксельную сетку, нажмите ⌘’ (Mac) или Ctrl’ (ПК).

7. Предварительный просмотр пикселей

С пиксельной сеткой связан «Предварительный просмотр пикселей». Обычно, когда мы работаем в Figma, мы видим четкие векторные формы и текст, независимо от того, насколько сильно мы увеличиваем масштаб. Однако, когда мы экспортируем наши экраны в файлы изображений, такие как PNG, эти векторы «растрируются», что означает они сохраняются как данные пикселей. Включение предварительного просмотра пикселей дает предварительный просмотр того, как будет выглядеть файл при экспорте в изображение на основе пикселей.

• Чтобы включить или отключить предварительный просмотр пикселей, нажмите CtrlP (Mac) или CtrlAltY (PC).

Примечание. В настоящее время Предварительный просмотр пикселей позволяет просматривать только пиксели в масштабе 1x внутри интерфейса, а не в разрешении Retina. Чтобы обойти это, вы можете настроить свои кадры в 2-кратном размере. Кроме того, вы можете использовать команду «Экспорт» в Инспекторе (вкладка «Дизайн»), чтобы сохранить PNG в 2-кратном увеличении.

8. Растрировать выделение

Опять же, связанная с этими инструментами для работы с пикселями, команда «Растрировать» позволяет нам преобразовать векторную фигуру (например, прямоугольник, круг или текст) и окончательно сгладить ее в пиксельные данные. Обычно это не рекомендуется, потому что это означает, что вы не можете вернуться и внести изменения в эти элементы, но бывают случаи, когда это полезно. Например, вы можете не захотеть делиться векторной версией логотипа, пока дизайн не будет завершен.

• Чтобы растрировать слой, выберите объект, который вы хотите преобразовать в пиксельные данные, затем перейдите в гамбургер-меню, найдите «растеризовать» и нажмите команду.

9. Показать контуры

Параметр «Показать контуры» делает именно то, о чем говорит: он отслеживает края каждого элемента в файле и скрывает другое содержимое (включая штрихи, заливки и изображения). Это может быть полезно для быстрого просмотра всех фигур и структуры этих фигур в документе. Это также позволяет вам видеть объекты, которые находятся за краем кадра или под другими объектами… это немного похоже на рентгеновское зрение Figma.

• Чтобы включить или выключить контуры, ⌘Y (Mac) или CtrlShift ⇧3 (ПК)

10. Экспорт в файлы изображений

Файлы из Figma легко экспортировать, хотя вы, вероятно, будете делать это реже, чем в других пакетах, из-за функции совместной работы в реальном времени, которую предлагает Figma. Это означает, что вы можете пригласить людей просмотреть ваш файл напрямую, вместо того, чтобы постоянно экспортировать файлы изображений. Доступ к параметрам экспорта можно получить на вкладке «Дизайн» инспектора.

• Чтобы экспортировать отдельный фрейм, сначала выберите фрейм (либо в списке слоев, либо щелкнув метку над фреймом на холсте). Затем щелкните значок «+» рядом с «Экспорт» в нижней части Инспектора. Выберите нужные параметры и нажмите кнопку «Экспорт».
• Чтобы экспортировать пользовательскую область документа, вам нужно создать «Фрагмент» (сочетание клавиш S ). Фрагмент может охватывать область внутри кадра, вне кадра или между несколькими кадрами. После того, как вы выбрали инструмент «Фрагмент», щелкните и перетащите его, чтобы создать фрагмент, затем используйте параметры экспорта в Инспекторе, как описано выше.
• Крутой аспект Figma заключается в том, что вы можете легко экспортировать весь Canvas. Просто отмените выбор всего (нажмите Escape) и настройте параметры экспорта в Инспекторе, и вы сможете экспортировать все свои кадры в одно изображение.

Поздравляем! Вы завершили Figma 101!

Мы надеемся, что этот курс дал вам базовый набор навыков, необходимых для создания проектов в Figma, и уверенность в том, что вы сможете продолжить изучение некоторых более продвинутых функций платформы.