Дизайн токены: как они могут помочь вам сэкономить время и деньги

В последние годы сфера дизайна начала очень активно развиваться. Еще только несколько лет назад все делали простые интерфейсы в Фотошопе, а теперь все говорят про прототипы, автолейауты, компоненты, 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) .

Но такая конструкция не обязательная, иногда она может быть короче, а иногда чуть по другому (обычно в документации каждой дизайн системе прописано как правильно называть токены)

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

Еще можно делать токены для разных режимов интерфейса из одних и тех же глобальных переменных

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

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

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

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

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

Как токены превращаются в код? Беря за основу опыт в frontend — дизайн-токен и есть переменная в коде.

*Если правильно соблюсти все вышеперечисленное, разработчик будет наслаждаться процессом верстки 😂*

Перевод дизайн токенов в код без плагинов: Как я и упоминал выше, пока в фигме не добавили эту функцию, но заявили что очень скоро добавят эту функция. По заверением разработчиков, она будет иметь массу полезных фич и будет располагаться в разделе Dev Mode:

Перевод дизайн токенов в код с помощью плагинов: на данный момент в разделе Dev Mode есть масса плагинов которые имеют данный функционал. Сегодня в качестве примера мы будем рассматривать плагин Variables Converter

Для примера работы с токенами я создал простенки дизайн формы регистрации, который в дальнейшем будем верстать:

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

Дизайн токены проекта:

Далее с помощью плагина Variable Converter мгновенно переводим все токены в код и получаем следующий код, который сохраняем например как 'library. css':

В файле 'style. css« мы сначала должны подключить библиотеку с помощью строки »@import «library. css»;" после этого мы можем использовать все токены в виде переменных:

Таким образом процесс верстки занимает не более 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*

1. Guide to variables in Figma
2. Design tokens (Atlassian Design)
3. Переменные в Figma (Видео)
4. Токены в дизайн-системах (Mail. Ru Group)
5. Open Design Systems
6. Using CSS custom properties (variables)