Токены · проверки · перепись
Дизайн-система сайта
Отойти от набора незаметно нельзя: проверки останавливают отправку.
Один источник значений
Цвета, шкалы отступов и кеглей, радиусы и длительности лежат в JSON формата DTCG. Из него собираются переменные CSS, типы для кода и файл для Figma, поэтому имя цвета одно в макете, в вёрстке и в коде.
violetviolet-deepviolet-himistacidn-950
sp-1sp-2sp-3sp-4sp-5sp-6sp-8sp-10sp-12
Проверка на каждом коммите
Перед коммитом скрипт ищет значения мимо шкалы, цвет, записанный числом, тень руками и значок мимо реестра. Исключение возможно, но только с подписанной причиной: «фирменные цвета чужих продуктов в макетах кейсов» разрешены, «так красивее» нет.
Перепись собранных страниц
Перед отправкой браузер обходит собранные страницы и считает расхождения с набором уже по готовой вёрстке. Стало больше, чем было, отправка останавливается, и в отчёте видно, какой элемент и каким значением.
Макет из тех же деталей
Фижма собрана на элементах этой же системы, поэтому макет, который в ней нарисован, уже состоит из того, что есть в коде. Новый компонент появляется сразу в обоих местах.