Дизайн-токены: единый язык дизайна и кода

Дизайн-токен — это именованное решение: не «#2563EB», а «color.brand.primary». Имя живёт и в макете, и в коде, поэтому дизайн и фронтенд говорят на одном языке.

«Токены — это семантический хребет кросс-платформенной автоматизации». — из практики дизайн-систем 2025

В октябре 2025 года консорциум W3C выпустил первую стабильную версию спецификации Design Tokens — вендоронезависимый JSON-формат, который переносит дизайн-решения между Figma, кодом и другими инструментами без самописных конвертеров. Это закрепило подход, к которому индустрия шла годами.

Три уровня токенов

Токены организуют слоями — от сырых значений к смыслу:

Смысл слоёв: компонент ссылается на семантику, семантика — на примитив. Чтобы перекрасить все кнопки, вы меняете одну ссылку, а не охотитесь за hex-кодами по всему проекту.

В CSS токены — это переменные. Тёмная тема становится почти бесплатной: меняем только семантический слой.

/* Primitive */
:root {
  --blue-600: #2563EB;
  --gray-900: #111827;
  --white:    #FFFFFF;
}

/* Semantic — смысл, а не цвет */
:root {
  --color-action:  var(--blue-600);
  --color-text:    var(--gray-900);
  --color-surface: var(--white);
}

/* Тёмная тема: переопределяем только семантику */
[data-theme="dark"] {
  --color-text:    var(--white);
  --color-surface: var(--gray-900);
}

  СВЯЗЬ ТОКЕНОВ
  ------------
  Figma variable          CSS variable
  color.action      ==>   --color-action
       |                       |
       v                       v
  (одно имя в дизайне и в коде = синхрон)

Разбор глубже: токены как уровень абстракции

Дизайн-токены — это, по сути, перенос идеи «переменных» из программирования в дизайн. В коде никто не пишет число 86400 в десяти местах — заводят константу SECONDS_PER_DAY, и при необходимости меняют её в одном месте. Токены делают то же самое для визуальных решений. Хардкод значения (#2563EB) разбросанный по сотне экранов — это технический долг дизайна: чтобы перекрасить бренд, придётся найти и заменить каждое вхождение, рискуя что-то пропустить.

Сила трёхуровневой модели в том, что она разделяет что и зачем. Примитив отвечает на вопрос «какое значение» (blue-600 — это конкретный синий). Семантика отвечает на вопрос «для чего» (color-action — цвет действий, кнопок, ссылок). Это разделение даёт гибкость: если завтра бренд решит, что цветом действия станет фиолетовый, вы меняете одну семантическую ссылку — и все кнопки, ссылки и акценты перекрашиваются разом, не трогая ни один компонент. А примитив blue-600 при этом остаётся в палитре для других нужд.

Стабилизация спецификации Design Tokens до версии 1.0 в конце 2025 года — это не формальность, а признак зрелости индустрии. Теперь токены — это переносимый стандартный JSON, который читают и Figma, и инструменты сборки, и фронтенд-фреймворки. Дизайнер меняет значение в одном источнике правды, и оно автоматически доезжает до кода без ручного копирования. Именно это превращает «дизайн-систему» из красивой презентации в живой механизм, где дизайн и код не расходятся со временем, а остаются синхронными по построению.

Полезно увидеть и организационную ценность токенов. В большой команде или продукте с десятками экранов токены становятся единым источником правды, к которому апеллируют все: дизайнеры, разработчики, тестировщики. Спор «какой именно это серый?» исчезает — есть имя токена, и оно одно. Ребрендинг, который без токенов превращается в многонедельную охоту за хардкодом по всему коду, с токенами выполняется правкой нескольких значений в одном месте. Темизация под разные бренды или продукты на одной кодовой базе становится вопросом подмены набора семантических токенов. Именно поэтому крупные компании вкладываются в токены как в инфраструктуру: это не косметика, а механизм, который держит визуальную консистентность по мере роста продукта.

Как делают ПЛОХО

В макете цвета заданы hex-кодами, в коде — тоже hex-кодами, и они расходятся. Чтобы сделать тёмную тему, переписывают пол-проекта. Дизайнер говорит «синий №3», разработчик ищет, какой именно из семи синих.

Как делают ХОРОШО

Цвета, отступы и шрифты — токены с осмысленными именами. Имя в Figma совпадает с именем CSS-переменной. Тёмная тема и ребрендинг — это правка семантического слоя, а не всего кода.

Чек-лист

• Цвета и размеры названы по смыслу, а не по значению.
• Три слоя: primitive → semantic → component.
• Имена токенов в дизайне = имена переменных в коде.
• Тёмная тема переопределяет только семантику.
• Нет «магических» hex-кодов прямо в компонентах.

Итог. Токены превращают визуальные решения в общий словарь. Семантические имена дают темизацию, ребрендинг и синхрон дизайна с кодом почти даром.