Как Paradigm и VKUI стали одной дизайн-системой

Рассказываем, как взяли лучшее из двух крупных систем и преодолели технические ограничения при слиянии.

Paradigm — одна из первых российских дизайн-систем: она существует уже около 10 лет и постоянно развивается и обновляется. Благодаря организации и принципам, заложенным в самом начале, даже после ребрендинга компании Paradigm остается основной системой для Почты, Облака, Календаря, Заметок и Задач от Mail.ru.

До ребрендинга компании Mail.ru Group в VK дизайн-система Paradigm использовалась как основная во многих продуктах. Исключением были продукты ВКонтакте — у ребят была собственная библиотека React-компонентов VKUI. Именно с ее помощью создавались приложения ВКонтакте и сайт vk.com.

После ребрендинга появилась стратегическая необходимость в более удобной интеграции проектов с точки зрения не только бизнеса, но и пользовательского опыта. Некоторые продукты стали адаптироваться под новый бренд VK, например VK Мессенджер или VK Добро. Их командам нужно было быстро вносить изменения на уровне интерфейса — использовать единый набор иконок, палитру или шрифты.

Стремясь упростить интеграцию, команды начали использовать технологии и компоненты Mail.ru в сервисах ВКонтакте. Продукты, ранее использовавшие разные компоненты, начали думать о переходе на общую базу. Это привело к идее объединить существующие дизайн-системы.

Объединиться решили вокруг VKUI: ее исходный код был открыт, и все команды могли работать с ним без лишних доступов. В качестве основной технологии мы выбрали React — большинство проектов компании использовали именно его для работы с компонентами.

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

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

За основу мы взяли существующие дизайн-токены VKUI. Мы стремились не увеличивать их количество, но сохранить при этом достаточно цветов для компонентов. Поскольку VKUI поддерживает и темную, и светлую тему, некоторые цвета дублировались. Чтобы понять, как быть с дублями, команда дизайн-системы Paradigm поехала в питерский офис — работать вместе с дизайнерами ВКонтакте. В итоге мы выделили 120 токенов цветов и типографики, которые покрыли все компоненты и стали общими для Paradigm и VKUI.

Так обе дизайн-системы получили базовые темы для разных брендов: для продуктов под брендом VK базовой темой стала VK base, а для сервисов Mail.ru — Paradigm base. У тем один и тот же набор токенов, который отличается только значениями. Таким же образом мы сохранили акцентные цвета и особенности типографики.

Такой подход позволил нам объединить лучшее из двух дизайн-систем. Из VKUI мы взяли работу с темными и светлыми темами и адаптивные компоненты. Из Paradigm — механизм генерации цветов состояний и архитектуру тем проектов.

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

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

Чтобы сохранить общие процессы в работе с токенами мы разработали единый подход к их добавлению и наименованию. Мы описали структуру имени и все его составляющие с параметрами. Использование такого подхода позволяет по названию определить, что это за токен и для чего он используется. Например, для токенов с прозрачностью мы добавляем специальную метку, чтобы отличать их от остальных.

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

Перейдем от разработки к дизайну. Как мы знаем, для дизайнера продукта основным инструментом является Figma, а для работы с дизайн-системой используются отдельные Figma-библиотеки. Вы можете посмотреть, как устроены наши библиотеки, в Community — Paradigm и VKUI.

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

Токены и параметры компонентов у нас одинаковые, так как эти же значения использует и разработка. Но если все объединить внутри одной библиотеки, настройка компонентов станет сложнее. Variables позволяют быстро менять значения переменных, но это требует больших ресурсов для работы и поддержки.

Разделив библиотеки, мы сообщаем дизайнерам: если вы работаете с брендом ВКонтакте или VK — для вас подходит VKUI library, для работы с проектами Mail. ru — Paradigm base.

Используя разные библиотеки, мы можем дополнять их специфическими компонентами для наших продуктов. Например, общая библиотека VKUI содержит элементы мессенджера, а для Paradigm можно добавить портальную навигацию или ячейку письма.

