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

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

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

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

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

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

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

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

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

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

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

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

Или так:

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

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

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

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

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

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

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

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
//фон для контролов, какие именно — решает дизайнер

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

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

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

✍