Я постарался придумать самое простое объяснение дизайн-токенов на примере житейских ситуаций. Что это такое, как работают и зачем они нужны — в этой статье.
Дизайн-токены — это набор установленных правил и параметров, которые мы используем, чтобы сделать наш дизайн визуально согласованным. Токены позволяют нам создавать гибкий дизайн.
Эти параметры могут включать в себя выбор определённых цветов, шрифтов, размеров элементов, теней, настроек анимаций, отступов, закруглений и других визуальных элементов. Роль дизайн-токенов весьма важна, поскольку они упрощают создание дизайна и поддержание его качества.
Пример токенов в жизни
Представим человека. Это мужчина, рост 178, вес 80, глаза карие и т. д. Его имя — Анатолий. Но в разных ситуациях Анатолий бывает разным:
Толян, Толик, Анатолий Иванович, Пупсик — всё это — имена (названия, прозвища, псевдонимы) одного и того же человека, с тем же ростом, цветом глаз, размеров обуви. Меняется только «название» и «способ использования». То, что Толя будет делать в баре, он не будет делать на работе. Но он остаётся всё тем же Анатолием.
Так же работают и токены. Каждый токен ссылается на какую-то характеристику (переменную). В примере с Толей его характеристики — это возраст, пол, рост и т. д. В переменной характеристиками могут быть: шестнадцатеричный код цвета, число для отступа или название шрифта.
Дизайн-токен — это псевдоним какой-то переменной с характеристикой. В названии токена заложен и смысл использования токена.
Пример токена в дизайне
Теперь рассмотрим токены на техническом примере. Возьмём цвет #677178. Мы его можем назвать как color-grey-600 и использовать в макетах в таком виде. А можем и назвать его так:
Или так:
Таким образом, у нас есть одна обезличенная переменная — color-grey-800, и на неё ссылаются несколько токенов. Если нам нужно будет заменить оттенок для всех этих токенов, мы поменяем hex-код только для color-grey-800, а в привязанных токенах цвет изменится автоматически. Так же, как в примере с именем человека: Анатолий — базовое имя, а от него идут дополнительные прозвища — по этому прозвищу легко понять, как используется этот токен.
При наличии токенов в дизайн-системе легко сменить тему. Например:
Токен один и тот же, но в зависимости от темы, его значение отличается.
Вместо использования жёстких значений, таких как hex-коды для цветов или размеры пикселей, мы даём им имена. Эти имена, или «токены», хранят параметры визуального дизайна в простой и удобной для чтения форме. Они находятся внутри вашей дизайн-системы, делая дизайн единообразным и легко масштабируемым. Эти токены могут быть связаны между собой в темы, что позволяет создать единый дизайн для Web, iOS и Android.
Идея дизайн-токенов зародилась в 2014 году в Salesforce. Токены являются самой маленькой, но самой важной частью любой дизайн-системы. Их можно сравнить с алфавитом, на основе которого строятся слова и пишутся большие книги.
Короче говоря, дизайн-токены — это основа и стили вашей дизайн-системы. Благодаря их «говорящим названиям» ими удобнее и понятнее пользоваться, они ускоряют работу всей команды и снижают количество ошибок.
Преимущества токенов
С помощью дизайн-токенов вы получаете:
Единый понятный язык для дизайнеров и разработчиков.
Меньше тех- и дизайн-долга. Меньше тратится ресурсов.
Синхронизация: единый источник истины, согласованность на всех платформах.
Простота обслуживания: редактируйте в одном месте, обновляйте всё сразу.
Согласованность бренда: с оздание новых продуктов, поддержание единообразия и управление брендом становятся доступнее, быстрее и дешевле благодаря прозрачной системе визуальной иерархии.
Стандарты дизайн-токенов
Едиными стандартами (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.
Некоторые части токена могут не применяться, но главное, чтобы он был понятен и согласован с другими токенами.
Рассмотрим несколько примеров.
2 уровня | [Группа ]-[Тип] |
3 уровня | [Группа]-[Тип]-[Элемент] [Группа]-[Тип]-[Вариант] |
4 уровня | [Группа]-[Тип]-[Элемент]-[Вариант] |
5 уровней | [Группа]-[Тип]-[Элемент]-[Модификатор]-[Состояние] |
6 уровней | [Группа]-[Тип]-[Элемент]-[Модификатор]-[Вариант]-[Состояние] |
Как назвать цвета
Я предлагаю вам своё руководство по именованию. Однако вы можете использовать и другую логику, если она будет понятна остальным участникам вашей команды.
Глобальные переменные
Это абстрактные названия без контекста использования. Именование цветов происходит значениями от 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 — блог про дизайн и карьеру, подписывайтесь и следите за новыми статьями!
Это была первая часть, объясняющая общее понятие дизайн-токенов простым языком. Если понравится, напишу вторую часть, более расширенную и углублённую. Дайте знать в комментариях!
