Дизайн-токены: практическое руководство для начинающих

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

Общая информация

Дизайн-токены хранят повторяющиеся дизайн-решения в независимом от платформы виде. Они выступают единым источником достоверных данных для дизайн-системы.

Понятие «Единый источник достоверных данных» (Single source of truth — SSOT) означает централизованное хранилище, которое действует как единая точка отсчёта для различных артефактов.

Дизайн-решение — выбор, который дизайнер делает из имеющихся вариантов. Например, он выбирает фирменный цвет, шрифт или определяет интервал между заголовком и абзацем.

Дизайн-токены не зависят от конкретной платформы или технических возможностей, что делает их независимыми от платформы. Это упрощает внедрение дизайн-токенов на разных платформах и для разных веб- технологий.

Дизайн-токены обычно реализуют в удобном для восприятия формате, например, YAML или JSON, или используют их прямо внутри инструментов проектирования.

Такие инструменты преобразования дизайн-токенов, как Style Dictionary, Theo и другие, переводят независимые от платформы дизайн-токены в формат, соответствующий определённой платформе.

Например, для обозначения цветов в дизайн-токенах дизайнер может использовать формат HEX, в то время как в iOS будет использоваться RGBA, а Android — 8-значный HEX-код.

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

Использование дизайн-токенов вместо жёстко закодированных значений помогает сделать дизайн-систему гибкой, что упрощает её создание, поддержку и масштабирование.

Упрощение дизайн-токенов

Чтобы упростить концепцию дизайн-токенов, давайте начнём с аналогии.

Аналогия с телефонным контактом

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

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

Если номер телефона человека меняется, всё, что нам нужно, это обновить значение токена, чтобы отразить новый номер, и все связанные функции будут автоматически использовать новое значение.

Аналогия с кофейными стаканами

Другая простая аналогия — 3 кофейных стакана разного размера, на каждом из которых есть этикетка с указанием его объёма в миллилитрах.

Однако в случае, если нам когда-нибудь понадобится изменить количество кофе в них, стаканы с указанными значениями объёма перестанут правильно выполнять свою функцию.

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

Роль дизайн-токенов в дизайн-системах

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

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

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

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

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

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

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

Типы дизайн-токенов

Есть три основных типа дизайн-токенов

Глобальные токены

Глобальные токены — элементарные значения. Их применяют к полному списку всех доступных вариантов в дизайн-системе. Глобальные токены также известны как базовые, опции (options), варианты (choice) или эталонные токены (reference tokens).

Глобальные токены представляют собой такие статические значения, как hex-код цвета, размер шрифта, интервала и другие. Глобальные токены не зависят от контекста и они не связаны с каким-либо явным значением или по смыслу.

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

Семантические дизайн-токены

Дизайн-токены, которые зависят от контекста и ссылаются на глобальные токены, называются alias. Они также известны как семантические токены.

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

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

Обозначение должно быть достаточно общим, чтобы адаптировать различные значения, но при этом достаточно содержательным, чтобы объяснить замысел или цель использования.

Применение семантических дизайн-токенов обеспечивает эффективное, гибкое и простое функционирование, поскольку при необходимости их значения можно изменить.

Токены для компонентов

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

В идеале токены для компонентов указывают на семантические или глобальные дизайн-токены.

Многоуровневая иерархия дизайн-токенов

Глобальные, семантические токены и токены для компонентов могут представлять различные уровни дизайн-токенов. Многоуровневая иерархия дизайн-токенов позволяет реализовать концепцию изоляции и контроля в дизайн-системе.

Изоляция означает то, насколько независим дизайн-токен. Уровень изоляции определяет влияние, которое каждое обновление дизайн-токена будет оказывать на всю дизайн-систему.

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

В примере выше обновление глобального токена green_400 повлияет на оба зависимых от него семантических токена color_background_primary и color_border_primary. Такие обновления оказывают большое влияние на дизайн-систему.

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

В примере выше обновление color_background_primary или color_border_primary повлияет только на зависящие от него дизайн-решения. Такие обновления имеют средний уровень влияния в дизайн-системе.

Токены для компонентов работают на уровне компонентов и максимально изолированы. Обновление токена для компонента отразится только в конкретном компоненте.

В примере выше обновление button_color_background или button_color_icon повлияет только на токены для каждого компонента. Такие обновления оказывают незначительное влияние на дизайн-систему.

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

Многоуровневые токены дают больше возможностей для кастомизации.

В примере выше двухуровневый подход к токенам имеет ограниченную гибкость, поскольку обновление семантического токена space_md повлияет на внутренние отступы как в компонентах диалогового окна, так и компонентах поиска.

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

Заключение

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

Есть 3 типа дизайн-токенов, которые могут сформировать многоуровневую иерархию для создания более контролируемых и гибких дизайн-систем.

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

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement — подписывайтесь!