Я постарался придумать самое простое объяснение дизайн-токенов на примере житейских ситуаций. Что это такое, как работают и зачем они нужны — в этой статье. Дизайн-токены — это набор установленных правил и параметров, которые мы используем, чтобы сделать наш дизайн визуально согласованным. Токены позволяют нам создавать гибкий дизайн. Эти параметры могут включать в себя выбор определённых цветов, шрифтов, размеров элементов, теней, настроек анимаций, отступов, закруглений и других визуальных элементов. Роль дизайн-токенов весьма важна, поскольку они упрощают создание дизайна и поддержание его качества. Представим человека. Это мужчина, рост 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) цвета. СоставныеЭти токены состоят из нескольких простых (миксины). Например, миксином делают токен типографики. У текста множество параметров: название шрифта, кегль, высота строки, межбуквенный интервал и другие.  Пример: Теперь перейдём к основным типам токенов. Я предлагаю вам своё руководство по именованию. Однако вы можете использовать и другую логику, если она будет понятна остальным участникам вашей команды. Также их называют глобальные переменные, примитивы, палитры, референсные токены.Называются они по-разному, но смысл один — это абстрактные названия без контекста.Например: $color-blue-700: #0C345A. Контекста в этом токене нет. Также их называют alias, псевдонимы. Такие токены имеют конкретный контекст использования. Например: $color-text-success, который ссылается на $color-green-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 уровня color-text 3 уровня color-component-divider color-text-secondaryЗдесь пропущен «элемент» и «модификатор», такое может быть. 4 уровня color-component-badge-info 5 уровней color-component-slider-track-hoverНаведение на полоску в слайдере. 6 уровней color-component-badge-background-info-hoverЭто хард-версия токена из 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 переводит JSON-данные в формат, специфичный для конкретной платформы. Он может генерировать различные форматы выходных данных, например, CSS/SASS для веб, XML-версию для Android или JSON-версию для iOS. Дизайнеру важно знать, что есть такая технология и уметь экспортировать JSON для разработчика — это делается с помощью плагина variables2css. После передачи JSON в дело вступает уже разработчик. Кроме Style Dictionary есть множество других преобразователей: Theo, Diez, Specify. Благодарю, что прочитали статью! Надеюсь, было полезно! 👋🏼 Я веду свой блог UX Advocate — блог про дизайн и карьеру, подписывайтесь и следите за новыми статьями! Это была первая часть, объясняющая общее понятие дизайн-токенов простым языком. Если понравится, напишу вторую часть, более расширенную и углублённую. Дайте знать в комментариях!  UX-дизайнер