Мы постоянно обмениваемся лучшими практиками между командами. Например, при обновлении библиотеки Paradigm команда дизайна Mail.ru подробно описала параметры каждого компонента c допустимыми вариантами использования и примерами. Команде ВКонтакте такой подход понравился, и теперь подобной документацией наполняется и библиотека VKUI. При добавлении новых компонентов мы также синхронизируемся и стремимся, чтобы эти компоненты решали проблемы разных продуктов.

Чтобы было удобнее обсуждать вопросы, которые неизбежно возникают в процессе совместной работы, мы создали дизайн-комитет VKUI. В него входят дизайнеры из разных команд, работающие над развитием и обновлениями VKUI и объединенной дизайн-системы.

Самый сложный процесс для нас — добавление новых компонентов. Так как дизайн-системы объединились, теперь они должны соответствовать требованиям большего количества продуктов и быть универсальными. К тому же в разработку компонентов включаются разные команды. Поэтому со стороны дизайна макет создается со всеми параметрами сразу, и чтобы угодить всем, и этих параметров иногда получается довольно много.

Мы учитываем темную и светлую версию, адаптивность, размечаем компонент токенами и пишем подробную документацию. Все эти подготовительные работы проводятся перед тем, как компонент переходит в разработку, поэтому от идеи до реализации теперь проходит больше времени. Зато в итоге мы получаем компонент, который позволяет решать разные задачи в нескольких продуктах.

Хороший пример такой универсальности — компонент Accordion. При переходе на VKUI в почтовой авторизации команда разработки заметила, что подходящего компонента нет. В то же время у ВКонтакте был запрос на компонент с похожей механикой. Мы смогли объединиться и быстро его добавить. Благодаря токенам для разных проектов он выглядел по-разному. Мы смогли сохранить его визуальные особенности и аккуратно встроить в интерфейс.

Несмотря на то, что теперь Paradigm и VKUI — это одна объединенная дизайн-система компании VK, Paradigm продолжает развиваться и обновляться и как независимый проект. Ведь дизайн-система для нас — не только технический инструмент или необходимость в строгом соответствии гайдлайнам, но и ценности, стандарты и, конечно же, поддержка и быстрая реакция на изменения в продуктах. Есть несколько направлений, в которых нам предстоит еще много работы.

Нужно обновить сайт. Документация Paradigm давно стала примером для многих команд и дизайнеров. На сайте мы описали основные приемы визуального языка, анимации и работы с доступностью. Эта информация остается актуальной, а некоторые описания в ближайшее время будут дополнены. Также мы опишем все обновления, связанные с переходом на компоненты и токены VKUI.

Нужно внести обновления в документацию. У нас есть большая база знаний, которая продолжает расти. Статьи о лучших практиках работы с компонентами, схемы внутренних процессов, документация по именованию токенов и для разработчиков, которые работают с Paradigm — все это должно обновляться и поддерживаться.

Совершенствование самих компонентов. Мы продолжим создавать и развивать внутренние компоненты Paradigm, которые необходимы только для продуктов Mail.ru под управлением нашей дизайн-системы.

В большой компании создание и поддержка единой дизайн-системы — задача не из легких. Различные продукты со своими требованиями и разными брендами делают визуальное разнообразие проектов неизбежным.

Однако есть общий набор компонентов с одинаковыми функциями, отличающихся лишь цветом, скруглениями или размерами текста. Кнопки и поля ввода на всех сайтах и приложениях функционируют одинаково, несмотря на визуальные различия. Эта общая структура и должна быть основой любого компонента. Чем проще — тем лучше. История Paradigm именно об этом.

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

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

Наша основная идея при создании дизайн-системы — это гибкость. Требования рынка и потребности самих людей постоянно меняются и наши дизайн-инструменты должны быть готовы к этому. Дизайн-система должна облегчать работу, а не усложнять ее.

В этой статье мы рассказали, как удалось сохранить принципы, заложенные в основу Paradigm и пройти путь объединения с VKUI в общую дизайн-систему VK. Единая компонентная база в разы ускорила процесс разработки, а изменения, которые происходят в разных дизайн-системах теперь обогащают библиотеки и VKUI и Paradigm.