Дизайн токены что это

Что такое Design токены?

Вольный перевод What Are Design Tokens? В последнее время я много слышал о Design токенах, и хотя мне никогда не приходилось работать над проектом, который в них нуждался, я думаю, что они супер интересны и о них стоит написать несколько слов. Насколько я понимаю, общая идея такова: design токены — это независимый способ хранения переменных, таких как типография, цвет и отступы так, чтобы ваша система дизайна могла совместно использоваться на платформах, таких как iOS, Android и старых добрых веб-сайтах. Design токены начинают набирать обороты в сообществе дизайнеров, но они не являются совершенно новой концепцией. Например, есть отличное выступление Jina Anne и Jon Levine в 2016 году, где они говорили как design токены используются в Lightning Design System на Salesforce. Они описывают сложность мира, в котором мы живем, когда организации, которая создает несколько веб-приложений и нативных приложений, необходимо выглядеть одинаково, не замедляя работу команды разработчиков. У Jina также есть курс про desigh токены, где в превью она написла:

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

Давайте возьмем пример: у вас, вероятно, есть шкала типографики, и вы хотите, чтобы она была одинаковой на нескольких платформах. Вместо того, чтобы хранить значения в файле CSS и повторять их в каждом приложении или веб-сайте, они могут быть сохранены в файле JSON, который затем будет преобразован в код, необходимый для всех других платформ. Что-то вроде этого:

< "global": < "type": "token", "category": "typography" >, "aliases": < "TYPE_SIZE_SM": < "value": "14px" >, "TYPE_SIZE_MD": < "value": "25px" >, "TYPE_SIZE_LG": < "value": "44px" >> 

Enter fullscreen mode

Exit fullscreen mode

Вы можете написать свой собственный код, берущий этот файл JSON и преобразовывающий его во все переменные, которые вам могут понадобиться, например, файл Sass (или custom properties) будет зависеть от этих токенов и может использовать их как переменные для использования в другом месте в веб-приложении. Я думаю, что это невероятно аккуратный материал. И вижу, как он экономит массу дублирующегося кода и путаницы между несколькими командами, поскольку он служит единым источником правды, в отличие от нескольких кодовых баз, имеющих одинаковые требования к дизайну и собственных таблиц стилей для обслуживания. Cristiano Rastelli писал об управлении токенами дизайна с помощью словаря стилей. Ваш источник правды даже не должен быть файлом JSON! В посте, опубликованном ранее в этом году, Павел Лаптев показывает нам, как создавать токены в Figma, используя ее API, абстрагировать значения от макетов дизайна и использовать их в коде. Павел разбил свой документ Figma на отдельные страницы для своей сетки, отступов, палитры и типографики. Сейчас кажется, что потребуются огромные усилия для настройки, но я считаю, что такие инструменты, как Sketch и Figma, сделают нам подобные вещи в ближайшем будущем проще — они, вероятнее всего, захотят, чтобы источник правды был в их конкретном инструменте дизайна вместо какого-то другого инструмента. Последнее, что я хотел бы упомянуть — это сообщение Brent Jackson, в котором он высказал некоторые мысли о совместимости, когда речь заходит о разработке систем. В частности, он утверждает, что должна быть спецификация для design токенов, чтобы любая библиотека CSS-in-JS могла использовать этот код в любом формате или стиле.

Системные design токены должны быть гибкими и кроссплатформенными, что означает, что разные команды, разные реализации и разные библиотеки будут называть вещи по-разному. Для этого нужна спецификация. Хорошая совместимость может быть реализована, если бы мы например, назвали цвета нашей палитры colors и размеры шрифтов, которые мы используем fontSizes . Что вы делаете дальше, и какой формат данных вы используете для хранения этих значений, решать только вам. Преобразовать JSON в ES-модули, в YAML или даже TOML, если вам нужно. Это обычная структура данных, поэтому преобразование между другими структурами данных (например, дизайн инструментами или GraphQL API) также должно быть возможным.

Затем Brent разработал спецификацию темы, чтобы решить эту проблему. Похоже, наличие единого стандарта для записи всех наших переменных и настроек поможет нам, если мы хотим переключиться с одной библиотеки CSS-in-JS на другую или если мы хотим перейти на какую-то другую систему. В любом случае, я считаю, что design токены только начинают становиться мейнстримом, и их популярность вот-вот возрастет, так как эти инструменты, рабочие процессы и стандарты со временем становятся лучше — это все очень захватывающе!

