Дизайн-токены

Что это такое

Дизайн-токен — именованное значение, общее для дизайн-инструментов и кода. Именем может быть цвет, шаг отступов, размер шрифта, радиус скругления или длительность. Вместо того чтобы писать #1F6FEB, и дизайн, и код говорят colour.action.default, а значение за именем определяется один раз.

Почему это важно

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

Ключевые идеи

Именуйте по роли, а не по значению

colour.action.default переживает ребрендинг; blue600 — нет, а colour.blue становится ложью в момент смены бренда. Называйте, для чего значение, и держите сырую шкалу отдельно под ним.

Примитив (сырое)         Семантика (роль)
colour.blue.600          colour.action.default
colour.grey.100          colour.surface.raised
space.4 = 16px           space.gap.control

Потребители пользуются только семантическим слоем; примитивный слой существует, чтобы семантике было на что указывать.

Два слоя, одно направление ссылки

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

colour.surface.raised  ->  colour.grey.100   (светлая тема)
colour.surface.raised  ->  colour.grey.900   (тёмная тема)

Держите набор достаточно малым, чтобы запомнить

Несколько десятков токенов покрывают большинство продуктов. Набор из трёхсот превращается в выбор цвета с лишними шагами, и никто к нему не тянется.

Включайте невидимые значения

Отступы, радиус, толщину границы, тень, длительность и кривую анимации, слои z-index. Здесь расхождение труднее всего заметить и дороже всего исправить, и именно эти значения дизайнер реже всего держит согласованными вручную.

Выпускайте их как деталь реализации

Токены должны доходить до кодовой базы, а не оставаться в дизайн-инструменте. Кастомные свойства CSS — обычный путь к этому; запись о каскадных таблицах стилей описывает механизм. Однако набор токенов, который живёт только в дизайн-файле, ничего не меняет в продукте.

Практика

Напишите небольшой набор токенов

Определите примитивы для одной цветовой шкалы, четырёх шагов отступов, трёх размеров шрифта и двух радиусов, затем напишите семантический слой, который на них указывает.

Готово, когда: каждый семантический токен разрешается в примитив, и ни один компонент не называет цвет напрямую.

Оформите один экран только токенами

Переведите один экран в тёмную тему, меняя только семантический слой и не трогая ни один компонент.

Готово, когда: экран читается в новой теме, и ни один компонент не правился.

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

Токены, названные по значению — имя становится неверным при первом ребрендинге; исправить: именуйте по роли и держите сырую шкалу под ней.
Компоненты ссылаются прямо на примитивы — слой тем обходится стороной, и тёмная тема ломается; исправить: потребители используют только семантические токены.
Сотни токенов — набор непригоден, и каждый потребитель выбирает по-своему; исправить: держите его достаточно малым, чтобы помнить.
Пропуск отступов и анимации — невидимое расхождение продолжается; исправить: токенизируйте также отступы, радиус, длительность и слои.
Токены, не доходящие до кода — продукт не меняется; исправить: публикуйте их как слой значений, который код действительно читает.

Что читать дальше

Дизайн-системы (03-design-ux/32-design-systems) — прочитайте это первым; токены — слой, на котором стоит система.
API компонента и документация (03-design-ux/32-design-systems/02-component-api-and-documentation) — компоненты потребляют токены, а не значения.
Каскадные таблицы стилей (CSS) (02-frontend/05-css) — кастомные свойства, обычный путь токенов в браузер.
Теория цвета (03-design-ux/29-color-theory) — выбор шкал, из которых строятся цветовые токены.