Дизайн-системы
Контекст
VKUI — дизайн-система VK. Компоненты, токены, руководство по применению. Open-source React-библиотека на GitHub.
Продукты на VKUI: VK Мессенджер, VK Добро, Почта, Облако, Календарь Mail.ru. Плюс тысячи мини-приложений от сторонних разработчиков.
В 2022 году Mail.ru Group стала VK. Две независимые системы — Paradigm и VKUI — объединились в одну. 120 общих токенов. React как единая технология.
Моя роль
Работал внутри системы как дизайнер продукта. Собирал макеты из компонентов VKUI, использовал токены для переключения между платформами. Контрибьютил в библиотеку: предлагал доработки компонентов, фиксил несоответствия между Figma и кодом.
Архитектура библиотек
Шесть Figma-библиотек. Common — общие компоненты. iOS и Android — платформенные вариации.
Tokens Base — 3 компонента, 234 стиля, 171 переменная. Appearance Tokens — 519 стилей оформления. Icons Library — 4 150 компонентов.
Подключаешь нужные библиотеки к макету. Выбираешь платформу через токены. Компоненты адаптируются автоматически.
Система цветов
Каждый цвет в Figma соответствует токену в коде. Web: --vkui--color_text_accent. Android: VkTheme.colors.text.textAccent. iOS: UIColor.vkui.textAccent.
Токены группируются по области применения, не по значению. Текст, иконки, фоны, обводки — отдельные папки.
Типографика
Два font-family: fontFamilyAccent для заголовков, fontFamilyBase для текста. Три варианта веса на каждый.
Title 1 (24/28), Title 2 (20/24), Title 3 (17/22), Headline 1 (16/20), Headline 2 (15/20), Text (16/20).
Тёмная тема и платформы
Все компоненты собраны на цветовых токенах. Светлая и тёмная тема — переключение через Appearance. Один макет, два режима.
Пять платформ: iOS, Android, vkCom, Desktop, Auto. Переключение через токены — компоненты перестраиваются: радиусы, отступы, размеры контролов.
Компоненты и документация
Компоненты в Figma зеркалят код. Поиск через Assets, настройка через параметры: Size, Mode, Appearance, Disabled, Icon.
Рядом с каждым компонентом — документация. Четыре типа баннеров: «Полезно знать», «Важно», «Запрещено», «Разрешено». На страницах Styleguide — живые примеры с кодом.
Что вынес
Дизайн-система — не библиотека компонентов. Это контракт между дизайном и разработкой. Токен в Figma = переменная в коде.
Одна система обслуживает сотни продуктов. Ошибка в токене разъезжается на всю экосистему. Документация — не опция, а часть компонента.
Слияние Paradigm и VKUI — пример того, что объединить две системы сложнее, чем строить одну с нуля. 120 общих токенов потребовали месяцев аудита между командами.
Контекст
Plasma — дизайн-система SberDevices для экосистемы виртуальных ассистентов «Салют». Все приложения в экосистеме реализованы на Plasma.
Open-source монорепо на GitHub. TypeScript 78%, styled-components. Семь core-пакетов: plasma-ui, plasma-web, plasma-b2c, plasma-tokens, plasma-tokens-web, plasma-tokens-b2c, plasma-icons.
Моя роль
Работал с Plasma как дизайнер интерфейсов для устройств экосистемы Salute. Использовал токены и компоненты для создания Canvas Apps. Изучал архитектуру системы: как она масштабируется на устройства с разными моделями взаимодействия.
Компоненты
Кнопки, карточки, контролы, навигационные бары — всё в Figma-библиотеке. Каждый компонент масштабируется через токены под три breakpoints.
Токены и адаптивность
CSS-переменные с префиксом --plasma-*. Цвета, типографика, отступы, тени, радиусы.
Цветовые токены: поверхности, текст, кнопки, оверлеи. Состояния: hover, active, focus. Семантические: accent, success, warning, critical, info.
Три breakpoints: mobile (до 559px), tablet (560–959px), desktop (960px+). Токены масштабируются через медиа-запросы.
Архитектура пакетов
plasma-core — единый источник правды для значений. plasma-ui — компоненты для устройств (SberBox, SberPortal). plasma-web — для веб-приложений. plasma-b2c — B2C-адаптация.
Отдельные пакеты токенов под каждую среду. Storybook для каждого пакета. Документация на plasma.sberdevices.ru.
Типографика
SB Sans Text, SB Sans Cond Mono, SB Sans Text Mono. Типографическая шкала единая для всей экосистемы — текст выглядит одинаково на SberBox, планшете и в браузере.
React-компоненты заменяют стандартные HTML-теги. Вместо h1 — компонент с размерами из токенов.
Что вынес
Plasma работает на устройствах с голосовым управлением. SberBox — телевизор. SberPortal — экран на столе. Веб — классический браузер. Три модели взаимодействия, одна система компонентов.
Монорепо с семью пакетами — это дисциплина. Изменение в core требует проверки во всех зависимых.
Здесь я увидел, как дизайн-система масштабируется за пределы экрана. Голосовые интерфейсы, устройства без клавиатуры. Токены работают везде — если архитектура продумана.