Развитие библиотеки компонентов

Мы работаем над профессиональным B2B-сервисом для логистики. Продукт создаётся для специалистов, которые работают в насыщенных операционных сценариях. При проектировании интерфейсов важно учитывать контекст их задач: высокая плотность информации, последовательные действия и минимизация ошибок под нагрузкой. Чтобы не городить интерфейс каждый раз с нуля, с самого начала команда решила идти на готовых компонентах.

Взяли Ant Design для Vue тогда еще v3, т.к. на тот момент это был самый адекватный вариант. Фреймворк позволил быстро собрать MVP, наладить работу с формами и таблицами и не углубляться в точечный пользовательский опыт. Но чем дальше, тем больше он мешал, и фронт начал терять время на борьбу с ограничениями, а интерфейс посыпался в нетепичных для фреймворка сценариях.

В таком виде на тот момент только что собранная команда дизайна получила продукт. Мы проработали так некоторое время, но пришлось остановиться и пересобрать подход.

От Ant Design к необходимости своей библиотеки

Ant отлично сработал на старте: в команде был один дизайнер, продукт быстро рос, и нужно было просто успевать. Разработчики просто собирали экраны, не тратя время на отрисовку и синхронизацию. Дизайнер, в свою очередь, дублировал в Фигме все используемые компоненты, чтобы не зависеть от будущих изменений во внешней библиотеке.

Процесс выглядел просто: дизайнер использует локальную копию антовского компонента в макете, разработчик находит его и подключает нужный элемент из Ant Design.

Вроде бы всё работало. Но у такого подхода был один минус – между макетами и кодом не было никакой системной связи.

///