Как установить в фигму новые шрифты

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

Как работает типографика в Figma

Figma — облачный дизайн-инструмент, который не хранит шрифты на сервере. Вместо этого он обращается к шрифтам, установленным на вашем устройстве. Это означает, что интерфейс Figma «видит» только те начертания, которые доступны в системе: Windows, macOS или Linux. Когда вы открываете Figma в браузере или в десктопном приложении, программа сканирует установленные шрифты и отображает их в панели текстовых свойств.
Если шрифт не установлен локально, он не появится в списке выбора, даже если он использовался в другом проекте. Это важное ограничение, которое часто вызывает путаницу: команда может работать с одним файлом, но видеть разные варианты текста, если на устройствах участников нет одинаковых шрифтов.
Для корректного отображения текста в Figma используется технология system font stack. Это значит, что при открытии файла с нестандартным шрифтом система автоматически заменяет его на резервный (например, Arial или Roboto), пока пользователь не установит нужный шрифт. Такое поведение помогает сохранить структуру макета, но может исказить визуальное восприятие.

Шаги добавления шрифтов: пошаговая инструкция

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

1. Найдите и скачайте шрифт. Источник должен быть надёжным: Google Fonts, Adobe Fonts, Font Squirrel, MyFonts или официальный сайт разработчика. Убедитесь, что у шрифта есть разрешение на использование в коммерческих проектах, если это требуется.
2. Распакуйте архив (если нужно). Шрифты часто поставляются в .zip-архивах. Извлеките файлы с расширениями .ttf, .otf или .woff2.
3. Установите шрифт на компьютер. На macOS дважды щёлкните по файлу и нажмите «Установить шрифт». В Windows — правый клик → «Установить». В Linux используйте менеджер шрифтов или скопируйте файлы в папку ~/.fonts.
4. Перезапустите Figma. Закройте и снова откройте Figma Desktop. Если работаете в браузере — обновите страницу (Ctrl+R / Cmd+R) или очистите кэш.
5. Проверьте наличие шрифта. Создайте текстовый блок, кликните по полю выбора шрифта и найдите его в списке. Можно использовать поиск по имени.

Пример: установка шрифта Inter из Google Fonts

Inter — популярный open-source шрифт, часто используемый в интерфейсах. Его можно бесплатно загрузить и использовать.

• Перейдите на fonts.google.com.
• Найдите «Inter» и нажмите «Download family».
• Распакуйте архив. Вы увидите несколько файлов .ttf (Regular, Bold, Medium и т.д.).
• Установите все файлы, чтобы получить доступ ко всем начертаниям.
• Откройте Figma и начните набирать текст — шрифт «Inter» должен появиться в списке.

Форматы шрифтов: что поддерживает Figma

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

Если вы получили шрифт в формате .woff2 (например, из Figma-плагина или веб-проекта), его нужно конвертировать. Для этого используйте бесплатные онлайн-сервисы, такие как Transfonter.org или CloudConvert. Они преобразуют .woff2 в .ttf или .otf с сохранением метаданных.

Когда нужна конвертация?

• Вы скачали шрифт из веб-проекта, и он в формате .woff2.
• Вы используете шрифт из CSS-файла и хотите применить его в Figma.
• Плагин Figma экспортирует шрифт в веб-формате, но вы хотите использовать его локально.

Частые ошибки и как их избежать

Даже опытные дизайнеры сталкиваются с типичными проблемами при работе со шрифтами в Figma. Ниже — основные ошибки и способы их решения.

Ошибка 1: Шрифт не появляется в списке Figma

• Причина: Шрифт установлен, но Figma не обновила кэш.
• Решение: Перезапустите Figma Desktop. В браузере нажмите Ctrl+Shift+R (полная перезагрузка без кэша).
• Альтернатива: Проверьте, установлен ли шрифт в системе. Откройте «Шрифты» в Панели управления (Windows) или «Просмотр шрифтов» (macOS).

Ошибка 2: Текст отображается некорректно (квадраты вместо букв)

• Причина: Шрифт повреждён или не полностью установлен.
• Решение: Переустановите шрифт. Удалите старую версию через системный менеджер шрифтов, затем установите заново.
• Альтернатива: Скачайте шрифт с другого источника — возможно, файл был битым.

Ошибка 3: Шрифт виден у одного участника команды, но не у других

• Причина: Шрифт не установлен на устройствах всех членов команды.
• Решение: Создайте документ с инструкцией по установке шрифтов. Используйте Figma Community, чтобы опубликовать ссылку на шрифт или загрузить файлы в общий доступ.
• Альтернатива: Временно замените шрифт на аналог из Google Fonts до момента установки оригинала.

Работа с командой: шрифты в совместном доступе

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

• Список всех используемых шрифтов с указанием начертаний.
• Ссылки на источники скачивания.
• Инструкцию по установке для новых сотрудников.
• Примеры использования: заголовки, подзаголовки, кнопки, подписи.

Также можно использовать Figma Variables (переменные) для управления шрифтами. Начиная с 2025 года, Figma активно развивает систему переменных, позволяя задавать не только цвета, но и типографические стили. Это позволяет централизовать управление шрифтами и легко вносить изменения.

Как настроить переменные для шрифтов

1. Откройте панель «Design» → «Variables».
2. Создайте новую переменную типа «Typography».
3. Назовите её, например, «Text/Body/Medium».
4. Укажите шрифт, размер, интерлиньяж, кернинг.
5. Примените переменную к текстовым слоям через панель свойств.

Экспорт и совместимость шрифтов

Экспорт макетов из Figma — ещё одна зона риска. Если вы экспортируете PNG, JPG или SVG с текстом, важно понимать, как обрабатываются шрифты.

• Изображения (PNG, JPG): Текст растеризуется. Шрифт «запекается» в картинку. Никаких проблем с лицензией или отображением.
• SVG: По умолчанию Figma оставляет текст как текст, а не конвертирует в кривые. Это может вызвать проблемы, если SVG открывается на устройстве без установленного шрифта.
• PDF: Текст остаётся векторным. Рекомендуется вручную конвертировать текст в контуры (outline) перед экспортом, если PDF будет использоваться вне команды.

Когда конвертировать текст в контуры?

• Вы отправляете файл клиенту, который не является дизайнером.
• Макет используется в печати (буклеты, упаковка).
• Вы работаете с юристами или маркетологами, которым важна точность.

Чтобы перевести текст в контуры в Figma:

1. Выделите текстовый слой.
2. Нажмите Ctrl+Shift+O (Cmd+Shift+O на Mac).
3. Текст превратится в векторный объект. Его уже нельзя редактировать как текст, но он гарантированно сохранит вид.

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

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

Заключение

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

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