Дизайн-система с нуля
Hostme · библиотека компонентов для системы управления рестораном
Задача
- Единая библиотека компонентов с нуля
- Токены (цвет, типографика, отступы)
- Тёмная тема, которой не было вообще
- Документация для команды
Моя роль
Строил в одиночку, параллельно с редизайном.
Контекст
Макетов в Figma не было — работа велась в Sketch и Photoshop, без единой дизайн-системы или брендбука. Компоненты дублировались с расхождениями (цвета, отступы, скругления), каждый новый экран собирался почти с нуля. Ситуация стала критичной с началом полного редизайна.
Унифицированных компонентов
времени разработки новых фич
Снижение количества багов
Подход
Бенчмарки
Изучил более 20 доступных дизайн-систем — Yandex, Alfa-Bank, Avito, Ozon, Material, Ant Design, Carbon, Glow UI, Bunin UI и другие. Ключевое открытие — насколько много может быть вариаций и надстроек у одного компонента и насколько гибко система может подстраиваться под уникальные запросы бизнеса. Поскольку дефолтные решения не подходили, сразу перенял этот подход: закладывал в компоненты нетривиальные варианты надстроек с расчётом на специфику продукта.
Метрики
Сокращение времени разработки новых фич (−25%) и снижение количества UI-багов. Второй показатель — скорее следствие появления единой базы компонентов, чем прямая заслуга дизайна: разработка перестала собирать интерфейсы заново каждый раз.
Варианты решений
Атомарная структура была единственным рассматриваемым вариантом — только она даёт реальную масштабируемость. Развилка возникла в нейминге цветов: между семантическим и буквальным подходом выбрал буквальный, дополнительно разбив все оттенки на группы с описанием ситуаций применения — так система остаётся понятной без необходимости держать семантику в голове.
Процесс
Декомпозируя интерфейс по модулям, параллельно проводил аудит компонентов: где переиспользуются, с какими пропсами, что можно унифицировать вместо дублирования. Токены реализовал на базе плагина Figma Tokens.
Ограничения
Значительная часть компонентов требовала специфических состояний, поэтому готовые библиотеки эти кейсы не закрывали — переехать на готовое решение было невозможно. Токены на тот момент не поддерживались Figma нативно.
Пример компонента
Получилось собрать гибкую систему и заодно реализовать свою мечту — компоненты, которые не требуют постоянных прокликиваний для кастомизации. Текстовое поле: состояние, размер, стиль, лейбл, хинт, левый и правый аддоны — всё собирается пропсами в одной панели, без отсоединения инстанса и без ручной сборки из вложенных слоёв.
