SaaS · Дизайн-система · Масштаб
Дизайн-система та бібліотека компонентів
- Період
- 2020 — 2023
- Роль
- Frontend Architect
- Галузь
- SaaS
- Результат
- 3×швидша розробка
Виклик
Реальна проблема
Три SaaS-продукти під одним брендом, кожен розроблявся і підтримувався окремо, кожен відображав ту саму кнопку трохи по-різному. Кожна нова функція означала повторну розробку компонентів, які дві інші команди вже збирали раніше. Дизайнери витрачали половину робочого тижня на усунення неузгодженостей замість того, щоб проєктувати.
Підхід
Як я це вирішував
- Провів аудит усіх екранів у трьох продуктах і визначив ті ~20 базових компонентів — кнопок, полів, випадних списків, діалогів — які покривали приблизно 90% повторюваних потреб інтерфейсу
- Об'єднав ці компоненти в одну спільну бібліотеку. Кожен продукт підключає її як стандартну залежність і контролює власний цикл оновлень, що запобігає неочікуваним критичним змінам
- Будував кожен компонент за дизайн-специфікацією і публікував у живій галереї. Команда дизайну прийняла цю ж галерею як єдиний еталон — одна точка посилання, одне місце для обговорень, без пересилання знімків екрана
- Переводив три продукти на спільну бібліотеку, по одній функції за раз. Перемикач вмикав нову версію або повертав стару, тож дизайн і розробка працювали паралельно без блокування одне одного
- Запровадив чіткий процес внесення змін. Дизайнери подають запити з посиланнями на Figma, інженери оновлюють спільну бібліотеку, і жодна продуктова команда більше не підтримує власні компоненти інтерфейсу
Стек
Інструменти, на яких це зроблено
- Angular
- TypeScript
- RxJS
- Angular CLI
- SCSS
- Storybook
- Private npm registry
Результат
Що вийшло
- Три продукти уніфіковано на одній спільній бібліотеці — узгоджені кнопки, діалоги і поля форм по всьому бренду
- Швидкість розробки нових функцій зросла приблизно втричі порівняно з періодом до бібліотеки
- Неузгодженості між продуктами скорочено до нуля: кожен компонент відповідає конкретному дизайну у Figma і запису в живій галереї
- Команда дизайну повернула собі приблизно 40% робочого тижня і спрямувала цей час на дослідження продукту
Схожа ситуація у вас?
30 хвилин розмови, без продажів. Швидко зрозуміємо, чи я підійду для цієї задачі.