Дизайн-токены: это именованные переменные, в которых хранятся базовые решения вашей дизайн-системы. Вместо того чтобы разбрасывать по файлам и кодовой базе сырые hex-значения, вы используете осмысленные имена вроде color/action/primary. И дизайнеры, и разработчики ссылаются на одно и то же имя. Обновить его достаточно в одном месте.
Это не просто соглашение об именовании: это общий язык между дизайном и разработкой, который живёт одновременно в Figma и в коде.
Зачем использовать токены
Единый источник правды
Измените одно значение, и обновление мгновенно распространяется на все компоненты
Кросс-платформенность
Единая визуальная согласованность на вебе, iOS, Android и новых платформах
Чистый хендофф
Разработчики видят семантические имена, а не сырые значения. Никакой путаницы
Быстрые глобальные изменения
Ребрендинг и смена темы: минуты вместо недель
Иерархия дизайн-токенов
Хорошо организованная система токенов строится в три уровня. Каждый следующий уровень добавляет смысл, ссылаясь на уровень ниже, а не хардкодя значения заново.
Иерархия токенов: примитивные значения, семантические роли, компонентные токены
Примитивные токены
Сырые базовые значения: цвета, отступы, размеры шрифта. Без указания, где они применяются. Пример: blue-500, space-4
Семантические токены
Ссылаются на примитивы и описывают роль значения. Пример: color-action-primary → blue-500
Компонентные токены
Привязаны к конкретным UI-элементам: фон кнопки, скругление карточки, паддинг инпута
«Если изменить примитив, нужно вручную найти все компоненты, которые его используют. Если изменить один семантический токен, всё обновится само.»
Как внедрить токены в Figma: 4 шага
Создайте примитивные переменные
Откройте панель Variables и создайте коллекцию с полной палитрой цветов, шкалой отступов и типографики. Используйте нейтральные числовые имена: blue-100, space-4, font-size-16.
Свяжите семантические токены с примитивами
Создайте новую коллекцию для семантических токенов. В окне Edit Variable привяжите каждый токен к примитиву. Называйте по роли: text-secondary вместо gray-text.
Создайте темы с помощью режимов переменных
Режимы (modes): несколько столбцов для одних и тех же токенов. Один набор покрывает светлую и тёмную тему, мультибрендовость или адаптацию под платформу, без дублирования компонентов.
Синхронизируйте с кодом через Dev Mode
Разработчик инспектирует слой и видит имена токенов, отформатированные для продакшна. color/action/primary становится --color-action-primary в CSS.
Шаг 1: Коллекция примитивных переменных в Figma. Полная цветовая палитра и шкала отступов
Шаг 2: Окно Edit Variable. Семантический токен ссылается на примитив из коллекции
Шаг 3: Режимы переменных. Одна коллекция токенов для светлой и тёмной темы
Как называть токены
Структура имени: категория / роль / вариант. Правило простое: называйте токен по тому, что он делает, а не по тому, как он выглядит. Выберите структуру один раз и применяйте её везде.
color/action/primary → #5B5BD6
# Цвет → Текст → Отключённый
color/text/disabled → #9CA3AF
# Отступ → Компонент → Средний
spacing/component/md → 16px
Избегайте имён вроде blue-button или gray-text: они описывают внешний вид и «ломаются» при смене темы или ребрендинге. Имя color-action-primary остаётся верным независимо от того, какой цвет стоит за ним.
Переменные против стилей: что выбрать
Переменные Figma: это реализация концепции дизайн-токенов внутри самой Figma. Они мощнее традиционных стилей в большинстве сценариев, особенно там, где нужны темы и синхронизация с кодом.
- Переменные (Variables): лучший выбор для цветов, отступов, скруглений, типографики. Поддерживают режимы (темы), напрямую отдаются в Dev Mode как токены
- Стили (Styles): по-прежнему удобны для градиентов, сложных теней и комплексных текстовых стилей, где переменные ещё ограничены
Где хранятся токены
Вне Figma токены обычно хранятся в формате JSON, машиночитаемом стандарте, который поддерживается большинством инструментов. Над стандартизацией формата работает W3C Design Tokens Community Group.
Для сложных мультифайловых систем существует плагин Token Studio, расширяющий возможности встроенных переменных Figma.
Часто задаваемые вопросы
В чём разница между переменными Figma и дизайн-токенами?
Дизайн-токены: это концепция (именованные значения, общие для дизайна и кода). Переменные Figma: конкретная реализация этой концепции внутри Figma. Когда вы создаёте переменные в Figma и синхронизируете их с кодом через Dev Mode, вы и работаете с токенами.
Заменяют ли токены привычные стили?
В большинстве случаев да, особенно для цвета и отступов. Стили остаются актуальными для градиентов и сложных составных стилей, которые переменные пока не покрывают.
Как начать, если дизайн-система уже большая?
Проведите аудит существующих стилей в FigJam, выделите повторяющиеся значения и переведите их в переменные постепенно, начиная с цветовой палитры. Не нужно переделывать всё сразу.
Нужны ли плагины?
Встроенных инструментов Figma достаточно для большинства команд. Token Studio пригодится, если нужна глубокая интеграция с JSON-файлами, версионирование токенов или работа с несколькими файлами одновременно.