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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 — это убирает много рутины, повышает точность, повышает скорость работы и приближает библиотеки фигмы к коду ещё сильнее.
Я не рекламирую никаких телеграмм каналов, курсов, и выдаю все знания сразу - так что лучшей оценкой будет ваш ❤ Спасибо.