Дизайн-токены
Без токенов дизайн-система быстро рассыпается: один дизайнер взял цвет «такой» из палитры, другой — «такой же, но чуть синее», третий вообще ввёл свой. С токенами это структурно нельзя.
Какие бывают
- Цветовые — основные цвета, состояния, тёмная тема.
- Размеры — отступы, радиусы, высоты компонентов.
- Шрифтовые — размеры, межстрочные интервалы, веса.
- Тени и границы — фиксированные значения для всей системы.
- Анимации — длительности и кривые ускорения.
Уровни
- Базовые токены — конкретные значения (например, blue/500 = #1A73E8).
- Семантические токены — описание роли (color/text/primary = blue/900).
- Тематические токены — наборы под разные темы (светлая, тёмная, бренды).
Когда применять и когда нет
Применять
- В любой дизайн-системе среднего размера
- При поддержке тёмной темы и нескольких брендов
- Когда планируете несколько платформ с общим стилем
Не применять
- На очень маленьком проекте — там хватит обычных CSS-переменных без отдельной системы токенов
Примеры применения
До токенов команда переходила на тёмную тему два месяца: каждый разработчик руками искал по коду все случаи белого фона и заменял. После внедрения семантических токенов вроде color/background/surface запуск тёмной темы свёлся к смене значений в одном месте — за пару дней.
Часто задаваемые вопросы
В каком-то виде токены существовали давно — обычные CSS-переменные, SCSS-переменные. Что нового: открытый формат W3C Design Tokens, который позволяет одинаково описывать их и в Figma, и в коде, и в инструментах синхронизации. Это уже почти стандарт в крупных компаниях.
Семантические описывают роль, а не значение: color/text/primary, а не blue/900. Когда меняется тема или брендинг, поменять «значение под именем» проще, чем переписать по всему коду все случаи использования конкретного цвета.