Дизайн-токены, которые масштабируются
Что такое design-tokens, почему они спасают команду на 5-м проекте и как мы готовим их в Figma + Tailwind.
Дизайн-токены — это не таблица «цвета и тени». Это контракт между дизайнером и инженером. Когда контракта нет, начинаются ночи спорных hex-кодов.
Уровни токенов
Мы делим токены на три уровня. Primitive — сырые значения (#5159ff, 16px). Semantic — намерение (color.brand, space.lg). Component — точечные правила (button.primary.bg). Без иерархии токены превращаются в мусорку.
Где жить токенам
Источник правды — Figma Variables. Из Figma выгружаем JSON, через style-dictionary трансформируем в CSS custom properties. Tailwind подключает их через config — фронтенд-команда получает t-shirt классы вроде `text-foreground` и не думает о hex-ах.
Тёмная тема и a11y
Тёмная тема — это не «инвертировать значения», а отдельный набор semantic-токенов. Контрастность проверяем сразу в Figma плагином, дополнительно гоняем axe-core в CI. Минимальный AA-контраст — обязательное условие, не «если успеем».
Кто отвечает
Один human owner на токены — обычно ведущий дизайнер. Pull request на изменение токена идёт с обязательным ревью у инженера. Это занимает 10 минут раз в неделю и спасает недели хаоса на масштабе.