Как Paradigm и VKUI стали одной дизайн-системой
Рассказываем, как взяли лучшее из двух крупных систем и преодолели технические ограничения при слиянии.
Рассказываем, как взяли лучшее из двух крупных систем и преодолели технические ограничения при слиянии.
Статья прикольная, но есть множество вопросов) Если статья написана для пользы, а не рекламы ВК. Например: как вы организуете токены, используете только нативные Figma или совместно с плагином Tokens Studio, если да то почему? Что за метка для токена с прозрачностью, какой для нее нейминг? Как проходит ревью и когда компонент попадает в общую ДС, а когда останется внутри продукта, как организованы токены типографики и отступов? Удалось ли решить вопрос с токеном размера шрифтов, это когда ты хочешь поменять размер, а подставляется числовое значение. Если да, то как?)
Да, к сожалению формат и несколько редакторов не позволили уместить все. Теперь по вопросам,
Раньше использовали Tokens Studio для синхронизации, но теперь перешли на Variables. Есть стремление во всем использовать нативные решение + переключение тем теперь – просто сказка.
Для токенов с прозрачностью у нас добавляется в названии Alpha или Overlay. На уровне репозитория есть проверка этого тега. И если в коде значение задано с прозрачностью, а тега в названии нет, то такие токены не даст залить в общий репозиторий.
Компонент переходит в общую дизайн–систему когда он требуется более чем двум проектам. Сначала ревью на уровне дизайна проводит команда дизайна дс, затем уже обсуждаем технические моменты.
Для некоторых компонентов есть токены для размеров. Они добавлены в репозиторий, но в Figma пока не поддерживаем.
Типографика пока добавлена просто стилями в Figma. Для нее пока не используем Variables, поскольку у нас значения размеров шрифтов в основном одинаковые. При этом в стилях есть разделение на мобильную и десктоп версию. Как устроена библиотека Paradigm можно посмотреть в Figma Community. Там версия уже с Variables и типографикой.
https://www.figma.com/@paradigm