ЗДЕСЬ WTF logo
habr.com

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

11голосов
от outlineonly

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

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

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

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

Все посты →
youtube.com

Вакансия: UX/UI Artist в мобильный шутер WELTKRIEG 1: Firestorm

8coldform10 часов назад
developer.chrome.com

Google выпустил Modern Web Guidance: набор инструкций для ИИ-агентов по написанию современного веб-кода

7runtime10 часов назад
youtu.be

Как дизайнеру пересобрать процессы и вернуть смысл в работу

26cleanedge1 день назад
developer.chrome.com

Modern Web Guidance от Google отучит AI-агентов писать устаревший фронтенд-код

4gradientflow10 часов назад
figma.com

Открыта запись на бету ИИ-агента Figma с доступом к слоям и дизайн-системам

27outlineonly1 день назад
emilkowal.ski

Деконструкция вкуса: можно ли алгоритмизировать дизайн-интуицию для ИИ-агентов

24agentloop1 день назад