Дизайн токены: как они могут помочь вам сэкономить время и деньги
В последние годы сфера дизайна начала очень активно развиваться. Еще только несколько лет назад все делали простые интерфейсы в Фотошопе, а теперь все говорят про прототипы, автолейауты, компоненты, UI киты и так далее. После конференции config 2023 посвященный обновлению фигмы наш словарь пополнился еще парочкой новый слов как переменные и все больше дизайнеров начали говорить о токенах. В этой статье мы обсудим что такое токенизация в дизайне, зачем он нужен, как и когда его применять и причем тут figma и программисты
Для кого статья
Для дизайнеров: которые хотят понять что такое токены и зачем переменные в дизайне
Для разработчиков интерфейса: которые хотят ускорить процесс верстки проекта
*Но если вы веб дизайнер который работает с простыми сайтами и лендингами дизайн токены вам вряд ли нужны*
Что такое дизайн токены?
Дизайн токены — это набор базовых переменных визуального языка — отступы, цвета, типографика, стили объектов, анимация — представленный в виде данных. В них цвет представляется как значение RGB, прозрачность как число, анимация как координаты Безье. Токены используют вместо жестко запрограммированных значений, чтобы было легко управлять визуальным стилем и обеспечивать единство во всех продуктах.
Миссия дизайн токенов — сократить время на разработку и помочь держать несколько приложений в едином виде, оптимизируя стоимость и время на правки. А ещё они помогают дизайнеру и разработчику общаться на одном языке. После создание дизайн токенов, разработчик может без труда экспортировать всю библиотеку стилей и сразу внедрить в проект.
*Если вы знакомы с концепцией атомарного дизайна, можно сказать что токены это составляющее атомов, то есть протоны, нейтроны и электроны*
Примеры дизайн токенов
Предыстория: концепция дизайн токенов существует уже давно, впервые идею дизайн токенов представили еще 2016 году ребята из Salesforce: Джина Болтон и Джон Левин на примере своего дизайн системы Lightning Design System. Только после конференции config 2023 она получила свое развитие и сейчас повсеместно приминается в дизайн системах как Fluent 2 от Microsoft, Atlassian Design от Atlassian и во многих других. Почему же так случилось? Дело в том что до появлении переменных в фигме создание и работа с дизайн токенами было возможно только через сторонние плагины. Дальше на конкретном примере разберем почему это так.
Как работать с токенами?
С чего начать? С начало необходима провести организацию проекта в Figma. Вспоминаем принципы атомарного дизайна и все советы по новедению порядка в файле дизайна от крутых дизайнеров.
Теперь при создании дизайн языка проекта мы вместо локальных стилей для цветов должны создать переменные с цветами (здесь говориться о переменных в фигме, уточнение чтобы не перепутать с переменными в коде). Если вы пробовали работать с локальными стилями и переменными вам может показаться что они имеют одинаковый функционал (оба работают как глобальные стили, при изменении которых меняются и все соответствующие цвета в дизайне)
Почему переменные а не локальные стили?
- Переменные могут ссылаться на другие переменные. А это в свою очередь одна из главных вещей для создание токенов. Программисты должны знать в этом толк)))
- С помощью переменных можно делать режимы. Как пример режимы разных языков или светлый и темный режим с помощью одних и тех же токенов цвета
- Переменные приминаются в продвинутых прототипах
- Скоро будет доступно функция перевода переменных в код прямо из Figma в разделе Dev Mode без сторонних плагинов. А пока что могу посоветовать плагин Variable Convertor
Конструкция токенов
Для названии токенов мы можем использовать конструкцию — [Category]-[Type]-[Item]-[SubItem]-[State] которая легко ложится на переменные в Фигме.
- Category – категория токена (color, font) ;
- Type – тип токена (text, background, border) ;
- Item – элемент (button, table, input) ; SubItem – тип элемента (primary, secondary) ;
- State – состояние элемента (default, hover, active) .
Но такая конструкция не обязательная, иногда она может быть короче, а иногда чуть по другому (обычно в документации каждой дизайн системе прописано как правильно называть токены)
Сами токены ничего не содержат внутри, а лишь ссылаются на другие глобальные переменные. Глобальные токены или же переменные это библиотека всех стилей в одной коллекции. Почему это важно? При работе с токенами любой человек или любой разработчик будет понимать как и где нужно применять тот или иной стиль, в тоже время любое изменение стиля не требует изменение токена. Вот как это работает:
Конструкция токенов и взаимодействие с ними
Еще можно делать токены для разных режимов интерфейса из одних и тех же глобальных переменных
На примере показан: 1) как токен ссылается на переменную в коллекции global; 2) токены для разных режимов из одних и тех же глобальных переменных
Семантическое название токенов
Токены это не только про правильное взаимодействие с дизайном, токены это еще и про ускорении цикла разработки. Семантическое название это еще один важный этап при создании правильных токенов. Семантика в названии предполагает что у каждого название токена есть смысл и указатель где должен этот токен применяться (как пример конструкция которую мы обсуждали ранее).
Например я из своего опыта знаю что многие дизайнеры называют цвета просто как red-2, light-red, primary или просто text color. В этом случае разработчик каждый раз должен лезть в дизайн чтобы понять где какай стиль использовать.
На видео пример пример правильного название: разработчику не нужно вспоминать, какая тень при наведении на карточку. Ему просто нужно ввести первые строчки переменной и выбрать переменную в состоянии *-hover.
Почему важна семантика в названии
В дальнейшем, при использовании семантического описания переменной, разработчику проще оперировать ими при назначении свойств элементам. К тому же, разработчик всегда может напрямую назвать дизайнеру название токена, что позволит сторонам лучше понимать друг друга.
А еще стили имеющие семантику должны правильно группироваться и компоноваться, что в дальнейшем поможет правильно перевести дизайн токены в код.
Правильная семантика на примере
Дизайн токены = Переменные в коде
Как токены превращаются в код? Беря за основу опыт в frontend — дизайн-токен и есть переменная в коде.
*Если правильно соблюсти все вышеперечисленное, разработчик будет наслаждаться процессом верстки ��*
Перевод дизайн токенов в код без плагинов: Как я и упоминал выше, пока в фигме не добавили эту функцию, но заявили что очень скоро добавят эту функция. По заверением разработчиков, она будет иметь массу полезных фич и будет располагаться в разделе Dev Mode:
Скриншот с официального сайта Figma
Перевод дизайн токенов в код с помощью плагинов: на данный момент в разделе Dev Mode есть масса плагинов которые имеют данный функционал. Сегодня в качестве примера мы будем рассматривать плагин Variables Converter
Плагин в разделе Dev Mode
Наглядный пример, переводим токены в код:
Для примера работы с токенами я создал простенки дизайн формы регистрации, который в дальнейшем будем верстать:
Кликните здесь, чтобы перейти в Figma проект *Не лишним будет заглянуть в проект и посмотреть как там все устроено*
Дизайн формы регистрации в фигме
Дизайн токены проекта:
Для начала создаем базовый HTML файл с полями для ввода и кнопкой и подключаем к нему файл ‘style.css‘:
Далее с помощью плагина Variable Converter мгновенно переводим все токены в код и получаем следующий код, который сохраняем например как ‘library. css‘:
В файле ‘style. css« мы сначала должны подключить библиотеку с помощью строки »@import «library. css»;» после этого мы можем использовать все токены в виде переменных:
@import ‘library.css’; body < font-family: sans-serif; background-color: var(--colors-background); >.container < align-items: center; width: var(--values-sizes-width-input); margin: 0 auto; padding: var(--values-spacing-container-space); background-color: var(--colors-container-background); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); >h1 < font-size: var(--values-font-size-h1); margin: 0 0 var(--values-spacing-container-space) 0; >label < font-size: var(--values-font-size-label); margin-bottom: var(--values-spacing-label-space); >input < width: 380px; height: var(--values-sizes-height-input); border: 1px solid var(--colors-input-border); padding-left: var(--values-spacing-label-space); margin-bottom: var(--values-spacing-input-space); margin-top: var(--values-spacing-label-space); border-radius: var(--values-radius-input-corner); >button < width: var(--values-sizes-width-button); height: var(--values-sizes-height-button); background-color: var(--colors-button-background); color: var(--colors-button-text); font-size: var(--values-font-size-button); cursor: pointer; border: none; border-radius: var(--values-radius-button-corner); >
Таким образом процесс верстки занимает не более 3-5 минут и мы получаем результат который с точностью до пикселя повторяет дизайн:
Скриншот с браузера
Может показаться что верстка этого дизайна без токенов тоже занимает тоже не много времени, но больших проектах токены ускоряют процесс разработки минимум в несколько раз (экспоненциальный рост полезности, чем сложнее проект тем он нужнее). Такой налаженный дизайн и код поймет любой дизайнер, разработчик на любом этапе разработки
А еще поддержка, изменение и развитие проекта требует гораздо меньше усилии и вложении
Про другие языки программирование
Скоро Figma должны добавить функцию перевода переменных в код, который опять же мы упоминали выше. Разработчики заявили о поддержке языков СSS, JavaScript, Kotlin, Swift. Плагин который мы сегодня обсуждали помимо этих языков Java.
Но что делать если проект делается на других языках программирование, например мобильное приложение на Flutter с использованием ЯП Dart? На такой случай есть универсальный способ который работает почти на всех языках — использовать JSON файлы.
JSON или JavaScript Object Notation — текстовый формат обмена данными, основанный на JavaScript. Но при этом он может использоваться в любом языке программирования. Дизайн-токены хранятся в JSON-файле, в котором нет ничего хитрого: обычный текстовый файл, с расширением *. json и специальной древовидной разметкой. Разметка файла JSON позволяет каталогизировать мета-информацию в древовидную структуру, которая в последующем будет обрабатываться компилятором. JSON становится единым хранилищем всех дизайн-стилей вашего приложения. Преимущество JSON — один такой файл можно использовать в нескольких проектах, например android и ios. А при изменении дизайна, нужно только внести правки в один файл JSON.
Вот ссылка на плагин который переводит токены в JSON файл. А нужные статьи как использовать JSON файл в своем проекте я думаю вы и сами можете найти.
Подводим итоги
Выводы: Дизайн токены с использованием переменных в Figma — это эффективный способ упростить и ускорить разработку веб-сайтов и приложений. Используя переменные, разработчики могут централизованно хранить и управлять всеми элементами дизайна, включая цвета, шрифты, изображения и другие параметры. Это позволяет быстро и легко вносить изменения в дизайн, а также обеспечивает согласованность дизайна во всех элементах приложения.
В реальной практике использование дизайн токенов с переменными в Figma может привести к следующим преимуществам:
- Улучшенное управление дизайном: переменные позволяют централизованно хранить все элементы дизайна, что упрощает их поиск и управление. Это особенно полезно для больших проектов с множеством элементов дизайна.
- Повышенная согласованность дизайна: переменные помогают обеспечить согласованность дизайна во всех элементах приложения. Это важно для создания целостного и высококачественного пользовательского опыта.
- Ускоренная разработка: переменные позволяют быстро и легко вносить изменения в дизайн. Это может сэкономить разработчикам много времени и усилий.
*Я очень надеюсь что эта статья была для вас полезным))) Это первый мой опыт в написания статей. Если я сказал что то не так пожалуйста поправьте меня в комментариях. Вы можете меня найти во всех социальных сетях под ником @nicheriin
Немного о себе: меня зовут Нурсултан и я занимаюсь дизайном более трех лет и поработал над приличным количеством проектов и том числе и в Astana Hub. На данный момент я студент 2 курса Astana IT University по программе Media Technologies*
Полезные ссылки
- Guide to variables in Figma
- Design tokens (Atlassian Design)
- Переменные в Figma (Видео)
- Токены в дизайн-системах (Mail. Ru Group)
- Open Design Systems
- Using CSS custom properties (variables)
Токены в дизайн системе
Рассказывает о токенах в дизайн системе Парфёнов Александр, продуктовый дизайнер Центра цифровых решений для корпоративного бизнеса.
16 показов
4.4K открытий
О токенах в дизайн системе я узнал из выступления Юры Ветрова в далеком и прекрасном 2019 году на конференции Frontend Conf. «Интересная идея», подумал я тогда, и забыл про них еще на пару лет, переодически читая статьи разных дизайн системах, которы как грибы после дождя начали появляться то в одной крупной компании, то в другой. Применить накопившуюся информацию в реальных проектах не удавалось. Не хватало понимания, для чего это может быть нужно проекту и мне лично, а мотивация заниматься этим на боевых проектах была бесконечно мала.
Но, недавно беклог команды предоставил мне задачу на создание темной темы. Другого выхода я не видел, как перекрасить вручную макеты за последние несколько лет и перебрать библиотеку — и от этого стало не по себе.
В поисках решения мы поняли, что добавление разных тем — это серьёзный повод чтобы задуматься о внедрении токенов. Как оказалось, токены классный инструмент, который позволил нам открыть новый подход и справляться с такими задачами быстрее.
Токены нужны, если:
— Вы делаете несколько приложений и сервисов, которые должны быть консистентны, иметь единый вид;
— Если вы планируете темезацию, будь — то светлая и темная тема одного приложения;
— Проектируете какое-то white label решение, которое кастомизируется под каждого заказчика.
«Это оно!», — подумал я и стал искать материалы в старых закладках, которые помогут разобраться в решении подобных задач. И разобравшись, сделал некоторые выводы для себя. Но обо всем по порядку.
Что такое дизайн токены?
Дизайн-токены — это переменные в мире дизайна, условно коробочки куда мы можем положить значения — отступы, цвета, типографика, стили объектов. Положив их в эту коробочку, мы можем на них ссылаться как на стиль объектов, которые мы добавляем на экран. Например, мы определили основной цвет нашего приложение как красный. Отлично, теперь мы создадим токен-коробочку, под этот цвет и назовём её ”color-primary”, и положим туда это значение. И на всех макетах, где будет использоваться наш основной цвет мы будем не прописывать цвет вручную, а ссылаться на нашу коробочку. Теперь представим, что нам нужно изменить оттенок нашего цвета в связи с ребрендингом, вместо траты 100500 человеко-часов для того, чтобы изменить цвет по всем макетам, мы просто заменяем его в коробочке. В коробочки вместо цвета может лежать любой стиль: цвет, скругление, тень или даже такие свойства типографики (размер, толщина, межстрочное, шрифт), как по одному, так и все вместе.
И казалось бы в Figma такие проблемы решаются путем занесения стилей в библиотеку, стили используем в компонентах и вроде вопрос закрыт. О чем вообще речь? А речь о том, что разработка продукта в Figma не заканчивается и весь смысл токенов на самом деле уходит далеко за рамки графического редактора. И заключается больше в формате хранения и передачи информации между дизайнером и разработкой. Не очень понятно? Сейчас расскажу.
Как происходит процесс разработки web странички в самой простой её реализации: дизайнер нарисовал макет и отдал его разработчику, тот взял картинку и начал переписывать её кодом.
Что такое дизайн-токены?Давайте разбираться вместе
Большинство дизайнеров знают, что недостаточно просто создать отличный дизайн; также важно реализовать этот дизайн в конечном продукте. Многие проблемы могут возникнуть на этапе разработки, когда вы адаптируете свой дизайн к нескольким платформам и устройствам. Продуктовые группы полагаются на дизайн-системы, чтобы минимизировать потенциальные проблемы фронт-энд дизайна. В этой статье мы обсудим одну конкретную часть дизайн-системы – токены. Вы узнаете, что такое дизайн-токены и как их используют дизайнеры.
Что такое токены?
Токены дизайн-системы – это значения стиля элементов интерфейса, таких как цвет, типографика, интервалы, тени и т. д., которые используются в продуктах и могут быть преобразованы в формат для любой платформы (веб, мобильные устройства, настольные компьютеры). Токены являются строительными блоками дизайн-системы – думайте о них как о субатомах, мельчайших элементах значений стиля, которые позволяют дизайнерам создавать стили продукта. Концепция токенов дизайна была первоначально представлена Джиной Болтон и Джоном Левином в их выступлении «Использование токенов дизайна с дизайн-системой 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 токены?
Вольный перевод 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 токены только начинают становиться мейнстримом, и их популярность вот-вот возрастет, так как эти инструменты, рабочие процессы и стандарты со временем становятся лучше — это все очень захватывающе!