Дизайн
#подборки

5 полезных плагинов для Figma: работа с текстом и шрифтами

Как расположить текст вокруг фигуры, подобрать шрифтовые пары и быстро настроить стили шрифтов на макете.

Катя Павловская для Skillbox Media

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

Рассказываем, какие плагины для Figma помогут вам работать с текстом и шрифтами.

To Path

Плагин располагает выделенный текст на кривой или по краю любой стандартной фигуры:

Изображение: Skillbox Media

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нарисуйте кривую с помощью пера и напишите любой текст.
  3. Выделите кривую и текстовый модуль.
  4. Нажмите правой кнопкой мыши выделенные предметы, в выпадающем меню перейдите в пункт Plugins и нажмите на To Path.
  5. В появившемся окне нажмите на кнопку Link.

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

Изображение: Skillbox Media

Better Font Picker

В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение — использовать его или нет:

Изображение: Skillbox Media

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, создайте и выделите текстовый объект на макете.
  3. Нажмите правой кнопкой мыши на выделенный объект, в выпадающем меню перейдите в пункт Plugins и нажмите на Better Font Picker.
  4. Появится окно предварительного просмотра, которое покажет, как выглядят ваши установленные шрифты. Выберите любой, и он сразу применится к выделенному тексту.
Изображение: Skillbox Media

Soroka

Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:

Изображение: Skillbox Media

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Soroka.
  3. В появившемся меню выберите подходящий шрифт и нажмите на него. Плагин предложит вам несколько подходящих к нему пар.
  4. Нажмите на любую пару — откроется статья, где использованы эти шрифты. Чтобы экспортировать статью в макет, нажмите Export to artboard.

Первый выбранный шрифт будет использоваться в заголовках, а дополнительный — в основном тексте:

Изображение: Skillbox Media

Fontiger

Разработчики не любят, когда в макете остаются дробные значения кегля. Они отображаются не в каждом браузере, а доставать дизайнера вопросами о каких-то незначительных пикселях долго. Чтобы проект из-за этого не тормозил, перед передачей макета в разработку воспользуйтесь плагином Fontiger — он автоматически округляет дробное значение кегля до ближайшего целого:

Изображение: Skillbox Media

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Откройте проект в Figma и выберите любой фрейм с текстом.
  3. Нажмите правой кнопкой мыши на выделенный фрейм, в выпадающем меню перейдите в пункт Plugins и нажмите на Fontiger. Плагин округлит все дробные кегли.

Плагин учитывает текстовые модули только внутри фреймов. Если текст не стоит внутри фрейма, его кегль не изменится.

Изображение: Skillbox Media

Font Master

В Figma очень удобно следить за используемыми цветами — достаточно выделить все объекты на макете и посмотреть на панель справа. Но кегль, интерлиньяж, кернинг и шрифты таким образом не отображаются. Плагин Font Master решает эту проблему — он показывает все используемые настройки текста на макете и при необходимости создаёт из них полноценный стиль.

Изображение: Skillbox Media

Как пользоваться

  1. Скачайте плагин по ссылке.
  2. Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Font Master.

Плагин покажет все сочетания шрифтов и кеглей и где они были использованы. Из любого сочетания можно сделать полноценный стиль:

Изображение: Skillbox Media

Курс

Figma с нуля до PRO

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

Узнать про курс

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

Участвовать
Обучение: Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована