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

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

Figma — один из самых популярных инструментов веб- и UI-дизайна, объединяющий прототипирование, работу с компонентами и совместную разработку. Одной из ключевых особенностей интерфейса является работа с текстом: заголовками, кнопками, описаниями. При этом корректное применение шрифтов напрямую влияет на читаемость, восприятие бренда и качество передачи макетов разработчикам. Несмотря на кажущуюся простоту, вопрос «как поменять шрифт в Figma» регулярно возникает у новичков и даже у опытных пользователей при работе с кастомными типографиками. Проблемы могут быть связаны с отсутствием шрифта в системе, некорректным отображением начертаний или сложностями при использовании в команде. В этой статье мы детально разберём все способы изменения шрифта, расскажем, как избежать распространённых ошибок, и дадим практические рекомендации по работе с типографикой в Figma.

Как изменить шрифт в Figma: базовые шаги

Самый простой способ сменить шрифт — использовать встроенную панель свойств. Выделите любой текстовый элемент (текст фрейм), и в правой части интерфейса появится панель Properties. В разделе Text найдите поле Font family. По умолчанию там указан текущий шрифт, например, Inter или Roboto. Нажмите на него — откроется выпадающий список с доступными шрифтами.

Если у вас установлено много шрифтов, поиск поможет быстро найти нужное название. Достаточно начать вводить имя, например, «Montserrat», и система покажет совпадения. После выбора семейства автоматически применяется основное начертание (Regular). Чтобы изменить его, используйте соседнее поле — Font weight.

• Выделите текстовый объект.
• В правой панели найдите блок Text.
• Нажмите на название шрифта и выберите нужное семейство.
• Уточните начертание: Regular, Bold, Light и т.д.

Пошаговая инструкция

1. Откройте Figma и загрузите ваш файл.
2. Выберите инструмент Text (T) или кликните по существующему текстовому блоку.
3. В правой панели перейдите в раздел Text.
4. Кликните по текущему значению Font family.
5. В поисковой строке введите название нужного шрифта.
6. Выберите подходящее семейство из списка.
7. Установите желаемое начертание через Font weight.
8. Проверьте, как текст выглядит в макете.

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

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

Наиболее распространённые источники:

• Системные шрифты — те, что установлены в macOS, Windows или Linux. Например, Arial, Helvetica, Georgia. Они работают «из коробки», если установлены.
• Google Fonts — бесплатная библиотека из более чем 1500 шрифтов. Интегрируется через официальный плагин Figma.
• Платные шрифты — от Foundries (например, Adobe Fonts, Monotype). Требуют установки через приложения или вручную.
• Плагины — сторонние инструменты вроде «Font Picker», «WhatFont», «Fonts Addict», расширяющие возможности выбора.

Подключение Google Fonts

Официальный плагин Google Fonts позволяет добавлять шрифты без установки на компьютер. Это особенно удобно при удалённой работе или при ограничениях на установку ПО.

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

После подключения шрифт становится доступным в списке Font family, как будто он установлен локально.

Установка кастомных шрифтов

Если вы используете проприетарные шрифты (например, от клиента), их нужно установить в систему:

• macOS: дважды кликните по .ttf/.otf файлу → Install.
• Windows: ПКМ по файлу → Install for all users.

После установки перезапустите Figma. Шрифт появится в списке.

Расширенные настройки: размер, интерлиньяж, кернинг

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

• Font size — размер шрифта в px.
• Line height — высота строки (интерлиньяж).
• Letter spacing — кернинг (расстояние между буквами).
• Text case — преобразование регистра (прописные, строчные).
• Text align — выравнивание текста.

Настройки находятся в том же блоке Text, ниже выбора шрифта. Например, line height можно задать в процентах или фиксированных пикселях. Letter spacing измеряется в em, что делает его масштабируемым.

Рекомендации по типографике

• Для заголовков используйте line height 1.2–1.4.
• Для основного текста — 1.5–1.6.
• Отрицательный кернинг (например, -0.02em) улучшает восприятие крупных заголовков.
• Избегайте значения line height меньше 1 — текст станет трудночитаемым.

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

В командной работе критически важно стандартизировать шрифты. Иначе каждый дизайнер будет использовать своё начертание, что приведёт к хаосу в макетах и сложностям у разработчиков.

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

Как создать текстовый стиль

1. Настройте текстовый блок с нужными параметрами.
2. В правой панели нажмите на значок «звёздочка» рядом с названием шрифта.
3. Введите имя стиля, например, «Heading/H1/Bold».
4. Нажмите Create.

Теперь этот стиль доступен во всех текстовых фреймах через выпадающий список Text style. Его можно применять одним кликом.

Использование библиотек и переменных (Figma Variables)

С выходом Figma Variables (2023–2024) стало возможным хранить шрифты как переменные. Это позволяет централизованно управлять типографикой.

• Создайте переменную типа String с названием шрифта (например, «Primary Font»).
• Привяжите её к текстовому стилю.
• При изменении переменной обновляются все связанные элементы.

Это особенно полезно при A/B-тестировании шрифтов или смене брендинга.

Типичные ошибки и как их исправить

Даже опытные пользователи сталкиваются с проблемами при работе со шрифтами. Вот самые частые:

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

Причина: шрифт не установлен на компьютере получателя. Решение — использовать Google Fonts или указать обязательную установку.

Начертание не меняется

Иногда после выбора Bold текст остаётся обычным. Это происходит, если в системе нет именно этого файла (например, Montserrat-Bold.ttf). Проверьте, установлены ли все нужные начертания.

Отображение отличается в разных ОС

macOS и Windows по-разному рендерят шрифты. Чтобы минимизировать расхождения, используйте веб-безопасные шрифты или тестируйте макеты на разных устройствах.

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

При экспорте в PDF или PNG шрифты могут заменяться. Решение — конвертировать текст в кривые (Outline Stroke), но это делает его неизменяемым.

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

Анна также отмечает, что использование Figma Variables для управления шрифтами стало настоящим прорывом: «Теперь мы можем за пару минут протестировать, как будет выглядеть интерфейс с другим шрифтом, не трогая ни одного текстового блока. Это уровень, которого раньше не было ни в одном инструменте.»

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

Заключение

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

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