Навожу порядок в дизайн-системе
Или как я внедрил архитектуру, которую легко контролировать и трудно сломать
2024
Или как я внедрил архитектуру, которую легко контролировать и трудно сломать
2024
Изначально дизайн-проект продукта имел несколько автономных библиотек компонентов. Библиотеки были плохо структурированы и быстро теряли актуальность.
В роли ведущего дизайнера я реорганизовал библиотеки — выстроил правильную иерархию компонентов и сделал управление изменениями интуитивным.
Проблемы дизайн-системы
Отсутствие контроля дизайнеров над UI;
конфликтующие дизайн-решения;
высокая стоимость каждой итерации.
Моё решение
Я проанализировал весь дизайн-проект и спроектировал вместе с фронтенд-командой и системными аналитиками архитектуру компонентов.
Затем я актуализировал библиотеки и обучил дизайнеров проекта работе с ними.
ANT DESIGN – это React-библиотека компонентов, изначально лежащая в основе всего дизайна продукта.
Пример работы архитектуры
Устройство панели действий:
1. ANT DESIGN – компонент Button;
2. Ядро системы — ActionWrapper;
3. Сценарии — ActionWrapperLocal.
Уровень 1. ANT DESIGN
Кнопки, инпуты, чекбоксы, степперы «из коробки».
Уровень 2. Библиотека продукта
Лейаут, верхнеуровневая навигация, типовые окна, контейнеры.
Уровень 3. Библиотеки сценариев
Уникальные для блока элементы, формы, страницы.
