План дизайн-системи

Етапи впровадження дизайн-системи

Фази

  1. 0

    Фаза 0 — інвентаризація

    Зібрати всі унікальні кнопки/поля/карточки в продукті: зазвичай їх 5–10 версій там, де має бути одна.

  2. 1

    Фаза 1 — токени

    Кольори, відступи, типографіка як змінні (Figma variables + CSS custom properties) — одне джерело правди.

  3. 2

    Фаза 2 — базові компоненти

    Button, Input, Card, Modal: найвживаніші 10 компонентів покривають 80% інтерфейсу.

  4. 3

    Фаза 3 — документація

    Для кожного компонента: стани, приклади do/don't, API-пропси. Без документації система мертва.

  5. 4

    Фаза 4 — впровадження

    Міграція сторінка за сторінкою, метрика: % інтерфейсу на компонентах системи.

Дизайн-система окупається на 3+ екранах однакового типу; для одного лендінгу вона — оверкіл. Головний ризик — побудувати 'ідеальну' систему, яку ніхто не впроваджує: впровадження починайте паралельно з фазою 2, не після завершення.