Дизайн‑система компании
Экосистема из 6 B2B‑продуктов развивалась без единых стандартов — каждый сервис выглядел по‑своему.
Создал дизайн‑систему на Atomic Design с токенами и тёмной темой, объединив все продукты и сократив вопросы от фронта вдвое
Команда
Product Designer (я)
•
Front-End
Результат
2x
скорость разработки
Унификация сервисов
Контекст
Topseller — это экосистема из 6 B2B‑продуктов для селлеров маркетплейсов. Каждый сервис развивался отдельной командой, часто без дизайнера
Проблема
01
Каждый продукт выглядел по‑своему
02
Дизайнеры вручную копировали UI‑элементы → ошибки и несоответствия
03
Пользователям приходилось переучиваться при переходе между сервисами
04
Фронтенд тратил время на обсуждение базовых UI‑решений вместо разработки фич
05
Отсутствовали токены, тёмная тема и единая архитектура компонентов
Задачи
01
Объединить 6 продуктов единым визуальным и UX‑языком
02
Ускорить работу дизайнеров и разработчиков
03
Сократить количество ошибок при передаче макетов
04
Заложить основу для масштабирования и поддержки цветовых тем (включая тёмную)
Например: таблицы в разных сервисах имели разные отступы, цвета строк, высоту ячеек, стили кнопок
Этап 1
Аудит продуктов
  • Проанализировал интерфейсы всех 6 продуктов
  • Составил список повторяющихся элементов и проблемных зон
Ключевые находки
  • Одни и те же компоненты (таблицы, кнопки, формы, модальные окна) выглядят по‑разному
  • Нет единых стандартов для отступов, цветов, типографики, иконок
  • Отсутствуют токены → невозможно быстро внедрить тёмную тему или ребрендинг
Этап 2
Проектирование архитектуры
За основу взял Atomic Design
Что сделал
Составил карту сущностей: атомы → молекулы → организмы
Создал систему стилей с токенами:
  • Цвета (семантические роли: primary, danger, surface вместо HEX)
  • Типографика (уровни и смысловые роли)
  • Отступы и сетка
  • Тени, адаптированные под светлую и тёмную темы
Этап 3
Переменные для токенов
Подключил систему переменных Figmа
Реализовал поддержку светлой и тёмной темы из коробки
Раздел стилей
Скриншот из Figma
Этап 4
Компоненты со всеми состояниями
  • Создал библиотеку по принципу атомного дизайна
  • Показал все состояния компонентов (default, hover, active, disabled, error) для удобства разработчиков
  • Использовал компонентную сетку для лучшей навигации
Логическая группировка
  • Структурировал библиотеку по разделам
  • Добавил документацию и примеры использования
Этап 5
Иконки
  • Создал библиотеку иконок как компоненты в Figma
  • Подготовил иконочный шрифт для фронтенда
Коммуникация и внедрение
Организовал процесс согласования с фронтом
Обсудили подход к цветам и неймингу, синхронизировали структуру компонентов между Figma и кодом
Внедрил Changelog
Создал страницу с датированными изменениями в библиотеке － команда всегда видит, что обновилось
Организовал процесс процесс работы
Дизайнеры подключают библиотеку и следуют стандартам, новые компоненты добавляются через согласование, ведение дизайн‑ревью с разработкой
Как проходил релиз
Поэтапное внедрение
Система внедрялась постепенно — сначала в новые разделы
Старые интерфейсы переводились на систему по мере рефакторинга
Результат
Скорость сборки макетов: значительно выросла
По заявлению Lead Front‑End, скорость разработки каждой новой сущности выросла в 2‑3 раза
Количество вопросов от фронта: сократилось вдвое
Дизайн‑ревью: с 2‑3 итераций до одной
Масштаб внедрения
Система внедрена во все новые разделы, подключена к 6 сервисам. Продукты обрели визуальную консистентность
Ретроспектива
Что получилось хорошо
01
Быстрое внедрение за 3 месяца
02
Система оказалась масштабируемой — легко добавлять новые компоненты
03
Команда фронтенда активно участвовала в процессе
Можно было сделать лучше
01
Не согласовал заранее с фронтом процесс быстрой миграции новых цветовых ролей в будущем → больше итераций при внедрении в код
02
Стоило исследовать возможность white label для адаптации под партнёрства и франшизы — это открыло бы новые бизнес‑возможности
03
Не интегрировал токены Figma напрямую в кодовую базу → синхронизация выполнялась вручную, что иногда приводило к расхождениям
+7(927)623‑11‑14
t.me/balladdesign
balladdesign@gmail.com
Made on
Tilda