Создание лучших продуктов с системой дизайн-токенов

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

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

Улучшите свой дизайн с помощью дизайн-токенов

Сейчас дизайн-токены – неотъемлемая часть любой дизайн-системы. Они заполняют разрыв между базовыми принципами (цветами бренда, типографикой и т. д.) и компонентами. Но прежде чем узнать, как они помогают, давайте посмотрим на проблему, которую мы пытаемся решить.

Проблема

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

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

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

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

• часто плохо документированы (зачем добавлять документы, можно просто скопировать и вставить компонент);
• сложны для понимания и прослеживания связи (например, почему отступ равен 4px ? Почему значение кнопки blue ?);
• обязывают интенсивно работать, чтобы сохранять их актуальными, когда дизайн-система меняется.

Решения

Введение «дизайн-токенов». Они бывают двух видов: токены вариантов и токены решений и устраняют проблемы, о которых я упоминал выше.

Дизайн-токены вариантов

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

Определение токена вариантов – единственное место, где разрешены грубые значения, вроде 8px .

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

Названия токенов вариантов – это просто абстрактное представление его параметров. Оно не должно предлагать никакого варианта использования:

• оба color-blue-500 или typescale-font-size-sm – прекрасные имена для токена вариантов;
• color-cancel-red – не очень хорошее название, так как подразумевает, что цвет надо использовать только для отмены действия.

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

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

Дизайн-токены решений

Дизайн-токены решений называют контекст, в котором используется ссылочное значение. Они никогда не содержат грубые значения (вроде 8px ), а только ссылаются на токен вариантов, такой как $color-blue-500 .

Название токена решений рассказывает, как и в каком контексте использовать токен.

• button-cta-background-color или image-description-font-size оба описывают то, чем является токен, как его использовать и в каком контексте;
• main-background – плохой выбор названия. Мы не знаем, идет ли речь о цвете, изображении или чем-то еще, а также в каком контексте мы должны это использовать.

С таким подходом названия ваших токенов будут составлять небольшую часть документации. Пользователи же токенов (в основном разработчики) смогут понять предполагаемый сценарий их использования.

Это предотвращает путаницу со значениями и позволяет им помечать недостающие/неправильно используемые токены.

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

Это обеспечивает хороший баланс между согласованностью и гибкостью.

Документация и хранение

Дизайн-токены должны храниться в независимом файле (например, json или yaml ) в центральном месте, доступном для всех команд. Это отделяет их от вашего дизайн-файла и переносит в середину процесса разработки.

Дизайн-токены «принадлежат» всем. Это инструмент, которым все могут и должны пользовать.

То есть файл токена предназначен для всех, что делает желательным наличие документации. В таком случае лучше всего добавить к токену свойство comment , description или remarks . Для названия на данный момент стандарта нет.

'colors': < // . 'danger-red' : < 'value': '#F52C10', // depending on your toolset any of the below may be supported // otherwise they are normally ignored and should not create an error 'comment': 'This color is only use for error messages', 'description': 'This color is only use for error messages', 'remarks': 'This color is only use for error messages', 'deprecated': 'This color is deprecated, use core-red instead' > >

Это может быть полезно для пометки токенов как устаревших или экспериментальных. Или так можно уточнить информацию, которая уже написана в имени токена. Например: This color may only be used for error messages .

Выводы

• Используйте дизайн-токены вариантов, чтобы определить ВСЕ доступные значения параметров в вашем продукте ;
• Используйте токены решений для применения токенов вариантов к контексту;
• Назовите свои токены таким образом, чтобы задокументировать их предполагаемое использование и контекст;
• Добавьте дополнительную документацию к файлу дизайн-токенов.

Спецификация и документирование с помощью дизайн-токенов

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

Построение компонентов

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

Предостережение

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

Вместо этого вам придется вспомнить старую школу и создавать визуальные спецификации. Это позволяет добавить дизайн–токены решений, а также любую дополнительную документацию.

Хотя это утомительная работа, и мы надеемся, что она скоро будет автоматизирована, у нее есть и преимущество. При спецификации компонентов вы перепроверяете дважды, правильно ли они созданы. И если неправильно использовать стиль текста еще возможно, то добавление неправильного токена решения гораздо менее вероятно.

Кнопка

Кнопка может иметь текст, цвет фона, радиус угла, отступы и тень. Для этого вы должны создать следующие токены решений.

