Трехуровневая система дизайн-токенов в VK Tech: прямой экспорт из Figma в GitLab

Команда VK Tech внедрила трехуровневую систему дизайн-токенов для унификации интерфейсов бизнес-продуктов с разными техническими базами. Базовый уровень определяет общие палитры и типографику, семантический задает логические роли без привязки к конкретным элементам, а компонентный позволяет точечно настраивать параметры вроде обводки кнопок или отступов в модальных окнах. Подобное разделение дает возможность применять единую базу компонентов как для рабочих интерфейсов, так и для маркетинговых страниц, переключаясь между темами.

Процесс передачи визуальных изменений в код выстроен вокруг плагина, экспортирующего переменные из Figma в форматах json, scss, css и ts. Дизайнеры получили прямой доступ к репозиториям в GitLab, что позволяет им самостоятельно вносить минорные правки в интерфейс без синхронизации с фронтенд-разработчиками. В результате цикл обновления UI замыкается на дизайнере, а инженеры подключаются только на этапе ревью мерж-реквестов.

Масштабирование компонентного подхода увеличило общую базу до 2000 токенов, поддержание которых требует строгой иерархии зависимостей и неизменяемой структуры нейминга. При этом полная унификация не является самоцелью: продукты с исторически сложившимися независимыми дизайн-системами лишь адаптируют базовые визуальные правила бренда, поскольку тотальная миграция на новый тулкит признана экономически нецелесообразной.