Гайдлайн для дизайн-системы: как ввести уровни токенов и перестать плодить «одинаковые, но разные» компоненты

Гайдлайн для дизайн-системы: как ввести уровни токенов и перестать плодить «одинаковые, но разные» компоненты

— Раздели все токены на три уровня: **базовые** (палитра, оттенки, шаги сетки, шкала отступов), **семантические** (color.text.primary, color.surface.elevated, space.gutter) и **компонентные** (button.paddingX, card.radius). Базовые меняются раз в год, семантические — при редизайне, компонентные — точечно.

— Проведи аудит: возьми последние 30 макетов из Figma, выгрузи используемые цвета и отступы через плагин Design Tokens или вручную. Цель — увидеть, сколько уникальных значений реально в ходу. Обычно это 2–3 тысячи вместо заявленных 150.

— Сформулируй правило именования по формуле: `категория.роль.состояние.вариант`. Например, `color.text.link.hover` или `space.stack.lg`. Без ролей семантика рассыпается на первой же итерации.

— Введи **принцип единственного источника истины**: переменные в Figma должны быть привязаны к токенам через Tokens Studio, а токены — генерироваться в код (CSS-переменные, Swift/Kotlin токены) автоматически. Никаких «локальных» палитр внутри отдельного макета.

— Сделай deprecation-процесс явным: старый токен не удаляется, а помечается как deprecated, живёт два спринта, потом выпиливается скриптом. Иначе система за год обрастает мёртвым весом, и через три редизайна никто не понимает, что используется.

— Договорись с фронтендом о точке обмена: один репозиторий с токенами, версионирование через SemVer, релиз через PR. Дизайнер правит в Figma — разработчик получает пакет. Без этой договорённости дизайн-система превращается в витрину, которую никто не подключает.

Что сделать на этой неделе: выгрузить аудит, выбрать три категории (палитра, отступы, типографика), описать их по трёхуровневой схеме и согласовать с ведущим фронтендером формат репозитория. Не пытаться покрыть всё сразу.

— @DesignSystemsBrandPro