Что такое токены дизайна и почему они важны

Токены дизайна — это атомарные решения системы дизайна, выраженные в виде именованных повторно используемых значений. Вместо жестко заданного в таблице стилей #3b82f6 вы определяете color-primary-500: #3b82f6 и используете это имя повсюду. Имя передает смысл, а значение можно изменить, не обновляя каждую ссылку на него.

Токены охватывают все визуальные свойства: токены цветов (color-primary-500: #3b82f6), токены отступов (spacing-4: 16px), типографические токены (font-size-lg: 18px, font-weight-bold: 700), токены радиуса границ (radius-md: 8px), токены теней и токены длительности анимации. Вместе они кодируют полный визуальный язык.

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

Без токенов значения цветов и отступов жёстко задаются в таблицах стилей, файлах компонентов и классах-утилитах. Синий цвет в разных файлах может быть указан как #3b82f6, rgb(59, 130, 246) и blue-500. Чтобы изменить цвет бренда, приходится находить и заменять каждый такой фрагмент, поэтому велика вероятность что-то пропустить.

Дизайн-токены — основа систем с несколькими темами. В тёмном режиме семантические токены, такие как color-background и color-text, указывают на разные примитивные значения в зависимости от активной темы. Вы изменяете одно соответствие, а не каждый компонент. В светлой и тёмной темах используется один и тот же код компонентов, различаются только значения токенов.

Для SaaS-платформы, обслуживающей несколько брендов, токены позволяют настраивать бренд без дублирования кода. Бренд A использует синий как основной цвет, а бренд B — зелёный: различаются только их соответствия семантических токенов. Код компонента кнопки идентичен: он обращается к color-action-primary, который разрешается в свой цвет для каждого бренда.

Токены организованы по уровням. Примитивные токены — это исходные значения: color-blue-500: #3b82f6. Семантические токены выражают смысл: color-action-primary: {color-blue-500}. Компонентные токены наиболее специфичны: button-primary-background: {color-action-primary}. Эта иерархия отделяет «что» от «где это используется».

Семантические токены — ключ к поддержке нескольких тем. В светлой теме используется color-background: {color-white}. В тёмной теме — color-background: {color-gray-900}. Компоненты обращаются к color-background, а не к конкретному цвету. При смене темы меняются соответствия семантических токенов, а компоненты остаются без изменений.

Переменные Figma, представленные в 2023 году, — это дизайн-токены внутри Figma. Дизайнеры определяют в Figma ту же иерархию токенов, которую разработчики реализуют в коде. Такие инструменты, как Tokens Studio for Figma и официальный плагин Figma Tokens, экспортируют переменные Figma в JSON, после чего Style Dictionary преобразует их в переменные CSS или объекты JS.

Рабочая группа W3C Design Tokens Community Group разрабатывает стандартный формат JSON для дизайн-токенов. Цель — обеспечить совместимость: чтобы один файл токенов работал с любым инструментом дизайна (Figma, Sketch) и любым инструментом сборки (Style Dictionary, Theo, Panda CSS). Использование формата спецификации обеспечит устойчивость вашей системы токенов к будущим изменениям.

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

Что обозначают семантические токены в иерархии уровней токенов?

Дизайн-токены — это именованные атомарные значения (цвета, отступы, типографика), образующие словарь дизайн-системы. Они создают единый источник истины для дизайна и кода. Трёхуровневая иерархия — примитивные токены (исходные значения), семантические (смысл) и компонентные (конкретное использование) — обеспечивает поддержку нескольких тем и брендов. Переменные Figma и спецификация дизайн-токенов W3C способствуют синхронизации дизайна и разработки. Управление токенами помогает системе оставаться согласованной со временем.