Как изменить шрифт в фигме

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

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

Современные проекты в Figma часто включают десятки, а то и сотни экранов. Без системного подхода к управлению шрифтами легко потерять единообразие: одни кнопки будут в Inter Regular 14px, другие — в случайном Arial 16px. Поэтому важно понимать не только как поменять шрифт у одного текста, но и как масштабировать эти изменения на весь дизайн-систему.

Основы изменения шрифта: первый шаг

Первое, что нужно знать: в Figma любой текст — это отдельный объект. Чтобы изменить его шрифт, достаточно выделить текстовый фрейм (текстовое поле) и перейти в правую панель свойств. Там сразу будет видна секция Text, где можно менять шрифтовые параметры.

Шрифт задаётся двумя ключевыми параметрами: семейство (например, Inter, Roboto, SF Pro) и начертание (Regular, Bold, Medium и т.д.). Важно понимать, что Figma не хранит шрифты внутри файла — они загружаются с вашего компьютера или из облака. Если шрифт недоступен, появится предупреждение о замене (fallback).

• Выделите текстовый объект с помощью инструмента Text Tool (T).
• В правой панели найдите блок Text.
• Нажмите на текущее название шрифта — откроется выпадающий список доступных семейств.
• Выберите нужное семейство, затем — начертание.

После выбора шрифт применяется мгновенно. Но если вы видите, что вместо Inter Medium отображается Inter Regular, проверьте: возможно, нужное начертание не установлено на вашем устройстве. Figma подсветит такие случаи красным треугольником рядом с названием шрифта.

Если вы работаете с однострочным текстом, изменения вступят в силу сразу. В случае многострочного текста с разными стилями (например, часть жирная, часть обычная), нужно выделить конкретный фрагмент. Для этого щёлкните по тексту два раза и выделите нужные символы мышью.

Как выбрать начертание без ошибок

Не все шрифтовые семейства содержат одинаковый набор начертаний. Например, Inter имеет более 10 вариантов: от Thin до Black, с курсивами. Но если вы попробуете применить «Inter ExtraBold Italic», а он не установлен — Figma автоматически заменит его на ближайший доступный, например, на Bold.

Чтобы избежать таких подмен:

1. Убедитесь, что все нужные начертания загружены локально.
2. Используйте плагины типа Google Fonts for Figma для прямого подключения.
3. Проверяйте наличие шрифтов в разделе Resources на верхней панели.

Работа с текстовыми стилями

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

Создание текстового стиля:

• Настройте текст так, как вам нужно: выберите шрифт, размер, lineHeight, tracking.
• В правой панели нажмите на значок квадратика справа от поля шрифта (иконка «стилей»).
• Введите имя стиля, например, «Heading/H1/Primary».
• Нажмите «Create style».

После этого этот стиль станет доступен во всех текстовых объектах через тот же выпадающий список. Это особенно полезно при работе над дизайн-системами, когда H1 должен быть везде одинаковым.

Глобальное обновление через стили

Один из главных плюсов текстовых стилей — возможность массового обновления. Представьте: вы решили увеличить размер H2 со 18px до 20px. Если все заголовки используют стиль «Heading/H2», достаточно отредактировать сам стиль — и все экземпляры обновятся автоматически.

Чтобы изменить существующий стиль:

1. Откройте панель Design в правом верхнем углу.
2. Перейдите в раздел Text Styles.
3. Найдите нужный стиль, кликните по нему.
4. Внесите изменения в параметры шрифта.

Управление шрифтами в компонентах и экземплярах

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

Если текст в компоненте привязан к текстовому стилю, вы можете управлять им централизованно. Но если шрифт задан «вручную», при каждом изменении придётся редактировать мастер-компонент.

Лучшая практика:

• Используйте текстовые стили внутри компонентов.
• Не вносите «жёсткие» шрифтовые значения, если не хотите терять гибкость.
• Для динамического текста применяйте overrides в экземплярах.

Overrides: как менять шрифт в экземпляре

Экземпляр компонента позволяет переопределять некоторые свойства, включая текст. Вы можете:

• Изменить содержание текста.
• Сменить шрифт, если это разрешено мастером.
• Обновить стиль текста, если используется Text Style override.

Чтобы включить override для текста:

1. Откройте мастер-компонент.
2. Выделите текстовый элемент.
3. В правой панели нажмите на три точки рядом с названием свойства.
4. Выберите «Make overrideable».

Теперь при работе с экземпляром вы сможете менять шрифт, не разрывая связь с компонентом.

Импорт и настройка шрифтов: локальные и Google Fonts

Figma поддерживает два типа шрифтов: локальные (установленные на ПК) и облачные (через сервисы вроде Google Fonts).

Для локальных шрифтов:

• Скачайте файлы (обычно .ttf или .otf).
• Установите их через системные настройки (Windows/Mac).
• Перезапустите Figma — шрифты появятся в списке.

Для Google Fonts:

• Установите плагин Google Fonts for Figma из Figma Community.
• Откройте плагин, найдите нужный шрифт (например, Lato, Montserrat).
• Нажмите «Use this font» — он загрузится в ваш проект.

Как проверить, какие шрифты используются в проекте

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

1. Нажмите на стрелку вверху справа — «Resources».
2. Выберите вкладку «Fonts».
3. Увидите список всех шрифтов, используемых в файле.
4. Можно фильтровать по наличию на устройстве.

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

Создание типографической системы

Профессиональный дизайн требует системного подхода. Вместо случайного выбора шрифтов создайте иерархию: H1, H2, Body, Caption, Button Text и т.д.

Структура типографической системы:

• Заголовки (H1–H6): крупные, жирные, высокая контрастность.
• Основной текст (Body): оптимальная читаемость, 14–16px.
• Подписи (Caption): мелкий текст, низкая насыщенность.
• Акцентные стили: жирный, курсив, underline.

Каждому уровню присвойте уникальный текстовый стиль. Имя стиля должно быть понятным: например, «Text/Body/Medium/16px».

Интеграция с дизайн-системой

Если вы используете Figma как платформу для дизайн-системы:

• Сохраните текстовые стили как часть библиотеки («Publish as Library»).
• Подключите библиотеку к другим проектам.
• Все команды получат единые шрифтовые стандарты.

Это исключает расхождения и ускоряет работу новых сотрудников.

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

• Использование разных шрифтов для одного уровня: например, H2 в Inter и Roboto. Решение — строгие текстовые стили.
• Отсутствие fallback-шрифтов: если шрифт недоступен, текст может сломаться. Рекомендуется указывать запасные варианты в спецификациях.
• Ручное форматирование вместо стилей: ведёт к хаосу. Автоматизируйте через Text Styles.
• Игнорирование line-height и tracking: влияет на читаемость. Всегда задавайте эти параметры явно.

Проверочный чек-лист

Перед сдачей макета выполните:

1. Проверьте, все ли тексты используют утверждённые стили.
2. Убедитесь, что шрифты доступны у всех в команде.
3. Просканируйте файл на лишние или неиспользуемые шрифты.
4. Обновите библиотеку, если были изменения.

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

По его словам, команды, которые внедряют текстовые стили с первого дня, экономят до 30% времени на согласовании и правках. Он также рекомендует использовать плагины вроде Auto Typography, который автоматически создаёт иерархию на основе ваших настроек.

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

Заключение

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

• Всегда используйте текстовые стили вместо ручного форматирования.
• Подключайте шрифты через Google Fonts или устанавливайте локально.
• Интегрируйте типографику в дизайн-систему через библиотеки.
• Проверяйте доступность шрифтов у всех участников проекта.
• Автоматизируйте процессы с помощью плагинов и overrides.