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

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

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

Пример токенов в жизни

Представим человека. Это мужчина, рост 178, вес 80, глаза карие и т. д. Его имя — Анатолий. Но в разных ситуациях Анатолий бывает разным:

Толян, Толик, Анатолий Иванович, Пупсик — всё это — имена (названия, прозвища, псевдонимы) одного и того же человека, с тем же ростом, цветом глаз, размеров обуви. Меняется только «название» и «способ использования». То, что Толя будет делать в баре, он не будет делать на работе. Но он остаётся всё тем же Анатолием.

Так же работают и токены. Каждый токен ссылается на какую-то характеристику (переменную). В примере с Толей его характеристики — это возраст, пол, рост и т. д. В переменной характеристиками могут быть: шестнадцатеричный код цвета, число для отступа или название шрифта.

Дизайн-токен — это псевдоним какой-то переменной с характеристикой. В названии токена заложен и смысл использования токена.

Пример токена в дизайне

Теперь рассмотрим токены на техническом примере. Возьмём цвет #677178. Мы его можем назвать как color-grey-600 и использовать в макетах в таком виде. А можем и назвать его так:

Или так:

Таким образом, у нас есть одна обезличенная переменная — color-grey-800, и на неё ссылаются несколько токенов. Если нам нужно будет заменить оттенок для всех этих токенов, мы поменяем hex-код только для color-grey-800, а в привязанных токенах цвет изменится автоматически. Так же, как в примере с именем человека: Анатолий — базовое имя, а от него идут дополнительные прозвища — по этому прозвищу легко понять, как используется этот токен.

При наличии токенов в дизайн-системе легко сменить тему. Например:

Токен один и тот же, но в зависимости от темы, его значение отличается.

Вместо использования жёстких значений, таких как hex-коды для цветов или размеры пикселей, мы даём им имена. Эти имена, или «токены», хранят параметры визуального дизайна в простой и удобной для чтения форме. Они находятся внутри вашей дизайн-системы, делая дизайн единообразным и легко масштабируемым. Эти токены могут быть связаны между собой в темы, что позволяет создать единый дизайн для Web, iOS и Android.

Идея дизайн-токенов зародилась в 2014 году в Salesforce. Токены являются самой маленькой, но самой важной частью любой дизайн-системы. Их можно сравнить с алфавитом, на основе которого строятся слова и пишутся большие книги.

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

Преимущества токенов

С помощью дизайн-токенов вы получаете:

1. Единый понятный язык для дизайнеров и разработчиков.

2. Меньше тех- и дизайн-долга. Меньше тратится ресурсов.

3. Синхронизация: единый источник истины, согласованность на всех платформах.

4. Простота обслуживания: редактируйте в одном месте, обновляйте всё сразу.

5. Согласованность бренда: с оздание новых продуктов, поддержание единообразия и управление брендом становятся доступнее, быстрее и дешевле благодаря прозрачной системе визуальной иерархии.

Стандарты дизайн-токенов

Едиными стандартами (Design Tokens Standard) занимается организация W3C. Пока готова только Черновая версия стандарта и вы можете ознакомиться с ней. Честно говоря, новичку там будет сложно разобраться, поэтому и появилась эта статья! Но единый стандарт в работе!

А вы знали, что на тему дизайн-токенов есть целое сообщество? Если нет, то можете посетить их официальный сайт — Design Tokens Community Group.

Как токены выглядят в работе

В дизайне токены выглядят как стили.

А в коде — как классические переменные. У каждой платформы свой вид, но для веба это может выглядеть так:

Типы токенов

В токен может быть заложена не одна переменная, а сразу несколько. Тогда условно разделим токены на два подтипа.

Простые
Состоят из одного значения. Например, шестнадцатеричного кода (или hsla, rgba) цвета.

$radius-medium: $size-4;
$color-text-warning: $color-orange-700;

Составные
Эти токены состоят из нескольких простых (миксины). Например, миксином делают токен типографики. У текста множество параметров: название шрифта, кегль, высота строки, межбуквенный интервал и другие.  Пример:

