Инструменты и плагины для работы с текстом в Фигме

Что? Для работы с текстом в Фигме есть множество инструментов, но далеко не все маркетологи умеют ими пользоваться. И хотя этот конструктор стал отличной заменой тем, которые покинули российский рынок из-за санкций, до сих пор находятся и те, кто им недоволен.

Как? Но, как говорил классик, «вы просто не умеете его готовить». Пул разнообразных плагинов существенно расширяет и упрощает функционал конструктора. Рассказываем, как воплотить все фантазии по работе с текстом в Фигме.

Как добавить текст в Фигме

Выберите инструмент Текст

Он находится в верхней части экрана и обозначается буквой Т. Использовать данный инструмент надо всегда, когда вы хотите поработать над текстом. Открыть его можно и с клавиатуры, нажав на букву Т. В Figma работа с любыми объектами, в том числе и с текстом, происходит через слои. В левой части находится панель со слоями, где вы сможете видеть все текстовые слои. Перед ними будет стоять буква Т.

Укажите метод создания нового слоя с текстом

Добавляя текст в программу, вы создаёте новый слой, в котором он будет находиться. Текстовый слой можно создать двумя разными методами:

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

Узнай, какие ИТ - профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес

Павел Симонов

Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов

Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно

pdf 3,7mb

doc 1,7mb

Уже скачали 31749

Введите текст

Какой бы вы метод ни выбрали, у вас появится курсор, и вы сможете напечатать нужный текст. Изначально вы увидите только базовые настройки шрифта (мелкий чёрный шрифт), однако, вы можете поменять его. Для этого надо выбрать текст и через текстовую панель, которая находится справа, его изменить, либо создать и использовать стиль текста.

Редактирование текста в Фигме пошагово

Впервые столкнувшись с программой, пользователь может испытывать трудности даже с не сложными действиями. Например, как поменять текст в Фигме, исправить ошибки, отредактировать размер.

• Установите курсор мыши на тексте, который необходимо изменить

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

• Выделите фрагмент текста, над которым собираетесь работать

Для этого зажмите левую кнопку мыши и проведите по тексту. Он подсветится синим цветом. Свойства выделенного фрагмента отобразятся в правой части экрана в панели свойств. Если вам не надо менять внешний вид написанного, а необходимо что-то дописать или удалить, то установите курсор в нужной части текста. Так вы сможете менять то, что требуется.

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

• Выясните, есть ли у текста какой-то стиль

Если при выделении текста в правой части экрана появилась панель «Текст», то на нём нет наложенного стиля. Однако, вместо той панели может высветится «Ag». Значит текст уже имеет стиль, из-за которого вы не сможете его поменять.

• Отредактируйте внешний облик текста

Выделенный текст в Фигме можно как выровнять, так и изменить размер, начертание и прочие характеристики, используя текстовую панель. Информацию о типе можно узнать, нажав на три точки справа в нижнем углу текстового окна. Там вы сможете изменить показатели выравнивания, оформления и интервалов. Примените панель обводки для добавления к тексту внутренней линии, контура и изменения размера, цвета. С помощью панели эффектов можно сделать тень тексту, размытие.

Если текст в Фигме выделился серым цветом, а рядом с названием шрифта стоит значок с надписью «А?», значит на вашем устройстве отсутствует данный шрифт. В таком случает возможность изменять текст будет недоступна до тех пор, пока вы не установите нужный шрифт или замените его на тот, что у вас есть. Для замены шрифта кликните на значок «А?». В открывшемся окне «Отсутствующие шрифты» вы сможете выбрать установленный шрифт.

• Поменяйте цветовое решение надписи

Цвет текста меняется не в текстовой панели, а в окне заливки, которая располагается справа. Для использования желаемого цвета нажмите на него на панели заливки, после этого текст приобретёт выбранный оттенок.

• Поменяйте расположение текста

Если вы решили поменять местоположение текста в Фигме, то при этом весь текст на слое переместится. Как изменить расположение надписи:

• Кликните и переместите надпись в желаемое место.
• Кликните мышью в окне «Слои» на текстовом слое, который надо расположить в другом месте.
• Необходимо выбрать инструмент «Перемещение». Для этого нажмите не клавиатуре клавишу с буквой М.

• Как уменьшить или увеличить текст в Фигме? Поможет инструмент «Масштабирование»

В самой программе есть рекомендация, по которой надо менять размер текста, используя текстовую панель. Но сделать это можно и с помощью инструмента «Масштабирование». Способы отличаются только тем, что во втором варианте текст во всём проекте может получиться неодинакового размера. И всё же данный инструмент особенно полезен, если вам надо «подогнать» текст под определённые рамки. Масштабирование делается следующим образом:

• На клавиатуре нажмите на клавишу «К». Она откроет нужный инструмент.
• Выберите текстовый слой в окне «Слои», расположенном слева.
• Измените размер, перетаскивая любой из угловых ограничивающих прямоугольников текста внутрь или наружу.

9 инструментов для изменения текста в Фигме

• Как сделать текст жирным в Фигме

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

Читайте также!

Фигуры в Adobe Illustrator: зачем нужны и как использовать.

Подробнее

• Как увеличитьили уменьшить текст в Фигме (изменить кегль)

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

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

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

