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

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

Встроенные и системные шрифты в Figma

Figma не имеет собственной внутренней базы шрифтов в классическом понимании. Вместо этого он опирается на шрифты, установленные в операционной системе устройства. Это означает, что если вы работаете на Mac, Figma автоматически распознаёт все шрифты из папки /System/Library/Fonts/, а на Windows — те, что зарегистрированы в системе через Панель управления → Шрифты.

Такой подход обеспечивает максимальную гибкость, но и создаёт риски. Например, если дизайнер использует шрифт Gotham Pro, а у коллеги его нет, текст отобразится некорректно — Figma применит fallback-шрифт (обычно Arial или Helvetica). Поэтому важно контролировать, какие шрифты используются в проектах.

Наиболее распространённые системные шрифты, которые есть почти у всех:

• Sans-serif: Arial, Helvetica, Roboto, Segoe UI
• Serif: Times New Roman, Georgia, Cambria
• Mono: Courier New, Consolas, Menlo
• Современные: Inter, SF Pro Display (Mac), Microsoft Sans Serif

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

Как проверить, какие шрифты доступны в Figma

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

1. Откройте любой текстовый фрейм (Text tool — T).
2. Нажмите на поле «Font» в правой панели Inspector.
3. Пролистайте выпадающий список — здесь отображаются все шрифты, которые Figma может использовать.

Обратите внимание: Figma группирует шрифты по семействам. Например, Roboto будет иметь несколько начертаний: Regular, Medium, Bold, Italic, Black и т.д. Убедитесь, что у вас установлены все нужные варианты, иначе вы не сможете применять их в макете.

Как подключить Google Fonts в Figma

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

Подключение Google Fonts — одно из самых частых действий при старте нового проекта. Особенно если команда хочет использовать современные, эстетичные шрифты вроде Poppins, Lato, Open Sans или Montserrat.

Пошаговая инструкция: как добавить Google Fonts в Figma

1. Перейдите в меню Plugins → Find more plugins.
2. Найдите «Google Fonts» — официальный плагин от Figma.
3. Нажмите «Install», чтобы установить его.
4. Откройте любой текстовый слой и вызовите плагин через Plugins → Google Fonts.
5. Выберите нужный шрифт и начертание.
6. Нажмите «Apply» — шрифт применится к выделенному тексту.

После применения шрифт сохраняется в файле. Другие участники команды увидят тот же текст, даже если у них не установлен этот шрифт локально. Это ключевое преимущество: вы можете использовать любые шрифты из Google Fonts без риска потерять типографику при обмене файлами.

Ограничения при использовании Google Fonts

• Шрифты применяются только к текстовым слоям, созданным после подключения.
• Если вы экспортируете макет в PDF или изображение, убедитесь, что шрифты встроены (в настройках экспорта можно выбрать «Embed fonts»).
• Не все начертания доступны сразу — некоторые требуют ручного подбора.

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

Иногда дизайн-проект требует уникального шрифта — например, фирменный типографический стиль компании. В таких случаях дизайнеры загружают кастомные шрифты в форматах .ttf, .otf или .woff.

Процесс добавления кастомного шрифта состоит из двух этапов: установка на устройство и использование в Figma.

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

Для macOS:

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

Для Windows:

• Щёлкните правой кнопкой по файлу шрифта.
• Выберите «Установить».
• Перезапустите Figma, если он был открыт.

После установки шрифт появится в списке доступных в Figma. Однако важно помнить: если вы работаете в команде, каждый участник должен установить этот шрифт вручную. Иначе текст будет заменён на fallback.

Альтернатива: использование переменных шрифтов (Variable Fonts)

Переменные шрифты — это современный формат, позволяющий хранить множество начертаний (от Thin до Black) в одном файле. Они поддерживаются в Figma, но требуют:

• Формата .ttf или .otf с поддержкой variable axes.
• Правильной установки на устройстве.
• Работают только в Figma Desktop (не во всех браузерах).

Преимущества:

• Меньше файлов для управления.
• Гибкость: можно задавать точное значение weight (например, 437 вместо 400 или 500).
• Экономия времени при прототипировании.

Управление шрифтами: лучшие практики

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

Стандартизируйте шрифты в дизайн-системе

Определите набор основных шрифтов для всей команды. Например:

• Основной шрифт: Inter (Regular, Medium, Bold)
• Заголовочный: Poppins (SemiBold, Bold)
• Моноширинный: Fira Code или JetBrains Mono

Создайте текстовые стили (Text Styles) в Figma и назначьте их как shared styles. Это позволит всем использовать одни и те же параметры: размер, межстрочный интервал, каппинг и шрифт.

Используйте библиотеки компонентов

Если вы работаете над несколькими проектами, вынесите типографику в отдельный Figma-файл и подключите его как библиотеку. Тогда изменения в шрифтах будут синхронизироваться автоматически.

Контролируйте версии шрифтов

Иногда разные версии одного шрифта (например, Inter v2 vs v3) могут привести к различиям в отображении. Решение:

• Фиксируйте версию шрифта в документации дизайн-системы.
• Размещайте ссылки на скачивание нужной версии.
• Используйте Google Fonts, где версии контролируются централизованно.

Плагины для работы с шрифтами в Figma

Помимо Google Fonts, существует ряд полезных плагинов, которые упрощают работу с типографикой.

Популярные плагины

• Google Fonts — официальный способ подключения более чем 1000 шрифтов.
• Font Picker — позволяет быстро переключаться между шрифтами без открытия панели свойств.
• Type Scale — помогает строить гармоничную вертикальную сетку на основе типографической шкалы (например, Major Third, Golden Ratio).
• WhatFont — анализирует текст в макете и показывает, какой шрифт используется.
• Auto Font Matcher — предлагает аналоги недоступных шрифтов.

Когда использовать плагины, а когда — ручное управление?

• Для быстрого прототипирования — используйте Google Fonts и Type Scale.
• Для брендированных проектов — устанавливайте кастомные шрифты и стандартизируйте их через библиотеки.
• Для аудита — WhatFont и Auto Font Matcher помогут найти и исправить ошибки.

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

Елена также делится кейсом: её команда использовала шрифт Avenir Next, который есть на Mac по умолчанию. Но когда дизайнер с Windows присоединился к проекту, весь текст сместился — Avenir не был установлен. Решение: переход на Inter, доступный всем.

Ещё один совет от эксперта: «Создайте чек-лист перед сдачей макета: 1) Все шрифты из Google Fonts или системных? 2) Есть ли текстовые стили? 3) Экспортированы ли шрифты в PDF? Это сэкономит часы на правках.»

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

Заключение

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

• Figma использует системные и подключённые шрифты — локальные, Google Fonts, кастомные.
• Для стабильности проектов применяйте шрифты из Google Fonts или стандартные (Inter, Roboto).
• Создавайте текстовые стили и используйте библиотеки для единообразия.
• Проверяйте лицензии перед использованием кастомных шрифтов.
• Всегда экспортируйте с встроенными шрифтами, если отправляете файл внешним лицам.