@mixin body-small {
    	font-size: $font-body-small-font-size;
        font-family: $font-body-small-font-family;
        font-weight: $font-body-small-font-weight;
        letter-spacing: $font-body-small-letter-spacing;
        line-height: $font-body-small-line-hegiht;
}

Теперь перейдём к основным типам токенов. Я предлагаю вам своё руководство по именованию. Однако вы можете использовать и другую логику, если она будет понятна остальным участникам вашей команды.

Переменные

Также их называют глобальные переменные, примитивы, палитры, референсные токены.
Называются они по-разному, но смысл один — это абстрактные названия без контекста.
Например: $color-blue-700: #0C345A. Контекста в этом токене нет.

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

Также их называют alias, псевдонимы. Такие токены имеют конкретный контекст использования. Например: $color-text-success, который ссылается на $color-green-600.
Вполне конкретный контекст — текст для позитивных, успешных состояний.

Компонентные

Эти токены относятся к конкретному компоненту или группе компонентов. Но бывают ситуации, когда общий набор токенов не подходит под конкретный компонент. Например, когда есть множество разных стилевых и компонентных библиотек и нужно все компоненты перевести на одну стилевую библиотеку. Что-то получается покрыть основными токенами, а что-то нет — это могут быть даже временные компоненты. В таких случаях помогают компонентные токены.

$color-component-badge-bg-info: $color-blue-600
// компонент для фона информационного бейджика

$color-component-control-bg: $color-blue-600
//фон для контролов, какие именно — решает дизайнер

Принципы наименований

Создание наименований требует времени. Обычно команды тратят много сил и энергии на поиск идеальной логики. Вы можете найти вдохновение в других открытых дизайн-системах, но это не значит, что у вас они будут работать так же хорошо. Я рекомендую провести общую встречу и найти оптимальную структуру токенов для вашей компании.

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

✍???? Стиль написания токена
Какой стиль разделения слов использовать в токенах — точки, дефисы, нижние подчёркивания или всё слитно — решаете вы. Как договоритесь с командой. Могу рекомендовать свои предпочтительные стили. Для веба — нижние подчёркивания (color_text_primary). Для мобильных платформ —  lowerCamelCase (ColorToken.textPrimary).

Структура токенов

Некоторые дизайнеры любят такие названия, как black, grey, green, red, но понять, как использовать такие цвета, можно только в том случае, если у вас их совсем небольшой набор. А если в системе, например, 50 подобных названий, то разобраться, как использовать эти цвета, будет очень сложно.

Удобство и смысл дизайн-токенов состоит в том, чтобы привязать смысловые названия к этим обезличенным цветам. Вместо black — color-text-primary, вместо grey-800 — color-icon-primary (вспомните пример с Анатолием, о котором шла речь выше ????).

Я предлагаю вам свою структуру токена, которую проверил в работе. Если она вам не подходит, можно её доработать под себя или создать свою собственную.

Общая полная структура такая:

Префикс — Группа токена — Тип токена — Элемент — Модификатор — Вариант — Состояние

Префикс — уникальный идентификатор пространства, к которому принадлежит токен. Обычно это сокращение названия дизайн-системы, вроде -yt (youtube), -md (material), -dc (domclick). Пригодится, если к проекту подключено несколько библиотек с токенами, чтобы исключить совпадения имён токенов.

Группа токена — атрибут визуального дизайна или основополагающий стиль, например, color, font, spacing, radius и т. д. Полный список категорий.

Тип токена — элемент пользовательского интерфейса, к которому применяется токен, например, text, background, icon, border, component.

Элемент — сам элемент, например, control, slider, divider, snackbar. Иногда пропускается в названии, если это токен не для компонента.

Модификатор — дополнительные сведения о токене. С помощью модификатора можно добавить разновидность элемента, пример будет ниже.

Вариант — primary, secondary, warning, success, critical и т. д.

