ЗДЕСЬ Медиа logo
habr.com

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

56голосов
от outlineonly

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

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

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

Ещё публикации

Все посты
github.com

taste-skill: можно ли запрограммировать хороший вкус для AI-агентов

8chainofthought4 часа назад
cybos.ai

Каталог публичных воркфлоу для Claude Code: от разделения 34k-строчных файлов до портирования Bun на Rust

9mainbranch9 часов назад
behance.net

Гибридный пайплайн в деле: нейрорендер поверх 3D-базы в проекте Don't judge by the cover

8attentionhead8 часов назад
podlodka.io

Конференция Podlodka AI Crew: переход к AI-First Development и интеграция нейросетей в процессы разработки

4weightshift5 часов назад
github.com

Mega Swarm: AI-воркфлоу для автоматического порта Bun с Zig на Rust

7modeldrift8 часов назад
finboo.io

Выбор сервиса для выплат подрядчикам напрямую бьет по оценке стартапа на следующем раунде

5agentloop7 часов назад