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

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

Дата актуальности: 22 июля 2026 года. Названия и расположение отдельных элементов интерфейса Figma могут меняться, но логика работы с поддерживаемыми вариативными шрифтами остаётся одинаковой.

Вариативный, или variable, шрифт — это файл, в котором можно хранить диапазоны нескольких начертаний. Вместо отдельных файлов для Light, Regular, Medium и Bold дизайнер получает один шрифт с управляемыми параметрами. В зависимости от семейства можно менять толщину, ширину, наклон, оптический размер и другие авторские характеристики.

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

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

Для настройки variable font нужен сам вариативный файл шрифта и доступ к нему в рабочем окружении. Если шрифт установлен локально, Figma должна видеть его через приложение для работы с локальными шрифтами. В командном проекте заранее уточните лицензию: возможность использовать файл в макете не всегда означает право передавать его клиенту или встраивать в готовый продукт.

Откройте Figma и создайте текстовый слой. В панели Typography выберите семейство вариативного шрифта. Если оно не находится, проверьте установку файла, перезапустите приложение для локальных шрифтов и обновите проект. Не заменяйте отсутствующую гарнитуру похожей без фиксации решения: даже близкие по стилю шрифты могут заметно отличаться по ширине строки и высоте строчных букв.

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

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

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

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

После настройки создайте или обновите Text Style. Название должно описывать назначение, а не только значение оси: например, «Заголовок / Desktop» или «Текст кнопки / Compact». Если команда использует библиотеку компонентов, зафиксируйте в описании шрифт, кегль, межстрочное расстояние и допустимые значения осей. Так дизайнеры не будут подбирать параметры заново в каждом экране.

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

Представьте карточку товара с заголовком в одну строку. Вместо уменьшения кегля попробуйте немного сжать ширину знаков через wdth, сохранив читаемый размер. Затем проверьте самый длинный вариант названия. Если текст всё равно не помещается, лучше разрешить перенос или сократить контент, чем доводить ширину до значения, при котором буквы начинают выглядеть неестественно.

Для лендинга можно использовать одну гарнитуру с несколькими значениями wght и opsz. Крупный главный заголовок получает оптическую настройку для display-размера, подзаголовок — более спокойный вес, а основной текст — значение, рассчитанное на чтение. Такая система создаёт контраст не только за счёт размера, но и за счёт деталей рисунка.

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

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

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

Перед handoff полезно пройти короткий чеклист. Он помогает отделить осознанную настройку variable font от случайных изменений, которые могут исчезнуть при экспорте или потребовать дополнительного объяснения в спецификации.

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

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

Набор начертаний содержит отдельные варианты, например Regular и Bold, а вариативный шрифт задаёт непрерывный диапазон между доступными крайними значениями. Это позволяет точнее настроить визуальный вес или ширину. Однако непрерывный диапазон не означает, что любое промежуточное значение будет уместно для интерфейса.

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

Отдельный стиль нужен не для каждого возможного значения, а для устойчивых ролей интерфейса. Если заголовки проекта используют три проверенных уровня плотности, создайте три понятных пресета. Единичное значение можно оставить локальным только тогда, когда оно действительно связано с конкретной композицией и не повторяется в системе.

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

Вариативные шрифты делают типографику в Figma гибче: дизайнер управляет весом, шириной, наклоном и оптическими настройками без хаотичного набора файлов. Работайте через текстовые стили, проверяйте реальные строки и фиксируйте решения для команды. Если вы создаёте собственную гарнитуру, попробуйте подготовить шрифт для проекта на fontgenerator.ru и протестировать его в макете Figma.