Дизайн
#Руководства

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

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

Иллюстрация: Оля Ежак для Skillbox Media

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

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

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

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

  • Сам шрифт — отображается как его полное название. По умолчанию Figma предлагает пользователю использовать Roboto, но вы можете выбрать любой из доступных.
  • Начертание — находится под названием шрифта. Количество начертаний и их названия зависят от разработчика шрифта, но обычно это light, regular и bold.
  • Кегль, или размер шрифта, — находится напротив начертания.
  • Разрядка || — расстояние между буквами.
  • Интерлиньяж  — расстояние между строками.
  • Абзацный отступ .
  • Выравнивание.
    Горизонтальное — по центру , по левому или правому флагу . Вертикальное — вверх , вниз или по центру .

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

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

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

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

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

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

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

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

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

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

Управление отсутствующими шрифтами

Если коллега отправил вам файл без необходимых шрифтов, Figma предупредит об этом вот таким уведомлением:

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

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

Чтобы изменить шрифт, в уведомлении кликните на поле с жёлтым квадратом и выберите замену. При необходимости можно изменить и начертание:

Больше интересного про дизайн в нашем телеграм-канале.  Подписывайтесь!

Самоучитель по Figma

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

Нейросети для работы и творчества!
Хотите разобраться, как их использовать? Смотрите конференцию: четыре топ-эксперта, кейсы и практика. Онлайн, бесплатно. Кликните для подробностей.
Смотреть программу
Понравилась статья?
Да

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

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