Jusan Business

Web design system для Jusan Business: аудит продовых компонентов, обновление foundations, пересборка библиотеки и документация для Figma и Storybook

Задача

Разобрать существующие web-компоненты в продукте, убрать расхождения и связать дизайн-библиотеку с реализацией в Storybook

Мой вклад

Аудит, типографика и иконки, цветовые и размерные токены, компоненты и состояния, документация и проверка на продуктовых экранах

Разбор кейса

Контекст и роль

Jusan Business — web-продукт для малого и среднего бизнеса. Я вёл дизайн-часть web design system в связке с дизайн-лидом и разработчиком Storybook: участвовал в аудите, обновлении foundations, пересборке компонентов и документации

Сначала — аудит

Работу начали с компонентов, которые уже использовались в продукте. Сопоставляли дубли, размеры, состояния и реальные сценарии. Аудит помог отделить общие паттерны от частных решений и определить, что нужно пересобрать

Jusan Business: Основой аудита были реальные продуктовые экраны и сценарии — Основой аудита были реальные продуктовые экраны и сценарии

От foundations к компонентам

Вместе с дизайн-лидом и разработчиком обновили foundations: JB-шрифт, набор иконок, цветовые и размерные токены, отступы и общую логику состояний. На этой базе я пересобирал компоненты в Figma и сверял их с реализацией в Storybook

Jusan Business: Button: назначение, варианты, размеры и состояния — Button: назначение, варианты, размеры и состояния

Jusan Business: Datepicker: одиночная дата, период и состояния поля — Button: назначение, варианты, размеры и состояния

Документация и состояния

Для компонентов описывал назначение, варианты, размеры, состояния и крайние случаи. На примере Fileinput — single и multiple upload, drag and drop, загрузка, ошибка, удаление и ограничения. Макеты сверяли со Storybook вместе с разработчиком

Jusan Business: Fileinput: загрузка, ошибка и загруженные файлы — Fileinput: загрузка, ошибка и загруженные файлы

Jusan Business: Та же модель состояний для тёмной темы — Та же модель состояний для тёмной темы

Из библиотеки — в продукт

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

Jusan Business: Fileinput в реальном сценарии валютного контроля — Fileinput в реальном сценарии валютного контроля

После публикации

После публикации изменения фиксировали в release notes и changelog. Так у дизайнеров и разработчиков оставался общий контекст: что поменялось, какие состояния добавились и какие продуктовые макеты нужно обновить

Результат

Компоненты и правила собраны в общую web-библиотеку; продуктовые экраны можно было последовательно собирать из согласованных паттернов в Figma и Storybook

Следующий кейсMagazinner