Токены в дизайн системе
Рассказывает о токенах в дизайн системе Парфёнов Александр, продуктовый дизайнер Центра цифровых решений для корпоративного бизнеса.
О токенах в дизайн системе я узнал из выступления Юры Ветрова в далеком и прекрасном 2019 году на конференции Frontend Conf. «Интересная идея», подумал я тогда, и забыл про них еще на пару лет, переодически читая статьи разных дизайн системах, которы как грибы после дождя начали появляться то в одной крупной компании, то в другой. Применить накопившуюся информацию в реальных проектах не удавалось. Не хватало понимания, для чего это может быть нужно проекту и мне лично, а мотивация заниматься этим на боевых проектах была бесконечно мала.
Но, недавно беклог команды предоставил мне задачу на создание темной темы. Другого выхода я не видел, как перекрасить вручную макеты за последние несколько лет и перебрать библиотеку — и от этого стало не по себе.
В поисках решения мы поняли, что добавление разных тем — это серьёзный повод чтобы задуматься о внедрении токенов. Как оказалось, токены классный инструмент, который позволил нам открыть новый подход и справляться с такими задачами быстрее.
Токены нужны, если:
— Вы делаете несколько приложений и сервисов, которые должны быть консистентны, иметь единый вид;
— Если вы планируете темезацию, будь — то светлая и темная тема одного приложения;
— Проектируете какое-то white label решение, которое кастомизируется под каждого заказчика.
«Это оно!», — подумал я и стал искать материалы в старых закладках, которые помогут разобраться в решении подобных задач. И разобравшись, сделал некоторые выводы для себя. Но обо всем по порядку.
Дизайн-токены — это переменные в мире дизайна, условно коробочки куда мы можем положить значения — отступы, цвета, типографика, стили объектов. Положив их в эту коробочку, мы можем на них ссылаться как на стиль объектов, которые мы добавляем на экран. Например, мы определили основной цвет нашего приложение как красный. Отлично, теперь мы создадим токен-коробочку, под этот цвет и назовём её ”color-primary”, и положим туда это значение. И на всех макетах, где будет использоваться наш основной цвет мы будем не прописывать цвет вручную, а ссылаться на нашу коробочку. Теперь представим, что нам нужно изменить оттенок нашего цвета в связи с ребрендингом, вместо траты 100500 человеко-часов для того, чтобы изменить цвет по всем макетам, мы просто заменяем его в коробочке. В коробочки вместо цвета может лежать любой стиль: цвет, скругление, тень или даже такие свойства типографики (размер, толщина, межстрочное, шрифт), как по одному, так и все вместе.
И казалось бы в Figma такие проблемы решаются путем занесения стилей в библиотеку, стили используем в компонентах и вроде вопрос закрыт. О чем вообще речь? А речь о том, что разработка продукта в Figma не заканчивается и весь смысл токенов на самом деле уходит далеко за рамки графического редактора. И заключается больше в формате хранения и передачи информации между дизайнером и разработкой. Не очень понятно? Сейчас расскажу.
Как происходит процесс разработки web странички в самой простой её реализации: дизайнер нарисовал макет и отдал его разработчику, тот взял картинку и начал переписывать её кодом.
Дизайн-токены: практическое руководство для начинающих
Дизайн-токены — строительные блоки дизайн-систем. Их внедрение помогает сделать дизайн-системы унифицированными, гибкими и готовыми к масштабированию.
Общая информация
Дизайн-токены хранят повторяющиеся дизайн-решения в независимом от платформы виде. Они выступают единым источником достоверных данных для дизайн-системы.
Понятие «Единый источник достоверных данных» (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 типа дизайн-токенов, которые могут сформировать многоуровневую иерархию для создания более контролируемых и гибких дизайн-систем.
Использование дизайн-токенов вместо жёстко закодированных значений позволяет без труда создавать, поддерживать и масштабировать дизайн-системы.
Перевод статьи “Design Tokens: Beginner’s Guide” из блога Nitish Khagwal.
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement — подписывайтесь!
Дизайн-токены: практическое руководство для начинающих
Дизайн-токены — строительные блоки дизайн-систем. Их внедрение помогает сделать дизайн-системы унифицированными, гибкими и готовыми к масштабированию.
Общая информация
Дизайн-токены хранят повторяющиеся дизайн-решения в независимом от платформы виде. Они выступают единым источником достоверных данных для дизайн-системы.
Понятие «Единый источник достоверных данных» (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 типа дизайн-токенов, которые могут сформировать многоуровневую иерархию для создания более контролируемых и гибких дизайн-систем.
Использование дизайн-токенов вместо жёстко закодированных значений позволяет без труда создавать, поддерживать и масштабировать дизайн-системы.
Что такое дизайн-токены?Давайте разбираться вместе
Большинство дизайнеров знают, что недостаточно просто создать отличный дизайн; также важно реализовать этот дизайн в конечном продукте. Многие проблемы могут возникнуть на этапе разработки, когда вы адаптируете свой дизайн к нескольким платформам и устройствам. Продуктовые группы полагаются на дизайн-системы, чтобы минимизировать потенциальные проблемы фронт-энд дизайна.
В этой статье мы обсудим одну конкретную часть дизайн-системы – токены. Вы узнаете, что такое дизайн-токены и как их используют дизайнеры.
Что такое токены?
Токены дизайн-системы – это значения стиля элементов интерфейса, таких как цвет, типографика, интервалы, тени и т. д., которые используются в продуктах и могут быть преобразованы в формат для любой платформы (веб, мобильные устройства, настольные компьютеры). Токены являются строительными блоками дизайн-системы – думайте о них как о субатомах, мельчайших элементах значений стиля, которые позволяют дизайнерам создавать стили продукта.
Концепция токенов дизайна была первоначально представлена Джиной Болтон и Джоном Левином в их выступлении «Использование токенов дизайна с дизайн-системой Lightning» .
Также, есть лекция Юрия Ветрова о дизайн-токенах:
Различия между обычными переменными и токенами
Свойства визуального дизайна, такие как цвет, могут быть сохранены как обычные переменные:
$blue-400 = #2680EB;
Переменная $blue-400 может использоваться в препроцессоре CSS, таком как SASS. Хотя этот подход поможет вам структурировать варианты дизайна, у него есть один важный недостаток: переменные не обязательно устраняют разрыв между именованием и использованием. Дизайнерам нужно знать, какие параметры они должны применять в конкретном контексте, и именно здесь в игру вступают токены:
$button-cta-background-color = $blue-400;
Название этого токена – $button-cta-background-color – дает понять, что цвет $blue-400 служит цветом фона для кнопки призыва к действию.
Иллюстрация разницы между переменной (blue-400) и токеном (button-cta-background-color). Изображение Adobe.
Как токены помогают процессу проектирования
Дизайнеры могут работать со значениями стиля двумя способами: либо жестко закодить их в дизайне, либо использовать токены. Язык дизайна меняется и развивается с течением времени, и когда продуктовая группа полагается на жестко запрограммированные значения, ей приходится вручную корректировать значения всякий раз, когда она изменяет дизайн.
Обновление одного значения стиля в дизайне не занимает много времени. Однако в реальных проектах такие атрибуты, как цвет бренда или типографика, используются в десятках разных мест, и настройка значений вручную занимает много времени. Кроме того, можно забыть изменить конкретное значение для какого-либо элемента (или элементов) и внести несоответствия в дизайн. В отличие от этих недостатков токены предлагают различные преимущества для процесса проектирования.
Токены допускают гибкий дизайн
Токены используются вместо жестко запрограммированных значений и позволяют дизайнерам создавать более гибкие дизайн-решения. Они предоставляют дизайнерам возможность сохранять полный контроль над значениями дизайн-системы. Дизайнеры обновляют значение централизованно (в одном месте), и новое изменение автоматически применяется ко всем проектам на каждой платформе.
Токены создают единый вид
Возможность создания единого внешнего вида на разных платформах – еще одно преимущество токенов. Они помогают синхронизировать значения вашей дизайн-системы во всех проектах, и вы можете отформатировать их в соответствии с потребностями любой платформы. Например, проектируя веб-версию своего продукта, вы можете использовать HEX значение цвета из CSS, но при проектировании iOS-приложений вы можете использовать цветовой формат RGBA.
Токены упрощают процесс разработки
И последнее, но не по важности: токены упрощают процесс разработки. Разработчики имеют доступ к новейшим атрибутам дизайна через программное обеспечение дизайн-системы. Они могут использовать токены в коде, таком как пакет npm, и получать обновления дизайна без изменения кода.
Как использовать токены в коде. Изображение Designtokens.
Советы по управлению токенами
Теперь, когда у вас есть ответы на вопросы «Что такое токен дизайна?» и «Как они используются?» пришло время изучить методы, которые помогут вам упростить процесс создания токенов. Советы, упомянутые в этом разделе, основаны на рекомендациях ведущих сторонников дизайн-систем, таких как Брэд Фрост и Натан Кертис.
Проведите инвентаризацию интерфейса
Чтобы создать токены, вам нужно разобрать страницы до их атомарного уровня, и инвентаризация интерфейса поможет вам в этом. Инвентаризация интерфейсов – это процесс категоризации компонентов, составляющих ваш продукт. В конце этого процесса у вас будет исчерпывающая коллекция больших и малых частей, составляющих интерфейс, и эта информация поможет вам создать токены.
Чтобы упростить инвентаризацию, вы можете положиться на инструмент CSS Stats, чтобы узнать, сколько свойств стиля в ваших таблицах стилей. Это поможет определить области, требующие оптимизации. Например, анализируя цвета, которые вы используете в своем проекте, вы можете определить, какие цвета выглядят почти идентичными, и заменить их одним цветом.
Множество уникальных цветов, которые есть у Google.com. Изображение CSS Stats.
Определите критерии для создания токенов
Когда вариант стиля становится токеном? Полезно иметь четкие критерии того, когда создавать токены. Критерий «Х раз использовано» – это простой, но эффективный способ решить, какие варианты следует токенизировать. Если стиль используется только в одном месте, вероятно, вам не нужно создавать токен.
Определитесь с именами
Сила дизайн-системы заключается в умении применять параметры к контексту. Важно убедиться, что правильный токен используется для правильного свойства. Разные команды будут называть вещи по-разному. Вот почему так важно определить четкие соглашения об именах, прежде чем вы начнете работать с токенами.
Вот рекомендуемый подход для именования: [Category]-[Type]-[Item]-[State]. Если вы последуете этому подходу, вы получите примерно следующий результат: color—background—ctabutton—active
Когда дизайнеру нужен цвет для активной кнопки с призывом к действию, он должен иметь возможность просмотреть коллекцию токенов и выбрать тот, который соответствует его потребностям.
Применяйте шкалы
Шкалы, например, размеров футболок (XS, S, M, L, XL, XXL) или прогрессии (2, 4, 8, 16, 32), могут быть очень полезны в разных сценариях применения токенов. Например, у вас может быть размер шрифта по умолчанию для основного текста и используйте шкалу размеров футболок, когда вам нужно настроить его для разных размеров экрана.
Используйте формат JSON для повторного использования данных токена
JSON – отличный формат для кодирования пар значений. С помощью токенов в JSON вы можете настроить параметры дизайна для нескольких препроцессоров – SASS, LESS или Stylus.
JSON создает мост для разных платформ. Изображение Nathan Curtis.
Назначьте ответственного за токены
Кто должен просматривать и утверждать токены? Заманчиво возложить эту ответственность на всех членов команды, но лучше не поддаваться этому искушению, потому что не у всех есть время, чтобы поддерживать токены в порядке. Намного лучше выбрать человека, который будет курировать токены, предложенные всеми членами команды.
В конце дня любой член продуктовой группы может предлагать токены, но один человек (ответственный) будет рассматривать предложения и принимать / отклонять их. Этот человек должен стремиться поддерживать токены в порядке – просматривать стили и файлы токенов, оценивать предложенные токены и использовать инструменты совместной работы для предоставления фидбека.
Обеспечьте доступность
Создаваемые вами дизайны должны быть доступны для всех пользователей. Когда вы работаете с токенами, не забывайте тестировать их на доступность. Контраст – один из основополагающих принципов дизайна. Когда вы выбираете цвета, вам необходимо проверить контраст в соответствии с рекомендациями WCAG 2.0. WCAG рекомендует пороговое соотношение 4: 5: 1 для стандартного или мелкого текста и 3: 1 для более крупного текста.
Продуктовые команды должны регулярно проводить автоматические тесты доступности. В этом вам поможет a11y – отличный инструмент для проведения аудита доступности, интегрируемый в вашу дизайн-систему.
Пример аудита доступности с помощью a11y. Изображение Github
Также стоит выделить значения контрастности прямо в проектной документации, поскольку она становится единственным источником истины для всех, кто работает над проектом.
Значение цветового контраста в дизайн-системе Duet. Изображение Duet.
Создавайте лучшие дизайн-системы с помощью токенов
Эффективное управление токенами дизайна упрощает процесс создания единого внешнего вида на разных платформах. Токены помогают продуктовым командам быстро и уверенно применять дизайн-решения. Они становятся единым источником истины для дизайнеров и разработчиков, поэтому они могут полагаться на токены для достижения согласованности и масштабируемости дизайна интерфейса, при этом эффективно сотрудничая в рамках единого программного обеспечения дизайн-системы.