Как добавить свой шрифт в фигме

В Figma можно добавить собственный шрифт, загрузив его файлы (TTF, OTF, WOFF и др.) через плагин FigJam или установив на компьютер, чтобы он был доступен в системе. Главное — убедиться, что шрифт поддерживает веб-использование и не нарушает лицензионные права.

Как работают шрифты в Figma

Figma — это облачный инструмент для дизайна интерфейсов, который активно использует системные шрифты. Это означает, что сам редактор не хранит шрифты локально, а опирается на те, что установлены в вашей операционной системе. Когда вы выбираете шрифт в текстовом поле, Figma обращается к библиотеке шрифтов вашего компьютера: Windows, macOS или Linux.

Если шрифт отсутствует на устройстве, он не отобразится в списке, даже если кто-то другой использовал его в проекте. Это может вызывать проблемы при совместной работе, особенно если команда распределена географически. Поэтому важно понимать разницу между локальными и общими шрифтами.

Когда вы открываете чужой файл, Figma показывает предупреждение: «Шрифт недоступен». В этом случае текст остаётся, но отображается заменителем, например, Arial или Roboto. Чтобы всё выглядело корректно, нужный шрифт должен быть установлен у каждого участника.

Типы поддерживаемых шрифтов

Figma работает с основными форматами:

• TTF (TrueType Font) — универсальный формат, поддерживается всеми ОС.
• OTF (OpenType Font) — более продвинутый, поддерживает расширенные лигатуры и стили.
• WOFF / WOFF2 — веб-шрифты, но требуют конвертации для установки на ПК.

Для корректной работы в Figma рекомендуется использовать TTF или OTF.

Как добавить шрифт через операционную систему

Самый надёжный способ — установка шрифта на компьютер. После этого он автоматически станет доступен в Figma.

Установка на macOS

1. Скачайте файл шрифта (.ttf или .otf).
2. Дважды кликните по нему — откроется приложение «Просмотр шрифтов».
3. Нажмите «Установить шрифт».
4. Перезапустите Figma, если он был открыт.

Шрифт появится в разделе «Системные шрифты» в менеджере типографики.

Установка на Windows

1. Скачайте файл шрифта.
2. Щёлкните правой кнопкой мыши и выберите «Установить».
3. Или перетащите файл в папку C:WindowsFonts.
4. Откройте Figma — шрифт будет в списке.

Если шрифт не появился, попробуйте перезагрузить компьютер.

Linux (Ubuntu/Debian)

1. Создайте папку ~/.fonts, если её нет.
2. Скопируйте туда файлы шрифтов.
3. Выполните команду: fc-cache -fv.
4. Перезапустите Figma.

Проверить, установлен ли шрифт, можно командой: fc-list | grep "название_шрифта".

Добавление шрифтов с помощью плагинов

Если вы не можете установить шрифт на компьютер (например, работаете на чужом устройстве), можно использовать плагины Figma.

Font Picker

Один из самых популярных плагинов — Font Picker. Он позволяет:

• Просматривать системные шрифты.
• Быстро применять их к выделенным текстовым слоям.
• Фильтровать по категориям: рукописные, моноширинные, готические и др.

Хотя он не загружает новые шрифты, он ускоряет работу с уже установленными.

Local Fonts

Плагин Local Fonts помогает найти и применить шрифты, установленные на вашем компьютере. Особенно полезен, если список шрифтов в Figma слишком длинный.

Google Fonts for Figma

Хотя Google Fonts — это не ваш шрифт, этот плагин позволяет импортировать бесплатные шрифты напрямую. Выбираете шрифт, нажимаете «Import», и он применяется к тексту. Однако для полноценного использования всё равно нужно установить его на ПК.

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

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

Как применить шрифт в FigJam

1. Убедитесь, что шрифт установлен на вашем компьютере.
2. Откройте FigJam-доску.
3. Выберите текстовый инструмент (T).
4. В панели справа найдите раздел «Font», нажмите на название шрифта.
5. Выберите нужный из списка — он должен быть там, если установлен.

Если шрифт не отображается, повторите процесс установки.

Совместная работа и шрифты

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

• Договоритесь о единой типографской системе.
• Используйте только общедоступные шрифты (Google Fonts, системные).
• Добавьте шрифт в бриф или дизайн-систему.

Распространённые ошибки и как их избежать

Работа с кастомными шрифтами часто сопровождается техническими трудностями. Вот основные из них и способы решения.

Шрифт не появляется в Figma

• Проверьте, установлен ли он в системе — зайдите в «Шрифты» (macOS) или C:WindowsFonts (Windows).
• Перезапустите Figma — кэш может не обновляться автоматически.
• Убедитесь, что файл шрифта не повреждён — попробуйте открыть его двойным кликом.

Шрифт отображается у меня, но не у коллег

Это классическая ситуация. Решение — унифицировать среду:

• Создайте документ с названиями всех используемых шрифтов.
• Поделитесь ссылкой на скачивание (если это разрешено лицензией).
• Используйте Figma Variables или стиль текста, чтобы минимизировать ручной выбор.

Ошибка лицензирования

Некоторые шрифты нельзя использовать в цифровых продуктах без покупки лицензии. Например, шрифты от Hoefler & Co. или Adobe Type требуют отдельного разрешения.

Шрифт «слетает» при экспорте

Если вы экспортируете макет в PDF или PNG, а шрифт заменяется — возможно, он не встроен. При экспорте в PDF Figma не встраивает шрифты по умолчанию.

Экспертное мнение

Также Дмитрий отмечает важность тестирования: «Проверяйте, как шрифт выглядит на разных экранах и в разных языках. Кириллица может отображаться хуже, чем латиница, особенно в кастомных шрифтах».

Вопросы и ответы

Заключение

Добавление своего шрифта в Figma — простая задача, если понимать принципы работы типографики в облачных инструментах. Главное — установить шрифт на компьютер, проверить лицензию и убедиться, что он доступен у всех участников проекта.

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