Токены в дизайне. Или волшебная палочка ускоряющая работу дизайнеров и разработчиков в 2 раза

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

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

Но, как обычно, когда пытаешься найти что-то стоящее по теме – напарываешься на кучу дерьма, в котором сложно разобраться. Без шуток: чтобы понять, как передать токены разработчику, ушло минимум 30 минут, хотя, казалось бы, что там сложного в этом плагине, кнопку нельзя разглядеть что ли?

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

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

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

Простыми словами

У вас есть кошка, ее зовут Лола, но также вы ее называете Лолита, Лоли и Сладенькая. Подумайте о дизайн токенах, как об имени кошки.

Вместо использования сложных описаний элемента, таких как HEX код, размеры в пикселях и тд, мы даем элементам имена.

Чуть более сложными словами

Контакт — это токен. Если мы меняем номер, то токен меняется и все функции в телефоне меняются. Теперь написать сообщение, позвонить, подгрузить контакт в соц. сети будут изменены автоматически.

Благодаря токенам дизайн файл легко переносится в код одним нажатием кнопки (делаем мы это благодаря плагину).

Методология атомарного дизайна

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

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

Как это для разработчика?

Раньше: нужно было открыть Фигму и забрать стили, посмотреть отступы, понять и уточнить, что поменялось и тд. DEV MODE чуть упростил задачу, но не настолько, как это позволяют токены.

Сейчас: разработчик получает обновление прямо в свой репозиторий. Теперь при любых изменениях дизайнеру всего лишь нужно нажать одну кнопку. ПАМ и вот уже верстка сократилась до 3 минут, а дизайн стал пиксель перфект и тратить время на дизайн-ревью не нужно.

Ооооххх как же мы любим лениться. Правда?))

А еще работа с переменными в Фигме позволяет очень быстро адаптировать ваш дизайн в Dark mode и под разные разрешения. Это кайф! Очередной кайф после автолейаутов.

Разберемся в очередности выполнения данной задачи. Потому что не сейчас, так потом вы просто обязаны понимать в данной теме! Рано или поздно вас настигнет волна незнания и гештальт придется закрывать.

1. Сначала создаем переменные (важное уточнение, чтобы вы не путались, мы создаем переменные variable, а потом преобразуем их в токены tokens, которые в свою очередь разработчики уже видят в формате кода).

Правый угол, иконка настроек Local variables.

А далее вам откроется всплывающее окно, где создаются эти переменные.

Collections — отвечают за коллекции переменных (там располагаются основные переменные и токены, которые ссылаются на эти переменные — они в связке)

Есть несколько типов переменных — цвета, цифровые значения (размеры, отступы, скругления и тд), текстовые переменные и значения (true/false)

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

Созданная коллекция с основными переменными может выглядеть так.

Наименование переменных — должны быть стандартизированы и согласованы с разработчиками. Если вы изначально называли ваши элементы дизайн системы корректно, то разобраться в нейминге не составит труда. Но если вам нужна помощь, то можно и нужно обратиться к разработчикам. Они точно скажут, какие названия переменных для каждого элемента используют в коде. А также я нашла одну статью, которую вы можете прочитать (очень объемная) — ссылка

Назначение переменных элементам

У всех элементов, включая слои, вы можете найти в свойствах ромбовидные значки, которые отвечают за привязку переменной к стилю.

3. Создание токенов. Токен — это еще одна коллекция в дополнение к Global из примера выше.

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

Таким образом при изменении основных параметров переменных, они автоматически подгрузятся в токены и вам не придется по сто раз переносить значения.

4. Передача данных разработчику. КАК? Для этого нужно разобраться в плагине Token Studio (на самом деле разные источники предлагают разные плагины, но я и мои коллеги пользуются именно этим).

Запускаем плагин и импортируем переменные:

Далее выбираем наш набор токенов (внимание на галочки).

И отправляем его в гитхаб разработчиков (перед этим конечно нужно приконнектиться к репозиторию — все возможные варианты представлены в селекте)

Вуаля! Вы прекрасны!

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

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

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

Инструкция для разработчиков (на англ) — ссылка
Подписывайтесь на мой канал, там больше инфы простыми словами для дизайнеров — Катя вдохновляет