Состояние — default, hover, active, focus, disabled.

Некоторые части токена могут не применяться, но главное, чтобы он был понятен и согласован с другими токенами.

Рассмотрим несколько примеров.

Как назвать цвета

Я предлагаю вам своё руководство по именованию. Однако вы можете использовать и другую логику, если она будет понятна остальным участникам вашей команды.

Глобальные переменные

Это абстрактные названия без контекста использования. Именование цветов происходит значениями от 1 до 100 (или от 1 до 9). Каждое значение тона от 0 до 100 выражает количество света, присутствующего в цвете. Тон 100 является самым светлым, тон 0 является самым тёмным в диапазоне. Пример:

Стремитесь к простой, минимальной палитре. Это не означает что нужно добавлять все цвета мира.

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

Здесь мы используем комбинацию смысловых названий с определённым назначением. Важно, чтобы из названия токена мы могли легко понять, как использовать этот токен. Если в команду придёт новый дизайнер, он без труда должен разобраться в обилии цветов вашего проекта. Для этого и делайте название таким, чтобы оно было понятно сходу: и дизайнеру, и разработчику, и тестировщику.

Такие токены как правило являются ссылкой на глобальные переменные.

Как назвать размеры

Самый простой способ для технического или нетехнического специалиста — это использование размеров одежды. Все мы слышали о таких понятиях, как small, medium, large. По умолчанию всегда используется medium.

xx-small    x-small    small    medium    large    x-large    xx-large

Можно также использовать числовые шкалы, например, 0-1000, 1-10 и т. д. При использовании чисел, обратите внимание на возможную путаницу. Например, для отступов можно указать spacing-4, но дизайнер может спутать с отступом в 4 пикселей, хотя вы могли заложить в этот токен 16 пикселей. Поэтому мне больше нравится использовать слова для обозначения размерностей (small, medium, large и т. д.).

Как назвать состояния

Кому-то здесь не открою ничего нового, просто напомню, какие могут быть состояния.

• Default/Enabled;

• Hover;

• Active/Focused;

• Selected;

• Visited;

• Disabled.
  

Категории токенов

Это список категорий, который можно токенизировать. Но не спешите браться за всё сразу. Попробуйте с главного — цветов или типографики. А дальше постепенно будете пополнять свою библиотеку.

• Colors;

• Font Family;

• Font Size;

• Line Height;

• Border Color;

• Grid;

• Border Radius;

• Spacing;

• Box Shadow;

• Duration/Transition;

• Shadows;

• Z-Index;

• Size.

Взаимодействие с разработкой

В этом разделе расскажу про пользу для разработчиков: как переносить токены из Figma в код.

???? Инструменты
Если вы хотите передать дизайн-токены разработчику, то их нужно как-то выгрузить из Figma и преобразовать на стороне разработки. Рассмотрим самые популярные и ходовые инструменты для этого дела.

Для дизайнера — Figma Variables (встроены в Figma) или плагин Figma Tokens.
Для экспорта JSON из Figma — плагин variables2css.
Для разработчика — Style Dictionary.

Что такое Style Dictionary и зачем нужен

Style Dictionary переводит JSON-данные в формат, специфичный для конкретной платформы. Он может генерировать различные форматы выходных данных, например, CSS/SASS для веб, XML-версию для Android или JSON-версию для iOS.

Дизайнеру важно знать, что есть такая технология и уметь экспортировать JSON для разработчика — это делается с помощью плагина variables2css. После передачи JSON в дело вступает уже разработчик.

Кроме Style Dictionary есть множество других преобразователей: Theo, Diez, Specify.

Благодарю, что прочитали статью! Надеюсь, было полезно!

???????? Я веду свой блог UX Advocate — блог про дизайн и карьеру, подписывайтесь и следите за новыми статьями!

Это была первая часть, объясняющая общее понятие дизайн-токенов простым языком. Если понравится, напишу вторую часть, более расширенную и углублённую. Дайте знать в комментариях!