Установка шрифтов в Figma¶
Установка шрифтов в Figma — процесс добавления шрифтов в облачный сервис веб-дизайна Figma для их использования в проектах. Figma работает в браузере и не имеет прямого доступа к системным шрифтам компьютера, поэтому для работы с кириллицей, редкими гарнитурами или лицензированными шрифтами их необходимо подключить через службу Figma Font Helper или загрузить вручную.
¶Принцип работы со шрифтами в Figma
Figma хранит список доступных шрифтов на сервере. По умолчанию сервис подключает шрифты, установленные на компьютере пользователя, через десктопное приложение или утилиту Figma Font Helper — небольшую программу, работающую в фоновом режиме и передающую локальные шрифты в облако Figma. Без Font Helper браузерная версия Figma видит только стандартный набор шрифтов (Inter, Roboto, Noto и другие встроенные гарнитуры).
Для команд и организаций существует возможность загружать шрифты непосредственно в облако Figma — функция Shared Fonts. В этом случае шрифты доступны всем участникам проекта без установки на локальные машины.
¶Установка через Figma Font Helper
Самый распространённый способ подключить свои шрифты:
- Скачать Figma Font Helper с официального сайта figma.com (раздел «Downloads»).
- Запустить установщик — утилита автоматически настраивается и запускается при старте системы.
- Перезапустить браузер, чтобы Figma увидел локальные шрифты.
- В редакторе Figma выбрать нужный шрифт из выпадающего списка в панели Text.
Font Helper доступен для Windows, macOS и Linux. На Linux утилита устанавливается как systemd-сервис и запускается командой figma-font-helper start.
¶Загрузка шрифтов в облако (Shared Fonts)
Для корпоративных проектов или совместной работы:
- В браузере открыть меню Figma → Manage fonts (или раздел Fonts в настройках организации).
- Нажать Upload и выбрать файлы шрифтов в форматах .ttf, .otf или .woff2.
- Figma проверит лицензию и добавит шрифт в библиотеку организации.
- Шрифт станет доступен всем участникам команды без дополнительной установки.
Ограничение: загрузка в облако доступна только на платных тарифах Organizational и Enterprise. На бесплатном тарифе и Professional используется только локальная установка через Font Helper.
¶Поиск и установка шрифтов из каталога Google Fonts
Figma имеет интеграцию с каталогом Google Fonts — более 1000 бесплатных гарнитур. Чтобы подключить шрифт из этого каталога:
- В панели Text нажать на название текущего шрифта.
- В поле поиска ввести название шрифта (например, «Manrope» или «Unbounded»).
- Если шрифт есть в каталоге Google Fonts, он появится с пометкой и будет доступен сразу — без установки.
Для шрифтов с поддержкой кириллицы в Google Fonts предусмотрены фильтры: при поиске можно указать нужный языковой набор.
¶Типичные проблемы и решения
| Проблема | Причина | Решение |
|---|---|---|
| Шрифт не появляется в списке | Font Helper не запущен | Перезапустить утилиту и браузер |
| Кириллица отображается квадратами | Шрифт без кириллического набора | Выбрать гарнитуру с поддержкой кириллицы |
| Шрифт виден только вам | Локальная установка без Shared Fonts | Загрузить шрифт в облако организации |
| Конфликт версий шрифта | Разные версии на разных машинах | Обновить шрифт до одинаковой версии у всех |
¶Форматы файлов
Figma принимает шрифты в форматах TrueType (.ttf), OpenType (.otf) и Web Open Font Format (.woff2). Формат .dfont (macOS) и старые .fon не поддерживаются — перед установкой их следует конвертировать.
¶Лицензирование
Загружая коммерческий шрифт в Figma, пользователь должен обладать действующей лицензией на его использование. Для Shared Fonts лицензия должна покрывать сетевое использование в рамках организации. Figma не проверяет лицензии автоматически — ответственность возложена на пользователя или владельца организации.
¶Интересные факты
- Шрифт Inter, разработанный Райаном Макдональдом специально для интерфейсов, является шрифтом по умолчанию в Figma.
- Figma поддерживает переменные шрифты (Variable Fonts) — одну гарнитуру с плавной настройкой веса, ширины и других осей.
- В 2022 году Figma добавила поддержку шрифтов в формате .woff2, что ускорило загрузку проектов с большим количеством текстовых слоёв.
Источники:
- Документация Figma Help Center (help.figma.com)
- Официальный сайт Figma (figma.com)
- Каталог Google Fonts (fonts.google.com)