Как и зачем использовать Design Tokens в UI-разработке?
В этой статье мы разберем, что такое Design Tokens, зачем они нужны в современной UI-разработке, как их использовать и интегрировать в проекты с реальными примерами.
Что такое Design Tokens
Design Tokens — это структурированные переменные, описывающие дизайн-систему на уровне кода. Они представляют собой абстракции, которые заменяют «магические значения» в стилях: цвета, отступы, шрифты, размеры и другие повторяющиеся параметры.
Каждый токен — это единица информации, которая может быть использована как в дизайне, так и в коде, обеспечивая согласованность между всеми интерфейсами. Они могут храниться в формате JSON, YAML или SCSS-переменных, и использоваться в различных платформах: веб, мобильные приложения, дизайн-инструменты (например, Figma).
Зачем нужны Design Tokens
1. Централизованное управление стилями
Изменив один токен (например, основной цвет), вы можете обновить внешний вид всего приложения без необходимости править десятки файлов вручную. Это особенно важно при поддержке дизайн-систем.
2. Единый источник истины
Токены используются как на стороне дизайнеров (в Figma), так и разработчиков (в CSS, JS, Swift и т.д.), что устраняет расхождения между макетом и реальной версткой.
3. Поддержка тем и брендов
С помощью токенов можно легко управлять несколькими темами (например, светлой и тёмной), меняя лишь набор значений, не переписывая логику компонентов.
Структура и форматы токенов
Обычно токены хранятся в формате JSON, и имеют следующую структуру:
{ «color»: { «primary»: { «value»: «#3366FF», «type»: «color» }, «background»: { «value»: «#FFFFFF», «type»: «color» } }, «spacing»: { «small»: { «value»: «8px», «type»: «spacing» }, «medium»: { «value»: «16px», «type»: «spacing» } } }
Можно использовать и YAML, SCSS или JavaScript-переменные, в зависимости от подхода в команде и поддерживаемых технологий.
Как использовать Design Tokens в реальном проекте
Интеграция через CSS-переменные
Один из самых популярных способов — генерация CSS-переменных из JSON-файла токенов:
:root { —color-primary: #3366FF; —spacing-small: 8px; —spacing-medium: 16px; }
Теперь эти переменные можно использовать во всех стилях проекта:
.button { background-color: var(—color-primary); padding: var(—spacing-small) var(—spacing-medium); }
Работа с библиотеками: Style Dictionary
Одна из самых мощных библиотек для работы с токенами — Style Dictionary от Amazon. Она позволяет создавать токены в одном формате и экспортировать их во множество других (CSS, SCSS, Android XML, iOS tokens и т.д.).
Пример установки:
npm install style-dictionary
После настройки конфигурации, вы можете генерировать токены с помощью команды:
npx style-dictionary build
В результате вы получите стили, переменные или другие нужные форматы на базе ваших токенов.
Design Tokens и Figma
В Figma уже доступны встроенные токены (Variables), а также расширения вроде Tokens Studio, которые позволяют синхронизировать значения между Figma и кодом. Это упрощает процесс: дизайнер задаёт цвет или отступ, и вы сразу используете тот же токен в коде — без пересчётов и согласований.
Темизация с помощью токенов
Вы можете легко реализовать поддержку нескольких тем (например, светлая/тёмная) путём замены значений токенов, не переписывая компоненты.
Пример:
:root { —bg-color: #FFFFFF; —text-color: #000000; } [data-theme=»dark»] { —bg-color: #000000; —text-color: #FFFFFF; }
В компонентах вы просто используете переменные:
body { background-color: var(—bg-color); color: var(—text-color); }
Темы можно переключать с помощью JavaScript, изменяя атрибут data-theme у html или body.
Лучшие практики
- Не смешивайте абстракции: вместо —button-blue используйте —color-primary.Храните токены отдельно от компонентной логики.Используйте автоматическую генерацию: Style Dictionary, Tokens Studio и аналоги.Документируйте значения и структуру токенов для всей команды.
