Дизайн токены
Cобирали токены сразу на переменных (когда мы приступили к проектированию ДС, Figma только что зарелизила Variables), это в разы ускорило проектирование, в том числе темной/светлой темы.
Типографика подбирались с запасом под масштабирование на разные страны с широким набором шрифтов. Система цветов собиралась семантически от возможных мест использования.
Для всех токенов вначале создавались примитивы, на основании которых уже строилась семантика.
Кросс-функциональные библиотеки
Всего у нас получилось три библиотеки компонентов в Figma, которые взаимодействовали между собой:
Components library
Content library
Design mode library
Библиотека Design mode
Так как пользователи сервиса могут настраивать кастомные темы для своих проектов, была разработана отдельная библиотека (Design mode). В ней мы описывали для разработки поведение токенов/компонентов в зависимости от выбранных настроек дизайн-мода, например: автоматический подбор цвета primary и secondary текстов в зависимости от кастомной подложки и акцентного цвета.
Простым языком, пользователь мог работать в ЛК в светлой теме, а дизайн воронки сделать в тёмной или кастомной теме. Переключение темы в ЛК не должно влиять на тему самой воронки и наоборот.
Слоты
Мы использовали Слоты при проектировании дизайн-системы. С помощью слотов мы сократили количество компонентов на верхнем уровне, что позволило нам быстрее и удобнее проектировать экраны и сценарии.
