Дизайн-токен: единица хранения визуального решения

Дизайн-токен: единица хранения визуального решения

Дизайн-токен (design token) — это именованная единица, в которой зафиксировано атомарное визуальное свойство: значение цвета, отступа, радиуса скругления, толщины обводки, кернинга. Токен отделяет смысл (семантику) от конкретного числового или цветового значения. Например, токен `color-background-primary` указывает на фоновый цвет первого уровня, а его фактическое hex-значение `#F5F5F5` может меняться при смене темы или платформы.

Чем отличается от стиля в Figma или переменной в CSS? Стиль в редакторе — это набор свойств, привязанных к одному слою. Переменная в коде — технический носитель. Дизайн-токен — это мета-уровень: он фиксирует логику именования (семантическое имя, а не «синий_1») и может быть экспортирован в любую среду — от Figma до iOS/Android-файлов. Токен — мост между дизайном и разработкой.

Типичные ошибки применения:
— называют токенами любые переменные, игнорируя их иерархию (например, не разделяют глобальные/алиас/специфичные токены);
— используют только цвета, забывая про отступы, тени, градиенты, анимации;
— дают токенам имена по визуальному эффекту («темно-синий-для-кнопок») вместо функционального («color-action-primary»);
— хранят токены только в Figma, не синхронизируя с кодом через JSON или YAML.

Пример корректного применения: в дизайн-системе Aviasales все отступы заданы через токены `spacing-xs` (4px), `spacing-sm` (8px), `spacing-md` (16px). При редизайне на новой платформе достаточно изменить значение токена в одном месте, и все компоненты обновятся автоматически — не нужно править каждый макет. Это снижает время на рефакторинг и исключает расхождения между дизайном и интерфейсом.

— @DesignSystemsBrandPro