Экосистема из 6 B2B-продуктов развивалась без единых стандартов — каждый сервис выглядел по-своему.
Создал дизайн-систему на Atomic Design с токенами и тёмной темой, объединив все продукты и сократив вопросы от фронта вдвое
Дизайн-система компании
Topseller — это экосистема из 6 B2B-продуктов для селлеров маркетплейсов. Каждый сервис развивался отдельной командой, часто без дизайнера
К чему это привело:
- Каждый продукт выглядел по-своему
- Дизайнеры вручную копировали UI-элементы → ошибки и несоответствия
- Пользователям приходилось переучиваться при переходе между сервисами
- Фронтенд тратил время на обсуждение базовых UI-решений вместо разработки фич
- Отсутствовали токены, тёмная тема и единая архитектура компонентов
Контекст и проблема
Пример проблемы: Таблицы в разных сервисах имели разные отступы, цвета строк, высоту ячеек, стили кнопок.
Как выглядело ДО
Цели
Бизнес-цели
- Объединить 6 продуктов единым визуальным и UX-языком
- Ускорить работу дизайнеров и разработчиков
- Сократить количество ошибок при передаче макетов
- Заложить основу для масштабирования и поддержки цветовых тем (включая тёмную)
Ограничения
- 3 месяца на разработку
- Нужно было внедрить систему без остановки работы над продуктами
- Отсутствие выделенного фронтенд-ресурса для полной интеграции
Подготовка
- Проанализировал интерфейсы всех 6 продуктов
- Составил список повторяющихся элементов и проблемных зон
Аудит продуктов
Ключевые находки
- Одни и те же компоненты (таблицы, кнопки, формы, модальные окна) выглядят по-разному
- Нет единых стандартов для отступов, цветов, типографики, иконок
- Отсутствуют токены → невозможно быстро внедрить тёмную тему или ребрендинг
Этап 1
- За основу взял Atomic Design
Проектирование архитектуры
Что сделал
Составил карту сущностей: атомы → молекулы → организмы
Создал систему стилей с токенами:
- Цвета (семантические роли: primary, danger, surface вместо HEX)
- Типографика (уровни и смысловые роли)
- Отступы и сетка
- Тени, адаптированные под светлую и тёмную темы
Этап 2
Сборка библиотеки
- Подключил систему переменных Figmа
- Реализовал поддержку светлой и тёмной темы из коробки
Переменные для токенов
Этап 3
Раздел стилей
Скриншот из Figma
- Создал библиотеку по принципу атомного дизайна
- Показал все состояния компонентов (default, hover, active, disabled, error) для удобства разработчиков
- Использовал компонентную сетку для лучшей навигации
Компоненты со всеми состояниями
Этап 4
Логическая группировка
- Структурировал библиотеку по разделам
- Добавил документацию и примеры использования
- Создал библиотеку иконок как компоненты в Figma
- Подготовил иконочный шрифт для фронтенда
Иконки
Этап 5
Коммуникация и внедрение
Организовал процесс согласования с фронтом
Обсудили подход к цветам и неймингу, синхронизировали структуру компонентов между Figma и кодом
Внедрил Changelog
Создал страницу с датированными изменениями в библиотеке － команда всегда видит, что обновилось
Организовал процесс процесс работы
Дизайнеры подключают библиотеку и следуют стандартам, новые компоненты добавляются через согласование, ведение дизайн-ревью с разработкой
Как проходил релиз
Поэтапное внедрение
Система внедрялась постепенно — сначала в новые разделы
Старые интерфейсы переводились на систему по мере рефакторинга
Результаты
Скорость сборки макетов: значительно выросла
По заявлению Lead Front-End, скорость разработки каждой новой сущности выросла в 2-3 раза
Количество вопросов от фронта: сократилось вдвое
Дизайн-ревью: с 2-3 итераций до одной
Масштаб внедрения
Система внедрена во все новые разделы, подключена к 6 сервисам. Продукты обрели визуальную консистентность
- Быстрое внедрение за 3 месяца
- Система оказалась масштабируемой — легко добавлять новые компоненты
- Команда фронтенда активно участвовала в процессе
Что получилось хорошо
Что можно было сделать лучше
Процесс миграции семантических ролей
Не согласовал заранее с фронтом процесс быстрой миграции новых цветовых ролей в будущем → больше итераций при внедрении в код
White label подход
Стоило исследовать возможность white label для адаптации под партнёрства и франшизы — это открыло бы новые бизнес-возможности
Автоматизация синхронизации
Не интегрировал токены Figma напрямую в кодовую базу → синхронизация выполнялась вручную, что иногда приводило к расхождениям
Ретроспектива
