Загрузка шрифтов в Figma¶
Загрузка шрифта в Figma — это процесс добавления пользовательского шрифтового файла в облачный редактор интерфейсов Figma для использования в дизайн-проектах. Figma работает преимущественно с системными шрифтами, установленными на компьютере дизайнера, но также поддерживает загрузку собственных шрифтов через плагин и корпоративный тариф. Правильная работа со шрифтами критична для вёрстки макетов, передачи проектов разработчикам и совместной работы команды.
¶Принцип работы со шрифтами в Figma
Figma — браузерное приложение, но для отображения шрифтов использует локальные ресурсы компьютера пользователя. При открытии файла сервис запрашивает доступ к установленным в системе шрифтам через специальный локальный агент Figma Font Helper. Если нужного шрифта нет в системе, текст в макете отображается с заменой (fallback) на шрифт по умолчанию, а в панели свойств появляется уведомление о недоступном шрифте.
Важное ограничение: Figma не позволяет загружать произвольные шрифтовые файлы (TTF, OTF) напрямую в проект через интерфейс редактора. Шрифт должен быть либо установлен в операционной системе, либо добавлен через специальные инструменты.
¶Способы добавления шрифтов
¶Установка системного шрифта
Самый распространённый способ — установить шрифт в операционную систему. После установки Figma автоматически подхватывает его при следующем обновлении страницы или перезапуске Font Helper.
В Windows шрифт устанавливается через контекстное меню файла («Установить») или через панель управления «Шрифты». В macOS файл шрифта добавляется через приложение «Шрифты» (Font Book) двойным щелчком или перетаскиванием.
¶Загрузка через Google Fonts
Figma имеет плотную интеграцию с каталогом Google Fonts. Более тысячи шрифтов из этой коллекции доступны в редакторе без установки — достаточно ввести название в выпадающем списке шрифтов. Для коммерческих проектов следует убедиться, что выбранный шрифт из Google Fonts допускает такое использование (лицензия SIL Open Font License).
¶Корпоративные шрифты (Organization Plan)
На тарифе Organization Figma предоставляет возможность загружать приватные шрифты прямо в рабочее пространство организации. Шрифтовые файлы загружаются через настройки организации в разделе «Fonts», после чего они становятся доступны всем членам команды без установки на локальные компьютеры. Это решает проблему совместной работы, когда дизайнеры используют разные операционные системы.
¶Плагины для загрузки шрифтов
Для разовых задач и работы с недоступными шрифтами существуют сторонние плагины. Наиболее известный — «Font Replacer», позволяющий заменить шрифт в выделенных слоях. Для загрузки кастомных шрифтов используется подходящий по функциональности плагин, работающий через API Figma.
¶Работа с недоступными шрифтами
Когда макет содержит шрифт, которого нет в системе, Figma показывает диалог с предложением заменить его на доступный. Дизайнер может выбрать аналог по метрикам или пропустить замену, сохранив отображение с fallback. В режиме совместного редактирования недоступный шрифт помечается специальным значком в списке шрифтов.
Для передачи проекта разработчикам Figma экспортирует CSS-правила с указанием семейства шрифта, начертания, размера и межстрочного интервала. Если шрифт недоступен, разработчик получит корректные CSS-правила, но должен сам подключить файл шрифта в веб-проекте.
¶Лицензирование шрифтов
При использовании коммерческих шрифтов в Figma необходимо учитывать условия лицензии. Большинство шрифтовых лицензий (например, от Adobe, Monotype, ParaType) разрешают использование на компьютерах лицензиатов, но не допускают передачу файлов третьим лицам. Загрузка шрифта в корпоративное пространство Figma может нарушать лицензию, если она не распространяется на облачные сервисы.
Для веб-проектов шрифты подключаются отдельно через @font-face или сервисы вроде Google Fonts, Adobe Fonts. Figma не выступает хостингом шрифтов для продакшена.
¶Настройка Font Helper
Локальный агент Figma Font Helper устанавливается автоматически при первом запуске десктопного приложения Figma или при подключении к сервису через браузер. Агент работает в фоновом режиме и передаёт список системных шрифтов в редактор.
Если шрифты не отображаются, проверяется версия агента, его статус в списке процессов, а также разрешение на доступ к шрифтам в настройках операционной системы. На macOS требуется соответствующее разрешение в разделе «Безопасность и конфиденциальность».
¶История
Функция корпоративных шрифтов была добавлена Figma в 2020 году на тарифе Organization. Ранее команды вынуждены были устанавливать шрифты вручную на каждое рабочее место. Интеграция с Google Fonts присутствует с ранних версий сервиса.
Источники:
- Документация Figma Help Center (help.figma.com)
- Руководство по шрифтам Figma
- Условия использования Figma