Дизайн-система VKUI

Контекст и импульс к объединению

Всё началось в момент, когда компания входила в фазу масштабного экосистемного ребрендинга. На тот момент у нас существовало две фундаментальные дизайн-системы:

• VKUI — React-библиотека компонентов, которую развивала отдельная выделенная команда специально под нужды мобильного приложения и веб-версии ВКонтакте.
• Paradigm — система, которая развивалась исторически с 2012 года и служила визуальным ядром для продуктов Mail (Почта, Облако, Главная страница).

Содержать и параллельно разрабатывать две самостоятельные дизайн-системы требовало колоссальных ресурсов фронтенда и создавало визуальный разрыв при переходе пользователей между сервисами. Чтобы решить обе проблемы, было принято решение объединить системы в одну — сделать VKUI основным техническим и компонентным стандартом компании, а Paradigm интегрировать как одну из базовых тем.

Объединение токенов

Объединить две зрелые системы невозможно просто волевым решением в Jira. Чтобы прийти к единому знаменателю, мы собрались вместе с командой разработки и дизайна ВКонтакте в их офисе и начали сложный процесс совместной синхронизации.

Основная задача состояла в том, чтобы спуститься на самый нижний уровень — к токенам цвета и типографики. Мы буквально вручную разбирали каждый оттенок, сравнивали наименования, искали пересечения и убирали дубли.

За 4 дня непрерывных дискуссий и разборов нам удалось договориться об MVP-наборе токенов. Он включал в себя порядка 160 токенов в тёмной и светлой темах, которые полностью покрывали визуальные потребности продуктов Mail и ВКонтакте.

Мне доверили собрать самую первую версию библиотеки и наполнить её цветами. Мы вместе с Ваней Барышевым и Лешей Зайцевым из ВКонтакте спроектировали логику связей токенов, заложили правила именования (naming convention), затем я написал документацию. Так появился фундамент для общего репозитория токенов, поддерживающего как глобальные темы (Light / Dark), так и кастомные темы для отдельных продуктов.

Сборка компонентов и единый язык (Design × Dev)

Когда уровень токенов был зафиксирован, мы перешли к компонентной базе. В качестве пилота мы взяли Кнопку (Button) и пошагово собрали все возможные её состояния, размеры, вариации иконок и эффекты. На её примере мы отточили подход к неймингу параметров. Для нас было критически важно сформировать Single Source of Truth — единый понятийный аппарат, чтобы дизайнер в Figma и разработчик в React-коде оперировали абсолютно идентичными пропсами и терминами.

Далее библиотека начала стремительно наполняться:

• Базовые UI-примитивы: Input, Checkbox, Switch, Radio, Avatar, Badge.
• Сложные элементы: Modal Card, Action Sheet, Segmented Control, Tabs.

На протяжении всей сборки мы работали в теснейшей связке с платформенной командой VKUI. Мы строго контролировали, насколько каждый новый компонент соответствует созданной системе токенов, и проверяли отступы.

Масштабирование и внедрение в продукты Mail

Моей ключевой практической задачей на этапе внедрения было масштабировать обновлённый VKUI на продукты Mail (Почта, Облако). Процесс миграции мы выстроили поэтапно, чтобы не останавливать продуктовые фичи:

1. Перевод макетов на токены: сначала мы перевели существующие файлы и экраны в Figma на новую систему токенов.
2. Внедрение продуктовых тем: бывали кейсы, когда стандартной палитры не хватало под специфические сценарии. В таких случаях я самостоятельно добавлял и прописывал продуктовые темы напрямую в общий репозиторий токенов.
3. Замена компонентов в коде: на этапе разработки инженеры постепенно заменяли устаревшие элементы интерфейса на базовые компоненты из библиотеки VKUI (Button, Input, Checkbox и др.).

Главным плюсом нового фундамента стало то, что продукты Mail сразу «из коробки» получили встроенную адаптивность и автоматическое переключение тёмной и светлой тем без необходимости писать кастомный код для каждого экрана. В ходе всего процесса я выступал связующим звеном — поддерживал постоянную коммуникацию между разработчиками VKUI и продуктовыми командами Mail.

Результаты

• Объединение экосистемы: две изолированные дизайн-системы превратились в единый платформенный стандарт, доступный в Open Source и Figma Community.
• Единая архитектура токенов: создана структура из 160+ токенов, поддерживающая тёмную, светлую и продуктовые темы компании.
• Ускорение разработки: продукты Mail получили гибкую темизацию и готовую компонентную базу, существенно сократившую time-to-market новых фич.
• Единый словарь: команды дизайна и разработки Mail и VK синхронизировали терминологию и процессы сборки интерфейсов.