Forsight: разработка в 2 раза быстрее на дизайн-системе, собранной вручную
Шесть команд разработки, много модулей и несколько систем на общих компонентах. Старая дизайн-система не покрывала потребности разработки, поэтому я собрал новую с нуля.
- Роль
- Product designer, автор дизайн-системы
- Подход
- Атомарная система, собрана вручную, без ИИ
- Команды
- 6 команд разработки, несколько связанных систем
- Покрытие
- Светлая и тёмная темы, размеры S, M, L
Результат
×2Скорость разработки выросла вдвое: из процесса ушла самая долгая фаза.
До дизайн-системы · 3 фазы
- Обсуждение задачи
- Выяснение требований для всех связанных систем
- Прототип и передача в разработку
С дизайн-системой · 2 фазы
- Обсуждение задачи
- Прототип из готовых компонентов и передача
Проблема
Одна правка задевала все системы
На одной дизайн-системе работали 6 команд и несколько связанных систем. Существующая система была неполной и не отвечала требованиям разработчиков.
Перед каждым изменением приходилось выяснять требования всех систем, а не только той, где разрабатывался модуль. Нужно было понять, как правка компонента отразится на остальных. Эта фаза занимала больше всего времени.
Масштаб
Что входит в систему
Каждый компонент собран вручную во всех состояниях, размерах и двух темах.
Как собрана
От атомов до виджетов
Атомы и токены
Цвета, типографика (13 текстовых стилей), иконки и базовые элементы, из которых собирается всё остальное.
UI-компоненты
24 группы: кнопки и split-кнопки, поля ввода, деревья, табличный ввод, чипсы, табы, чекбоксы, контекстное меню, color picker, splitter-панели.
Виджеты
11 модулей интерфейса: сайдбар, фильтрбар, тулбар, консоль, хедер, модальные окна, уведомления, страницы, поиск, список фильтров.
Темы и размеры
У каждого компонента есть светлая и тёмная тема и три размера: S, M, L. Команды берут готовый вариант и не придумывают свой.
Фрагменты библиотеки
Все состояния в двух темах
Кнопки, чекбоксы, хедеры и селекторы источников описаны для каждого размера и состояния.
Почему это важно
Ручная работа, которая окупилась
- Систему я собрал вручную, без ИИ-инструментов. Каждый компонент продуман под реальные сценарии команд.
- Командам больше не нужно изучать, как правка компонента повлияет на все системы.
- Прототип собирается из готовых виджетов и сразу уходит в разработку.