$button-label-color: $text-on-light
$button-label-font-size: $typescale-md
$button-background-color: $color-neutral-100
$button-corner-radius: $corner-radius-sm
$button-padding: $size-sm
$button-elevation: $elevation-500

Модальный компонент

Модальный компонент может содержать список или кнопки, но это все еще компонент. У него может быть фон, радиус угла, отступы, высота и цвет наложения.

$modal-background-color: $color-white
$modal-corner-radius: $corner-radius-xs
$modal-padding: $size-sm
$modal-elevation: $elevation-100
$modal-overlay-color: $color-neutral-700
$modal-overlay-opacity: $transparent-slightly

Преимущества

Инкапсуляция

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

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

Меньше ошибок

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

Дизайн-токены решают эту проблему. Они уже определены дизайнером в другом месте и доступны в любой момент. Теперь разработчику нужно только прочитать спецификации и добавить токены.

Использование неправильного токена, например, $button-padding-top для свойства padding-bottom , менее вероятно, чем ситуация, где перепутали просто значения. С токенами при чтении кода сразу видно, что что-то не так, когда всплывает строчка:

Неверно указанный токен

padding-bottom: $button-padding-top

Простота в обслуживании и создании тем

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

Темная тема

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

Если вы создали свой софт с использованием дизайн-токенов, реализация темного режима займет не больше дня.

Чтобы правильно настроить темную тему, ваша цепочка наследования токенов должна быть такой:

1. Дизайн-токены вариантов ( $primary-color , $neutrals , …)
2. Токены общего решения ( $background-color: $white , $text-color-intense: $black )
3. Токены решений компонентов ( $modal-background-color: $background-color )

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

* В зависимости от сложности вашего приложения это может быть не так просто, но принцип именно такой.

Брендинг

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

В этом случае вы можете поменять токены вариантов, вроде $primary-color , и все уже на 90% готово.

Интеграция токенов в конвейер разработки

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

Чтобы это работало, дизайн-токены должны быть интегрированы в конвейер разработки. Сделать это нужно таким образом, чтобы обеспечить «автоматическое» обновление. Но прежде чем углубиться в это, давайте рассмотрим старый способ и связанные с ним проблемы.

Как это делали раньше

1. На каждой платформе мы создавали файлы для хранения переменных, содержащих необработанные значения. Они выглядят как дизайн-токены, например $main-color: #228912 .
2. Переменные использовали во всем приложении.
3. Когда необработанное значение менялось, разработчики на каждой платформе обновляли свои файлы.

На первый взгляд все нормально, но есть проблемы:

• Из-за большого количества ручной работы названия могут отличаться на разных платформах. Например, primary-color для Android и main-color для веба. Из-за этого могут возникать проблемы при обсуждении дизайна и продукта.
• При создании названий вручную часто отдают приоритет краткости, а не полноте описания. Например, btn-bg вместо button-default-background-color .
• В копировании значений вручную никуда без риска опечаток.
• При работе с разными командами кто-то должен информировать все команды об изменениях. После этого кто-то должен проверить еще и правильность внесения изменений.

Как это происходит с дизайн-токенами

1. Дизайнеры создают/экспортируют дизайн-токены.
2. Токены экспортируются в независимом от платформы формате (например, json или yaml) в центральное место (например, используется репозиторий дизайн-токенов).
3. Токены автоматически конвертируются для использования на всех платформах.
4. Токены импортируются с помощью npm , подкаталога git или чего-то подобного.
5. Токены используются во всех приложениях.
6. В процессе сборки зависимости проверяются на наличие обновлений. Если доступно обновление для токенов, всплывает ошибка*.
7. При изменении необработанных значений репозиторий токенов обновляется.
8. Разработчики в любом случае замечают обновление, видя сбой сборки.

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

Этот процесс решает все вышеперечисленные проблемы:

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

*Дополнительные заметки

Описанный выше рабочий процесс немного упрощен. Вы по-прежнему должны разрешать сборки, предоставляя аргумент —ignore-dep-warning . Это необходимо для хотфиксов и т. д.

Вы также можете принять решение об отказе patches и minor обновлении только дизайн-токенов. Major обновления (1.XX → 2.0.0) могут потребовать какого-то времени для реализации.

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

Выводы

• Конвейер дизайн-токенов позволяет напрямую использовать токены команды дизайнеров.
• Разработчики импортируют и обновляют токены с помощью инструментов управления зависимостями. Никакой ручной перенос значений или токенов не нужен.
• Таким образом легко интегрировать дизайн-токены в код. В то же время это ограничивает возможности ошибок и создает общий словарь для дизайн-токенов.

Что такое дизайн-токены?Давайте разбираться вместе

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

Что такое токены?

Токены дизайн-системы – это значения стиля элементов интерфейса, таких как цвет, типографика, интервалы, тени и т. д., которые используются в продуктах и ​​могут быть преобразованы в формат для любой платформы (веб, мобильные устройства, настольные компьютеры). Токены являются строительными блоками дизайн-системы – думайте о них как о субатомах, мельчайших элементах значений стиля, которые позволяют дизайнерам создавать стили продукта. Концепция токенов дизайна была первоначально представлена ​​Джиной Болтон и Джоном Левином в их выступлении «Использование токенов дизайна с дизайн-системой 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.

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

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

Что такое дизайн токены?

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

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

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

Обычные переменные хранят свойства визуального дизайна, например, цвет: $teal-100 = #B2DFDB; Подобные переменные структурируют варианты дизайна. Однако, имя этой переменной не дает информации о ее использовании. Дизайнеры должны знать, какие параметры они должны применять в конкретном контексте, и здесь будут полезны токены: $button-cta-background-color = $teal-100; Имя этого токена — $button-cta-background-color — ясно дает понять, что цвет $teal-100 служит фоновым цветом для кнопки призыва к действию (call to action). Дизайнер, проектируя дизайн систему может либо захардкодить значения свойств для всех элементов, либо использовать токены. Дизайн развивается, и дизайн токены помогают избежать рутины при ручном обновлении захардкоженных значений. Кроме того, можно легко забыть изменить конкретное значение для какого-то элемента и внести несоответствия в дизайн. Дизайнеры, работая с токенами, обновляют значение централизованно, и новое изменение автоматически применяется ко всем проектам на каждой платформе. Дизайн токены упрощают и процесс разработки. Разработчики смогут иметь доступ к самым свежим атрибутам дизайна, например, через npm пакет, и получать обновления дизайна без изменения кода.

Как упростить процесс создания токенов

Провести инвентаризацию интерфейсов

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

Определить когда опция становится токеном

Полезно иметь четкие критерии создания токенов. Критерий «использовано X раз» — это простой, но эффективный способ решить, какие варианты следует токенизировать. Если стиль используется только в одном месте, вам, вероятно, не нужно создавать токен.

Определить соглашения о нейминге

Важно убедиться, что правильный токен используется для правильного ресурса. Разные команды будут называть одни и те же вещи по-разному. Вот почему очень важно определить четкие соглашения об именовании, прежде чем вы начнете работать с токенами. Рекомендуемый подход к именованию: [Категория]-[Тип]-[Элемент]-[Состояние]. Если вы будете следовать этому подходу, у вас будет что-то вроде этого: color-background-ctabutton-active (цвет для активной кнопки призыва к действию).

Использовать понятные шкалы

Обычно используются шкалы по аналогии с размерами футболок (xs, sm, md, lg, xl, xxl) или числовые прогрессии (2, 4, 8, 16, 32).

Использовать JSON для переиспользования дизайн токенов

JSON — отличный формат для хранения пар ключ-значение. С дизайн-токенами в JSON можно настроить параметры для препроцессоров Sass, LESS или Stylus.

Проверять и апрувить токены

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

Обеспечить доступность

Создаваемые вами дизайны должны быть доступны для всех пользователей. Когда вы работаете с токенами, вы не должны забывать тестировать их на доступность. Контраст — один из основополагающих принципов дизайна. При выборе цветов необходимо проверить контраст в соответствии с рекомендациями WCAG 2.0. WCAG рекомендует пороговое соотношение 4:5:1 для стандартного или мелкого текста и 3:1 для крупного текста. a11y — инструмент, который поможет вам проводить аудит доступности.

Улучшайте дизайн-систему с помощью токенов

Когда поддерживаются дизайн токены, упрощается процесс создания унифицированного внешнего вида на разных платформах. Дизайн токены помогают продуктовым командам быстро и уверенно применять дизайнерские решения. Они становятся единым источником достоверной информации для дизайнеров и разработчиков, поэтому все могут полагаться на токены для достижения согласованности и масштабируемости в дизайне пользовательского интерфейса. По мотивам xd.adobe.com

Хуки useTransition и useDeferredValue в ReactJS 18