Подробный разбор Variables

Расскажу о нюансах Variables с точки зрения разработки дизайн систем. Запасаемся попкорном и начинаем морально готовить руководство к рефакторингу макетов)

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

Перед прочтением данной статьи рекомендую ознакомиться:

• Подробный гайд как сделать темную тему с помощью variables фигмы — по верхам описан базовый функционал, подойдет для начального знакомства.
  
• Правильное хранение палитры в дизайн системе — тут я описываю Alias систему для палитр, и если вы сделали у себя на проекте так же то для вас всё будет гораздо проще.
  
• Variables playground — шпаргалка от фигмы, где можно все пощупать ручками и поиграться.

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

Variables = Design Tokens (что бы там не говорили), поэтому далее в статье я буду использовать термин "токены", так как это более верное наименование, а учавствовать в терминологических спорах самое бессмысленное занятие).

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

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

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

Какие возможности у нас появляются:

• Быстрая смена тем. Экономия времени 100%, вся работа сводится к одному клику (если конечно вы уже пользуетесь алиас-стилями).
• Создание адаптивов. Экономия времени тут процентов 70%, зависит от структуры вашего шаблона. Я практически любую страницу сразу собираю из организмов и в них закладываю вид в адаптиве. Wrap тут как раз подвезли для еще более легкого создания адаптивов.
  
• Смена локализации. Мало кому нужна, но на мультиязычных проектах всегда есть "проверочный" язык — у нас это греческий, у кого-то немецкий. Токены в этом случае можно загрузить из google sheets и других мест, поэтому вам не нужно будет копипастить значения а просто выгрузить из системы переводов нужную пару.
• Благодаря настраиваемых скоупам применения токенов вы уже не встретите что кто-то применил цвет текста на иконку или фон — это можно ограничить несколькими галочками... (coming soon)

Сразу в глаза бросается отсутствие токенов текстовых стилей. Так как для мобильных адаптивов существует дублирующий набор типографики. Но собственно функционал в beta режиме и вот что нам обещают в будущем:

• Image variable type - токены изображений. В целом пока что у меня хорошо получается делать смену изображений через компоненты.
• Typography variable type - те самые токены текстовых стилей. Обещают свойства для наименования шрифта, размера и интерлиньяжа... в списке не вижу веса, но думаю вещь базовая и само собой разумеющаяся.
• Additional property fields - новые поля "с гаечкой": толщина обводки, прозрачность, эффекты.
  
• Additional component property types - тут нам обещают расширить возможности работы с компонентами. Сейчас вы не можете управлять properties ваших компонентов, только variants и только с параметрами true/false.
  
• Extended collections - работа с суб-брендами.
  

Информация взята отсюда, так что все официально.

Так же у нас есть ограничения по тарифным планам —

Так что только для pro и выше + в энтерпрайз доступно больше модов и api.

Исходя из вышесказанного фронт работ у нас следующий:

1. Перенести палитру и завести алиасы,
2. Сборка шаблона для адаптивов (если у вас вэб),
3. Работа с основной библиотекой компонентов,
4. Применение к макетам.

С первым пунктом нам помогут плагины.

Styles to Variables Converter копирует ваши локальные стили в variables и связывает их. То есть работает как - запускаете плагин и проверяете что стили скопировались, пушите обновление и применяете его во всех файлах. Пока что все выглядит будто бы ничего не изменилось, но плагин связал палитру с токенами. Теперь можете возвращаться в макет и удалять локальные стили, после вы увидите что вместо них везде используются уже токены. Пушите обновление ещё раз.

Есть так же Colors to Variables, Convert Color Styles to Variables и другие.

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

Пока что я не нашел адекватного плагина который бы предоставлял синхронизацию уровня Token Studio. Есть уже достаточно плагинов для импорта/экспорта JS или CSS, но ни одного с синхронизацией с GitLab или GitHub. Так же повторный импорт не обновит токены а создаст дубль коллекции ровно с такими же параметрами. Так что пока что можно только импортировать JS CSS, но не все плагины умеют импортировать например Number токены — будьте внимательны.

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

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

Sheets to Variables — переносит значения из эксель таблицы, пока не работает с модами (переносит только параметр и его значение).

Link spacing variables — автоматически связывает пэдинги со значениями в выбранной коллекции.

Не всегда на виду места куда можно применить variables. Например bolean свойства можно применить на видимость — для этого нужна нажать на "глазик" правой кнопкой мыши. Таким образом вы сможете настроить видимость элемента в зависимости от темы или созданного условия.

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

Так же не очень очевидно что можно задавать min/max width/height через number

Сильно облегчает работу над адаптивами - теперь можно при помощи врапа не делать отдельными стоками ваши блоки и при этом задавать им условия для перестроения. На примере я ввел в систему параметры контейнера который занимает либо всю ширину, либо половину. Для мобильных брэйкпоинтов это значение одинаковое чтобы все блоки становились во всю ширину и друг под другом при помощи wrap. И это все внутри одного слоя с автолэйаутом! Теперь будет меньше контейнеров на макете что не может не радовать.

Штош... лично меня это обновление вдохновляет и я точно буду переводить нашу дизайн систему на это, но если вы в целом работаете с Token Studio или же вас вполне устраивает то как компоненты работают сейчас — как я писал это не критически важное обновление. Некоторых вещей ещё не хватает и когда они выйдут неизвестно. Но всё же я уже начну переводить наши библиотеки на variables — это убирает много рутины, повышает точность, повышает скорость работы и приближает библиотеки фигмы к коду ещё сильнее.
Я не рекламирую никаких телеграмм каналов, курсов, и выдаю все знания сразу - так что лучшей оценкой будет ваш ❤ Спасибо.