Дизайн-система на токенах в Figma, коде и проде - Константин Подрубный, Wrike

Frontend Conf 2021 frontendconf.r...
Про преимущества использования дизайн-систем не рассказывал только ленивый. Но не все рассказывают, как в итоге больно внедрять её в реальный продукт. И как потом невыносимо сложно её апдейтить после внедрения, ведь связь между дизайн-системой в макете и конечной реализацией часто рвётся.
У нас продукт на сотни экранов и живая дизайн-система, которая постоянно улучшается. И нам нужно было решить эту проблему основательно. Мы реализовали дизайн-систему на сквозных токенах, единых для инструментов дизайнера и разработчика, которые создаются, синхронизируются и обновляются без написания даже строчки кода. Достаточно изменить элемент в Figma, и он (после ревью, конечно) в несколько кликов изменится в реальном интерфейсе клиента. Подробно расскажу, как мы это сделали и стоит ли вам сделать так же (Да!).

[@pavelfomchenko7274]

Прикольно это смотреть после выхода переменных в фигме)

[@хуснитдинмахаматов-п4р]

Очень полезно теперь задумался о внедрении токенов в свои продукты Спасибо за урок

[@АндрейКарякин-и1ы]

Очень круто, а подскжаите плиз, спустя два года плагины уже пошарены публично? :)

[@NutsBeast]

Подскажите, вы сделали общедоступными ваши плагины Wrike Tokens, Wrike Figma Theme Switcher?

[@user-ou2lp9zs2r]

А как можно получить скрипт на импорт токенов из фигмы?

[@AndreyMikhelev]

Какой библиотекой вы конвертируете экспорт из фигмы (через рестапи) в style dictionary формат?

[@NutsBeast]

Можно ли ознакомиться с большим списком ваших токенов чем показано на слайдах?

[@vladyslavvoitovych9058]

К сожалению их нет в публичном доступе ( Но вы всегда можете посмотреть на системы, которые доступны: - www.duetds.com/tokens/ - www.lightningdesignsystem.com/downloads/ - design.bitnami.com/category/Design-Tokens/

[@NutsBeast]

За что в токене отвечает уровень "Важность (0/10.../100)"?

[@WrikeTechClub]

Добрый день! Наша схема коэффициентов «Важность» похожа на другие схемы цветовых оттенков в разных цветовых палитрах. Например, Material design имеет коэффициенты 100, 300, 400, 600 … Есть палитры, которые просто пронумерованы от 1 до 10. Такой коэффициент помогает различить оттенки синего от контрастного до менее контрастного. Например, neutral-1 ( #000000 ) будет куда контрастнее или ярче чем neutral-2 ( #111111 ). В нашем случае мы сделали шаг больше (от 10 до 100), чтобы иметь гибкость и возможность вставить новые промежуточные оттенки цвета между 10 и 20 (например, 15). Коэффициент называется важностью, потому что мы выделяем оттенки цвета по разным уровням восприятия интерфейса. Например, цвет primary button (accent) будет окрашен цветом с уровнем важности 0 или 10, а вот ее состояние disabled будет использовать более тусклые оттенки цвета 45-65. В нашем случае 0 - самый высокий коэффициент, 100 - самый низкий.