Дизайн-система и Тёмная тема

Аудит и дизайн-долг

За полтора года активного развития Ответов накопился дизайн-долг: интерфейсы перегрузились, а многие компоненты отклонились от стандартных гайдлайнов Paradigm из-за особенностей продукта.

Чтобы ускорить работу над макетами и подготовить UI к бесшовному внедрению тёмной темы, потребовалось создать автономную локальную библиотеку и оптимизировать архитектуру UI-кита.

Задачи рефакторинга:

• Перейти на атомарный подход структуры библиотеки;

• Переработать базовые цвета и актуализировать токены под тёмную тему;

• Унифицировать и актуализировать стили типографики;

• Объединение решений VKUI и Paradigm с уникальными кастомными компонентами;

• Провести аудит, очистку и структурировать накопившиеся иконки и компоненты со всех страниц сервиса;

• Внедрить использование Figma Slots для сборки сложных конструкций.

Архитектура библиотеки

Разделили систему на 4 изолированных файла библиотеки – Атомы, Иконки, Молекулы, Компоненты с четкой иерархией связей для снижения нагрузки на Figma и удобной параллельной работы.

Из файла «Атомы» подтягиваются фундаментальные стили: цветовые токены, типографика, переменные отступов и настройки теней.

В «Молекулах» собрали базовые интерактивные элементы: кнопки, аватарки, табы, ячейки, инпуты и формы для иконок, перенесенные и адаптированные из библиотеки Paradigma.

В «Компонентах» зафиксировали сложные сборные конструкции: посты, ответы, меню, навигацию, инфоплашки и нотификации.

Перенесли и связали с новыми атомами уникальные сущности из старой локальной библиотеки (посты, галереи), полностью обновив устаревшие зависимости.

Оптимизировал компоненты под задачи продукта: упростили верстку между мобильной и десктопной версиями, сократили число избыточных вариантов по размерам и переименовали нерациональные настройки Paradigma в понятные свойства.

Выделил отдельную библиотеку кастомных векторных иконок, отрисованных вручную под единую сетку сервиса.

Внедрил Figma Slots в компонеты с частой сменой контента (тело поста и ответа, поля ввода, меню, модальные окна, списки пользователей и пространств), чтобы кастомизировать наполнение без отвязки компонентов от родителя.

Настройка палитры для Тёмной темы портала

После релиза редизайна портала, тёмная тема стала самым запрашиваемым функционалом как со стороны пользователей, так и со стороны стейкхолдеров. Чтобы реализовать запрос без раздувания сроков разработки, совмесил внедрение темы с созданием новой библиотеки компонентов.

Сохранил исходную структуру и названия цветовых токенов, изменив только их значения для тёмной темы. Это позволило разработке включить поддержку темы без переподвязки компонентов в коде.

Переработал порядка 90 цветовых токенов, подобрав уникальные акцентные и фирменные оттенки. Это помогло задать выразительный визуальный стиль «Ответам» и отстроиться от базовой корпоративной палитры Paradigm и других продуктов компании (VK, VK Video, почта Mail).

Провел аудит контрастности всех пар цветов на соответствие стандартам WCAG и проверил их корректное отображение на каждом элементе портала.

Спроектировал пользовательский флоу переключения темы и отрисовал кастомный сет иконок (включая иконку солнца), наглядно отражающих текущую тему интерфейса.

Передача в разработку и тестирование

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

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

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

Результат

Запуск тёмной темы вызвал мгновенный отклик у аудитории: в первый же день релиза её включили более 15 000 пользователей, что составило порядка ~1% DAU и подтвердило высокий спрос на ночной режим чтения.

Для разработки внедрение обновлённой токенизации и единой структуры позволило сократить трудозатраты на сборку макетов и новых сценариев в два раза — оценка задач снизилась с 2 Story Points до 1 SP. Полная синхронизация токенов между Figma и кодом минимизировала риск визуальных расхождений в интерфейсе и заложила гибкую архитектуру, позволяющую легко добавлять новые цветовые токены в будущем.

Переход на слотовую систему (Slots) существенно ускорил сборку продуктовых концептов за счёт гибкой подмены контента внутри сложных компонентов. Проработанная палитра токенов светлой и тёмной темы с единым неймингом упростил проверку экранов для дизайнеров и разработки.

Оптимизация базовых компонентов — сокращение количества избыточных вариантов и слоёв заметно снизила нагрузку на страницах Figma и ускорила загрузку тяжелых рабочих макетов. Для нашей команды из двух дизайнеров новая библиотека стала единым удобным фреймворком, который кардинально упростил ежедневное проектирование и повысил комфорт работы над новыми фичами.