Шрифты в Figma: как настроить и использовать

Благодаря встроенной интеграции с библиотекой Google Fonts Figma — очень удобна для дизайнера. Но помимо этого графический редактор даёт пользователю много настроек шрифта, которые помогают очень тонко настроить все текстовые блоки на макете. О том, где всё это найти, читайте в нашей инструкции.

Выбор шрифтов и базовые настройки

Шрифты отображаются на панели инструментов справа в блоке Typography. В нём есть несколько полей, которые помогут вам с настройками типографики:

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

2. Начертание — находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это Light, Regular и Bold.

3. Кегль, или размер шрифта, — находится напротив начертания.

4. Интерлиньяж  — расстояние между строками.

5. Разрядка ||— расстояние между буквами.

6. Выравнивание. Горизонтальное — по центру , по левому или правому флагу. Вертикальное — вверх , вниз или по центру .

7. В блоке Layout есть настройки заполнения модуля. В одну строку, автоподстройка по ширине, фиксированный размер.

Шрифт можно найти по названию. Для этого нажмите на поле выбора и введите с клавиатуры нужное вам название — Figma сразу начнёт вам предлагать наиболее близкие по первым буквам варианты:

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

Шрифты в Figma можно применять к одному или нескольким текстовым объектам, отдельным словам или буквам:

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

Использование локальных шрифтов

По умолчанию в Figma доступны все шрифты из бесплатной библиотеки Google Fonts. Если вам их недостаточно, в редактор можно добавить и локальные шрифты.

В приложении для Windows и macOS локальные шрифты становятся доступны сразу после установки их на компьютер. Если вы используете Figma в браузере, то для этого отдельно нужно установить Font installers с официального сайта.

Чтобы проверить, сработал ли Figma Font Helper, зайдите в настройки аккаунта и прокрутите их до блока Fonts. Если Font installers установлен, вы увидите примерно такую надпись: