Дизайн токены что это
Что значит токен в дизайне?
Простой 3 комментария
Это набор базовых переменных визуального языка (цвета, шрифты, отступы и т.п.), который передаётся в любой компонентный фреймворк. Это позволяет проще управлять визуальным стилем продуктов и дешевле внедрять на практике.
Что такое дизайн-токены?
Дизайн-токены это вещь сейчас. Это неотъемлемая часть любой дизайн-системы и очень важная часть продукта. Это поможет вам сохранить ваш дизайн последовательным и надежным. Дизайн-токены — это набор стилей: цвета, типографика и размеры, которые используются в продукте и могут быть преобразованы в формат для любой платформы, такой как iOS, Android, веб-приложения.
С помощью дизайн-токенов вы можете собирать низкоуровневые значения, а затем использовать их для создания стилей для вашего продукта или приложения. Вы можете поддерживать масштабируемую и согласованную визуальную систему для разработки пользовательского интерфейса.
Что такое Design токены?
Design токены начинают набирать обороты в сообществе дизайнеров, но они не являются совершенно новой концепцией. Например, есть отличное выступление Jina Anne и Jon Levine в 2016 году, где они говорили как design токены используются в Lightning Design System на Salesforce. Они описывают сложность мира, в котором мы живем, когда организации, которая создает несколько веб-приложений и нативных приложений, необходимо выглядеть одинаково, не замедляя работу команды разработчиков. У Jina также есть курс про desigh токены, где в превью она написла:
С design токенами вы можете захватить низкоуровневые значения, а затем использовать их для создания стилей для вашего продукта или приложения. Вы можете поддерживать масштабируемую и совместимую визуальную систему для разработки пользовательского интерфейса.
Давайте возьмем пример: у вас, вероятно, есть шкала типографики, и вы хотите, чтобы она была одинаковой на нескольких платформах. Вместо того, чтобы хранить значения в файле CSS и повторять их в каждом приложении или веб-сайте, они могут быть сохранены в файле JSON, который затем будет преобразован в код, необходимый для всех других платформ. Что-то вроде этого:
Exit fullscreen mode
Вы можете написать свой собственный код, берущий этот файл JSON и преобразовывающий его во все переменные, которые вам могут понадобиться, например, файл Sass (или custom properties) будет зависеть от этих токенов и может использовать их как переменные для использования в другом месте в веб-приложении.
Я думаю, что это невероятно аккуратный материал. И вижу, как он экономит массу дублирующегося кода и путаницы между несколькими командами, поскольку он служит единым источником правды, в отличие от нескольких кодовых баз, имеющих одинаковые требования к дизайну и собственных таблиц стилей для обслуживания. Cristiano Rastelli писал об управлении токенами дизайна с помощью словаря стилей.
Ваш источник правды даже не должен быть файлом JSON! В посте, опубликованном ранее в этом году, Павел Лаптев показывает нам, как создавать токены в Figma, используя ее API, абстрагировать значения от макетов дизайна и использовать их в коде. Павел разбил свой документ Figma на отдельные страницы для своей сетки, отступов, палитры и типографики.
Затем Brent разработал спецификацию темы, чтобы решить эту проблему. Похоже, наличие единого стандарта для записи всех наших переменных и настроек поможет нам, если мы хотим переключиться с одной библиотеки CSS-in-JS на другую или если мы хотим перейти на какую-то другую систему.
Дизайн-токены способны на большее: создаем единый источник информации о компонентах UI
Термином «дизайн-система» в IT давно никого не удивишь. Компании систематизируют дизайн продуктов, придумывая свои или используя чужие инструменты для управления стилями, паттернами и компонентами.
Badoo не является исключением: с помощью нашей дизайн-системы Cosmos мы поддерживаем общие принципы дизайна для четырёх приложений, работающих на четырёх платформах.
Одна из первых и основных вещей, с которой начинается работа по созданию дизайн-системы, — это токены (или переменные), которые определяют значения разных сущностей системы.
Как это работает? Например, у вас есть приложение для двух платформ. Вместо того чтобы для каждой заново указывать в CSS-файле размер и стиль шрифтов, вы можете хранить эти значения в JSON-файле, который легко преобразуется в код для любой платформы. В дальнейшем этот файл можно использовать и в других проектах с другими кодовыми базами.
Несмотря на потенциал дизайн-токенов, во многих компаниях их структура остаётся довольно простой, что сильно ограничивает возможности их применения.
Я хочу поделиться адаптированным переводом статьи моего коллеги Кристиано Растелли (Cristiano Rastelli), который несколько лет развивает дизайн-систему Cosmos. На примере своего опыта он показывает, как работать с токенами более эффективно: добавлять метаданные и использовать их для описания свойств компонентов.
Под катом — небольшой рассказ о том, как выглядят дизайн-токены в Badoo и почему они значительно упрощают процесс разработки.
В последние месяцы я не мог не заметить, как много людей (и компаний) подразумевают под дизайн-токенами только цвет, типографику и интервалы, а в некоторых случаях — тайминг, размеры и возвышение (elevation).
Они упускают главное: дизайн-токены могут быть чем-то большим, чем всё перечисленное.
В этой статье я поделюсь своим мнением и опытом по теме и покажу, что и как можно сделать с помощью токенов.
Дизайн-токены для цветов, типографики и интервалов
Как я уже говорил, многие считают дизайн-токены «набором ключевых свойств дизайна приложения или сайта». Это простое определение часто вводит в заблуждение и ограничивает возможности применения токенов.
Например, взгляните на эту песочницу: Design System Playground. Всё, что создатели предлагают менять в ней, — это цвета и типографика.
Попробуйте этот инструмент для управления дизайн-токенами — и вы увидите, что он тоже основан на идее «ключевых» значений свойств дизайна:
Скриншот интерфейса, который используется для добавления нового дизайн-токена на сайте designtokens.dev
Посмотрите, сколько плагинов для экспорта дизайн-токенов создано для Figma, Sketch и Framer. В основе каждого из них лежит идея экспорта гранулированных и изолированных значений цветов, размера шрифтов и высоты строк, интервалов и т. д.
Изучите разделы про дизайн-токены на сайтах разных дизайн-систем: в большинстве случаев там будет написано лишь про цвета, типографику, интервалы, возвышение, тайминг, размеры и прочее.
Хочу уточнить: в этом нет ничего плохого. Но, как я сказал выше, я считаю, что дизайн-токены способны на большее.
По моему опыту, огромный потенциал и сила дизайн-токенов проявляются в полной мере тогда, когда они:
Дизайн-токены для компонентов
Нет причин не использовать дизайн-токены для описания свойств компонентов.
С технической точки зрения дизайн-токены являются упорядоченными списками пар «ключ — значение», которые описывают дизайнерские решения. То, какими правилами и ограничениями мы будем руководствоваться при описании через них интерфейса, — лишь вопрос удобства (и контекста).
В некоторых случаях (особенно когда дизайн-система находится на ранней стадии развития) целесообразно ограничиться ключевыми значениями (цветами, типографикой, интервалами). Но когда система усложняется, когда в неё добавляется всё больше и больше компонентов, то хорошо бы использовать дизайн-токены и для них.
Более того, основные цвета и шрифты меняются нечасто (например, при ребрендинге), а вот компоненты, по моему опыту, развиваются непрерывно. Например, в нашу дизайн-систему в последние месяцы было добавлено много новых компонентов. Некоторые из имеющихся были усовершенствованы, а какие-то — даже отрефакторены. Несколько компонентов были расширены с целью использования их в других контекстах или визуальных состояниях. И лишь пара цветов и один шрифт были изменены.
Как мы в Badoo используем дизайн-токены
Каждый раз при создании компонента мы обсуждаем с дизайнерами или разработчиками, которые работают над дизайн-системой, возможные состояния и варианты компонента, а также его дизайнерские решения. И затем переводим все эти спецификации в конкретные дизайн-токены.
Пример набора дизайн-токенов для компонента (Lifestyle Badge)
Вот так, к примеру, выглядит JSON-файл для компонента Lifestyle Badge (для управления токенами мы используем Style Dictionary):
Эти значения преобразуются в разные форматы и распределяются по различным платформам (мобильный веб, iOS, Android) и продуктам (сейчас мы поддерживаем четыре основных бренда и несколько немарочных (white label brands)).
Как только токены для компонента добавляются в систему, разработчики, которые над ним работают, получают все необходимые дизайн-спецификации:
Так выглядят токены Lifestyle Badge под Android в нашей дизайн-системе
На первый взгляд подход выглядит нерациональным и усложняющим систему. Но мы убедились в том, что это позволяет нам распределять информацию по «потребителям» — разработчикам — надёжным и отлаженным способом, что уменьшает вероятность возникновения путаницы, недопонимания и человеческих ошибок.
Со временем разработчики начинают требовать наличия конкретных токенов при добавлении компонентов в систему. В этом случае отпадает необходимость открывать Sketch-файл (или страницу в Sympli) и выяснять размеры, цвета и спецификации компонентов. Вместо этого им достаточно обновить в своих кодовых базах версию пакета дизайн-токенов и запустить скрипт синхронизации/обновления, после чего они автоматически получат все спецификации, представленные в виде легкочитаемых имён переменных.
Также мы с помощью иллюстраций показываем, как и где определены и используются дизайн-токены компонентов.
Пример набора дизайн-токенов для другого компонента (Action Sheet). С их помощью можно выразить даже выравнивание по вертикальной оси (gravity)!
Ещё один важный аспект такого подхода заключается в том, что вы получаете все те же преимущества, что и при использовании токенов для базовых свойств дизайна.
Если рассматривать дизайн-токены в качестве способа передачи информации, то разумно использовать их и для компонентов.
Метаинформация дизайн-токенов
Оба основных инструмента управления дизайн-токенами (Theo и Style Dictionary) поддерживают добавление метаданных к паре «ключ — значение». Их можно использовать для добавления комментариев и аннотаций, однако по-настоящему сила метаданных раскрывается тогда, когда их используют для создания дополнительного смыслового слоя.
Например, вы можете добавить информацию о типе значений, чтобы использовать её позднее, например при обработке значений для получения конкретных результатов. Вы можете добавить информацию о группировке, чтобы потом с её помощью организовать или отфильтровать значения так, как вам нужно. Можно добавлять самые разные виды информации в зависимости от контекста и потребностей. То есть вы добавляете то, что релевантно для вас, вашего контекста, способа применения токенов и задач.
Как мы используем метаданные
Первой метаинформацией, которую мы добавили после внедрения дизайн-токенов в нашу дизайн-систему, стала «документация/комментарий» («documentation/comment»). С её помощью мы ввели в токен дополнительные данные, которые будут отображаться на сайте дизайн-системы. Мы применили пространство имён documentation, а не просто свойство comment, на тот случай, если нам понадобится добавить больше информации: к примеру, если дизайн-токен устареет и нужно будет описать его замену.
Вот пример добавления комментария в дизайн-токен:
А так выглядит документация этого токена:
Сразу после этого мы добавили второй вид метаинформации — «тип» («type»). Это скорее семантическое понятие, а не программистское.
Вот примеры типов, которые мы используем:
Метаданные «тип» используются в скриптах постобработки для генерирования конкретных результатов для разных платформ. Вот фрагмент кода шаблона, который используется для генерирования XML-файла под Android:
В зависимости от «типа» токена мы генерируем значения с форматированием, необходимым для Android
А это отформатированный под наши требования результат:
Сгенерированный под Android XML-файл с соответствующим форматом/типом, который зависит от метазначения «type» в токене
Позднее мы добавили третий вид метаданных: «группа» («group»). Это важнейший вид метаинформации, который используется по многим причинам.
Фильтрация
Для некоторых продуктов и задач нам нужно создавать подмножества токенов (например, только цвета). Для этого мы добавили в словарь стилей конкретный фильтр:
Скрипт для фильтрации «правильных» цветов
Вы могли заметить, что здесь мы используем два условия: одно для выбора токенов по типу «цвет» («color»), второе — для отсеивания любых «псевдонимов» («alias»). Это сделано потому, что мы используем специальные вспомогательные промежуточные цвета (вроде color-palette-purple-grave) в качестве указателей на их шестнадцатеричные значения, но поскольку они не нужны нам в виде сгенерированных токенов, мы отмечаем их флагом isAlias.
Затем этот фильтр используется для генерирования файлов только с цветами:
Мы фильтруем дизайн-токены в зависимости от метаданных «type», чтобы сгенерировать файлы только с цветами
Это лишь один пример того, как с помощью метаданных можно фильтровать токены и генерировать конкретные файлы. Можно придумать много других способов применения в зависимости от ваших потребностей и контекста.
Группировка
Ещё один способ использования метаданных — группировка дизайн-токенов по определённым правилам.
Например, с помощью атрибута «группа» («group») можно создавать списки токенов, относящихся к одной группе, а затем использовать эти списки (или ассоциативные массивы) в кодовой базе.
Сгруппируем дизайн-токены по группам в зависимости от значений цветов и размеров иконок:
Можно сгенерировать ассоциативные массивы в Sass (они же Sass maps, или карты):
Теперь эти карты позволят нам объявлять подобные конструкции:
Использование в нашей кодовой базе Sass-карт, сгенерированных дизайн-токенами
Таким образом, мы не просто абстрагируемся от объявления списков классов/свойств в зависимости от цвета, размера и прочих параметров — для нас гораздо важнее то, что у разных продуктов могут быть разные списки цветов, интервалов, размеров иконок и т. д., и при этом один и тот же Sass-код теперь работает для любых списков цветов, интервалов, размеров и прочего.
Эти Sass-файлы являются универсальными и могут использоваться для компонентов разных продуктов и на разных платформах.
При добавлении или удалении цвета список обновляется автоматически. Не нужно менять код на уровне компонента или приложения. Всё управляется с помощью объявлений дизайн-токенов.
Это работает не только для CSS/Sass. Те же преимущества списков токенов, относящихся к одной группе, можно получить и в JavaScript:
На сайте дизайн-системы мы демонстрируем все возможные цвета компонентов, используя списки токенов, сгенерированные через ассоциированные с ними метаданные «group»
Это приводит нас ещё к одному способу применения — CSS-в-JS. В этом случае список возможных цветов (отступов, размеров) для компонентов становится просто циклом/картой списка объектов «ключ — значение», сгенерированным инструментом для работы с дизайн-токенами.
В рамках этого же подхода мы недавно использовали свойство «group» для генерирования TypeScript-определений. С помощью специального шаблона в словаре стилей мы можем генерировать такие файлы:
Эти TypeScript-определения и перечисления позднее могут напрямую использоваться клиентскими кодовыми базами для обеспечения строгой типобезопасности (и автоматически заполняться в IDE).
В качестве ещё одного возможного использования метаданных для добавления в дизайн-токены дополнительного семантического значения, в частности взаимосвязей, можно упомянуть объявление текстовых стилей. Все мы знаем, что для создания минимально жизнеспособного текстового стиля нужно задать не меньше четырёх параметров: font-family, font-size, line-height и font-weight.
Как определить и явно объявить взаимосвязи между отдельными дизайн-токенами, чтобы создать «текстовый стиль H1»? Можно отразить это в наименованиях, чтобы все свойства одного стиля имели одинаковый префикс или суффикс. Тогда почему бы не использовать метаданные, ассоциированные с токенами, для их идентификации и фильтрации/группировки в ходе обработки?
Нам это реализовывать не нужно, но если бы потребовалось, то я однозначно воспользовался бы атрибутом метаданных, ассоциированным с разными значениями стилей.
Заключение
Например, с помощью метаданных можно:
Я показал, как мы реализуем этот подход в нашей дизайн-системе. Но мы используем дизайн-токены для удовлетворения наших потребностей. Уверен, что у вас есть (или вы найдёте) множество других примеров того, как можно использовать дизайн-токены, помимо цветов, типографики и интервалов.
Всё ограничивается лишь воображением. Подумайте о том, что вы можете сделать, если добавите в токены метаинформацию, имеющую для вас конкретное значение в зависимости от того, как и где эти токены используются.
А потом обязательно расскажите об этом сообществу!
P. S. Больше о том, что такое дизайн-токены, можно узнать из онлайн-курса и выступления Джины Энн, публикации Дэнни Бэнкса, репозитория Стюарта Робсона и статьи Робина Рендла. Есть ещё репозиторий рабочей группы W3C, в который можно внести свой вклад. Чтобы получить более полное представление о том, как в Badoo используются дизайн-токены, почитайте эту статью: How to manage your Design Tokens with Style Dictionary.
Что такое дизайн-токены? Давайте разбираться вместе
Большинство дизайнеров знают, что недостаточно просто создать отличный дизайн; также важно реализовать этот дизайн в конечном продукте. Многие проблемы могут возникнуть на этапе разработки, когда вы адаптируете свой дизайн к нескольким платформам и устройствам. Продуктовые группы полагаются на дизайн-системы, чтобы минимизировать потенциальные проблемы фронт-энд дизайна.
В этой статье мы обсудим одну конкретную часть дизайн-системы – токены. Вы узнаете, что такое дизайн-токены и как их используют дизайнеры.
Что такое токены?
Токены дизайн-системы – это значения стиля элементов интерфейса, таких как цвет, типографика, интервалы, тени и т. д., которые используются в продуктах и могут быть преобразованы в формат для любой платформы (веб, мобильные устройства, настольные компьютеры). Токены являются строительными блоками дизайн-системы – думайте о них как о субатомах, мельчайших элементах значений стиля, которые позволяют дизайнерам создавать стили продукта.
Также, есть лекция Юрия Ветрова о дизайн-токенах:
Различия между обычными переменными и токенами
Свойства визуального дизайна, такие как цвет, могут быть сохранены как обычные переменные:
Как токены помогают процессу проектирования
Дизайнеры могут работать со значениями стиля двумя способами: либо жестко закодить их в дизайне, либо использовать токены. Язык дизайна меняется и развивается с течением времени, и когда продуктовая группа полагается на жестко запрограммированные значения, ей приходится вручную корректировать значения всякий раз, когда она изменяет дизайн.
Обновление одного значения стиля в дизайне не занимает много времени. Однако в реальных проектах такие атрибуты, как цвет бренда или типографика, используются в десятках разных мест, и настройка значений вручную занимает много времени. Кроме того, можно забыть изменить конкретное значение для какого-либо элемента (или элементов) и внести несоответствия в дизайн. В отличие от этих недостатков токены предлагают различные преимущества для процесса проектирования.
Токены допускают гибкий дизайн
Токены используются вместо жестко запрограммированных значений и позволяют дизайнерам создавать более гибкие дизайн-решения. Они предоставляют дизайнерам возможность сохранять полный контроль над значениями дизайн-системы. Дизайнеры обновляют значение централизованно (в одном месте), и новое изменение автоматически применяется ко всем проектам на каждой платформе.
Токены создают единый вид
Возможность создания единого внешнего вида на разных платформах – еще одно преимущество токенов. Они помогают синхронизировать значения вашей дизайн-системы во всех проектах, и вы можете отформатировать их в соответствии с потребностями любой платформы. Например, проектируя веб-версию своего продукта, вы можете использовать HEX значение цвета из CSS, но при проектировании iOS-приложений вы можете использовать цветовой формат RGBA.
Токены упрощают процесс разработки
И последнее, но не по важности: токены упрощают процесс разработки. Разработчики имеют доступ к новейшим атрибутам дизайна через программное обеспечение дизайн-системы. Они могут использовать токены в коде, таком как пакет npm, и получать обновления дизайна без изменения кода.
Советы по управлению токенами
Теперь, когда у вас есть ответы на вопросы «Что такое токен дизайна?» и «Как они используются?» пришло время изучить методы, которые помогут вам упростить процесс создания токенов. Советы, упомянутые в этом разделе, основаны на рекомендациях ведущих сторонников дизайн-систем, таких как Брэд Фрост и Натан Кертис.
Проведите инвентаризацию интерфейса
Чтобы создать токены, вам нужно разобрать страницы до их атомарного уровня, и инвентаризация интерфейса поможет вам в этом. Инвентаризация интерфейсов – это процесс категоризации компонентов, составляющих ваш продукт. В конце этого процесса у вас будет исчерпывающая коллекция больших и малых частей, составляющих интерфейс, и эта информация поможет вам создать токены.
Чтобы упростить инвентаризацию, вы можете положиться на инструмент 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.
Назначьте ответственного за токены
Кто должен просматривать и утверждать токены? Заманчиво возложить эту ответственность на всех членов команды, но лучше не поддаваться этому искушению, потому что не у всех есть время, чтобы поддерживать токены в порядке. Намного лучше выбрать человека, который будет курировать токены, предложенные всеми членами команды.
В конце дня любой член продуктовой группы может предлагать токены, но один человек (ответственный) будет рассматривать предложения и принимать / отклонять их. Этот человек должен стремиться поддерживать токены в порядке – просматривать стили и файлы токенов, оценивать предложенные токены и использовать инструменты совместной работы для предоставления фидбека.
Обеспечьте доступность
Создаваемые вами дизайны должны быть доступны для всех пользователей. Когда вы работаете с токенами, не забывайте тестировать их на доступность. Контраст – один из основополагающих принципов дизайна. Когда вы выбираете цвета, вам необходимо проверить контраст в соответствии с рекомендациями WCAG 2.0. WCAG рекомендует пороговое соотношение 4: 5: 1 для стандартного или мелкого текста и 3: 1 для более крупного текста.
Продуктовые команды должны регулярно проводить автоматические тесты доступности. В этом вам поможет a11y – отличный инструмент для проведения аудита доступности, интегрируемый в вашу дизайн-систему.
Также стоит выделить значения контрастности прямо в проектной документации, поскольку она становится единственным источником истины для всех, кто работает над проектом.
Значение цветового контраста в дизайн-системе Duet. Изображение Duet.
Создавайте лучшие дизайн-системы с помощью токенов
Эффективное управление токенами дизайна упрощает процесс создания единого внешнего вида на разных платформах. Токены помогают продуктовым командам быстро и уверенно применять дизайн-решения. Они становятся единым источником истины для дизайнеров и разработчиков, поэтому они могут полагаться на токены для достижения согласованности и масштабируемости дизайна интерфейса, при этом эффективно сотрудничая в рамках единого программного обеспечения дизайн-системы.