Дарим скидку от 60%
на курсы от GeekBrains до 10 ноября

Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Забронировать скидку

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

• Как подчеркнуть или зачеркнуть текст в Фигме

Сделать подчёркнутый текст в Фигме несложно: кликните на 3 точки на панели справа, где находится редактор текста. Щёлкните на иконку, которая включает подчёркивание.

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

• Как написать текст в Фигме с красной строки

Чтобы выставить красную строку в программе, кликните на три точки в текстовом редакторе, далее напротив надписи «Paragraph indent» установите значение отступа для красной строки в пикселях (к примеру, 25).

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

Для написания текста заглавными буквами также щёлкните на три точки справа и под надписью «Letter case» установите «AG». Выбранный ранее текстовый фрагмент станет весь с заглавными буквами.

• Как сделать текст обводкой в Фигме

Перед тем, как сделать обводку в Фигме, необходимо выбрать нужный текст. Далее в окне справа напротив надписи «Stroke» кликнуть на иконку «+». Толщина обводки будет изменена. Более явной она будет только если текст жирный и крупного размера.

• Красивый текст с тенью в Фигме

Для создания эффекта тени у текста, выделите надпись, кликните на «+» возле надписи «Effects». К тому же можно выбрать или внешнюю тень («Drop shadow»), или внутреннюю («Inner shadow»).

Только до 14.11

Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней

Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

Чтобы получить файл, укажите e-mail:

Введите e-mail, чтобы получить доступ к документам

Подтвердите, что вы не робот,
указав номер телефона:

Введите телефон, чтобы получить доступ к документам

Скачать подборку бесплатно pdf 2,5mb

Уже скачали 52300

Я подтверждаю согласие на обработку персональных данных.

• Как в Фигме перенести текст

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

Как сделать изогнутый текст в Фигме

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

В качестве примера возьмём плагин «To Path».

• Для начала введите нужную надпись и нарисуйте фигуру, в форме которой её надо сделать.
• Скачайте и запустите плагин. Далее выберите два слоя: один с текстом, а второй с фигурой и кликните на кнопку «Link».
• В конце отредактируйте внешний вид текста в плагине и отключите слои, на которых расположены фигуры.

С параметрами настройки в плагине особых проблем возникнуть не должно.

1. Функция Vertical Align даёт возможность расположить текст выше или ниже используемой фигуры.
2. Инструмент Offcet в Фигме позволяет перемещать закруглённый текст вдоль фигуры. Вы можете выровнять его справа, слева, посередине относительно неё.
3. С помощью Revers direction of text можно отразить надпись по горизонтали (изменить направление).

В результате закруглить текст в Фигме несложно, так как есть множество плагинов, облегчающих эту задачу.

16 удобных плагинов для работы с текстом в Фигме

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

• Font Preview — окно с возможностью предпросмотра шрифтов в реальном времени, в котором можно найти шрифт и добавить в избранное.
• Typescale. Моментально создаёт сбалансированные модульные системы типографики с учётом заданного соотношения.
• SBOL Typograph. Отвечает за типографику кириллических текстов: меняет пробелы, кавычки, тире, форму написания номера телефона и валют. Помимо этого, в плагине есть ёфикатор.
• Retextifier. Одновременное изменение нескольких слоёв с текстом.
• Главред. С его помощью можно сделать короткий и доступный текст для сайтов, блогов, профессиональной литературы, СМИ.
• Contento. В нём содержится бесполезный в плане смысловой нагрузки контент для макетов, который был собран из бесплатных источников. Он пригодится для заполнения пустых мест в проекте.
• Accidently Great Font Pairings. Создаёт шрифтовые пары от Google Fonts.

  Читайте также!

  Дизайн сайта в Figma: проще и быстрее

  Подробнее
  
• Add numbers to text. С его помощью можно легко сделать нумерованный список.
• Autosizetext. Если вы не знаете, как автоматически поменять размер текста в Фигме так, чтобы он идеально разместился в текстовом поле, то этот плагин поможет вам с этим.
• Batch Styler. С его помощью можно изменить несколько стилей текста одновременно (шрифт, начертание, высота строки, трекинг).
• Circular Text. Плагин для того, чтобы сделать круглый текст в Фигме как можно проще и быстрее.
• Deepl translate. Он поможет быстро перевести текст с одного языка на другой, не выходя из программы Figma. Можно выбрать страницу целиком или необходимый фрагмент. В плагине есть 26 языков.
• Find and Replace. Даёт возможность найти и пакетным методом заменить текст на странице.
• Perfecter. Делает гармоничный внешний вид текста с помощью математических расчётов – сбалансированный размер шрифтов, интервалов, элементов.
• Font Explorer. Используя этот плагин, вы сможете «примерять» интересующие вас шрифты к проекту и сравнивать их друг с другом.
• Glyphs. В нём содержится 184 графических символа, среди которых есть глифы и лигатуры.

Популярные статьи

Высокооплачиваемые профессии сегодня и в ближайшем будущем

Дополнительный заработок в Интернете: варианты для новичков и специалистов

Востребованные удаленные профессии: зарабатывайте, не выходя из дома

Разработчик игр: чем занимается, сколько зарабатывает и где учится

Как выбрать профессию по душе: детальное руководство + ценные советы

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

Автор статьи:

Редакция сайта GeekBrains Шеф-редактор раздела Программирование