Что такое дизайн-токены

Что такое дизайн-токен простыми словами

Дизайн-токен — это решение дизайна, записанное под именем: «Кнопка/Фон» вместо #1E5EFF, «Отступ/M» вместо 16. Дизайнер привязывает к слоям имя, разработчик пишет в коде то же имя. Когда бренд-цвет меняется, правят одно значение, а не сотню слоёв и строк CSS.

Токены — нижний слой дизайн-системы: на них стоят компоненты. В Morfa токенами становятся переменные из окна «Переменные» и стили — цвета, текста и эффектов. Как создавать переменные и привязывать их к слоям, описано на странице переменные и режимы.

Какие бывают дизайн-токены

Токены делят по тому, что они описывают: цвет, размер, типографика, тени, иногда строки и флаги. В Morfa каждому виду соответствует тип переменной или вид стиля, и у каждого своя форма в коде.

Числа получают px. Исключение — числа, привязанные к насыщенности шрифта или прозрачности: они пишутся без единиц. Стиль текста становится одним токеном со всеми параметрами шрифта для свойства font, а межбуквенный интервал, если он задан, — отдельным токеном с окончанием -tracking.

Как имя переменной становится именем токена

Переменные можно называть по-русски. Генератор переводит знакомые слова на английский, остальные пишет латиницей, а косую черту и пробелы заменяет дефисами. Цветам он добавляет приставку color-, стилям текста — font-, теням — shadow-.

Так «Фон/Страница» становится --color-background-page, «Текст/Основной» — --color-text-primary, а «Валюта» — --valyuta. В tokens.ts то же имя пишется слитно: colorBackgroundPage. Исходное русское название остаётся комментарием рядом со строкой, так что разработчик всегда видит, откуда токен.

Алиасы: базовые и смысловые токены

Алиас — токен, который ссылается на другой токен. Так разделяют два уровня. Базовая палитра называет цвета («Синий/600», «Серый/100»), смысловые токены говорят, для чего цвет нужен («Кнопка/Фон», «Текст/Ошибка»).

В Morfa ссылку ставят командой «Сослаться на переменную». В коде алиас остаётся ссылкой, а не копией значения: --color-button-background: var(--color-blue-600);. Поменяли «Синий/600» — поменялась и кнопка.

Слоям назначайте смысловые токены, а базовую палитру держите отдельной коллекцией. Тогда новый бренд-цвет — это правка одной переменной.

Режимы: светлая и тёмная тема в токенах

Режим — это набор значений одной коллекции. В коллекции «Тема» режим «Светлая» даёт светлый фон и тёмный текст, режим «Тёмная» — наоборот. Имена токенов при этом не меняются, меняются только значения.

В коде значения основного режима записываются в :root, а каждый другой режим — в блок с атрибутом. Первая коллекция с режимами получает атрибут data-theme, следующая — свой, по имени коллекции: например, «Плотность» станет data-density. В блок режима попадает только то, что в нём отличается. Если фрейм в макете выбрал режим («Режим переменных»), в коде у него будет тот же атрибут. Пошагово — в гайде как сделать тёмную тему.

:root {
  --color-blue-600: #1E5EFF; /* Синий/600 */
  --color-blue-400: #6B93FF; /* Синий/400 */
  --color-background-page: #FFFFFF; /* Фон/Страница */
  --color-text-primary: #1A1A1A; /* Текст/Основной */
  --color-button-background: var(--color-blue-600); /* Кнопка/Фон */
  --spacing-m: 16px; /* Отступ/M */
}

[data-theme='dark'] {
  --color-background-page: #111111;
  --color-text-primary: #F2F2F2;
  --color-button-background: var(--color-blue-400);
}

Где взять tokens.css и tokens.ts

Переписывать токены вручную не нужно. Есть два пути: посмотреть их во вкладке «Код» или выгрузить вместе с проектом. Как устроен остальной код, описано в разделе дизайн в код.

1. 1

   Только токены

   Включите режим «Код» (⇧D) и в разделе «Код» выберите язык «Токены». Откроются три вкладки: src/tokens.css, src/theme.css для Tailwind и src/tokens.ts. Их можно скопировать или скачать.

2. 2

   Весь проект

   В меню «Файл» выберите «Экспорт в React…». В ZIP с проектом на Vite, React 19 и TypeScript лежат src/tokens.css и src/tokens.ts, а при оформлении через Tailwind CSS 4 — ещё src/theme.css.

Компоненты в проекте ссылаются на токены: если заливка слоя привязана к «Кнопка/Фон», в CSS будет var(--color-button-background), а не число. В tokens.ts лежат имена токенов, их значения в основном режиме, флаги из логических переменных и список режимов.

export const tokens = {
  /** Фон/Страница */
  colorBackgroundPage: 'var(--color-background-page)',
  /** Кнопка/Фон */
  colorButtonBackground: 'var(--color-button-background)',
} as const;

export type TokenName = keyof typeof tokens;

/** Режимы коллекции «Тема»: атрибут data-theme. */
export const themeModes = ['light', 'dark'] as const;

Токены выгружаются как CSS и TypeScript. Отдельного файла JSON для других платформ нет, как нет и кода для iOS, Android и Vue.

Частые ошибки

Почти все проблемы с токенами начинаются с одного: значение введено числом там, где должна стоять переменная.

• Цвета введены HEX-кодом в каждом слое. Смена режима их не трогает. Если цвет точно совпал с токеном, код подставит токен сам (настройка «Подставлять токены»), но при малейшем расхождении останется число.
• Одна плоская коллекция без алиасов. Правка цвета превращается в поиск по всем экранам.
• Смысловые имена в базовой палитре: синий цвет назвали «Кнопка». Когда кнопка станет зелёной, имя начнёт обманывать.
• Расчёт на перенос переменных из Figma. Они не переходят: слои получают текущие значения, коллекцию придётся собрать заново, см. перенос из Figma.