Типова ситуація: є дизайн-система в Figma, є компоненти в коді, і є абсолютно неактуальна документація в Confluence. Розробники не оновлюють Figma, дизайнери не знають що в коді. Storybook вирішує цю проблему — але тільки якщо дизайнер теж розуміє як він працює.

Що таке Storybook і навіщо він дизайнеру

Storybook — це окремий веб-додаток що відображає всі компоненти коду в ізольованому середовищі. Думайте про нього як про живу сторінку компонентів, де кожен компонент можна побачити з усіма варіантами, станами і пропсами.

Для дизайнера Storybook — це:

  • Джерело правди про те, як компоненти виглядають в коді прямо зараз
  • Інструмент QA — порівняти Figma і реальну реалізацію
  • Документація що оновлюється автоматично при зміні коду
  • Можливість показати клієнту або PM живі компоненти без доступу до коду

Анатомія Story

Кожен компонент у Storybook описується через "stories" — окремі приклади використання. Story для кнопки може бути: Default, Primary, Disabled, WithIcon, Loading. Кожна story — це функція що повертає компонент з конкретними пропсами.

Для дизайнера важливо розуміти: stories = варіанти з Figma. Якщо у Figma є 5 варіантів кнопки — у Storybook мають бути 5 stories для кнопки. Невідповідність кількості stories і Figma-варіантів — сигнал що щось не синхронізовано.

Figma Code Connect дозволяє пов'язати Figma-компонент зі Storybook-story. При роботі в Figma Dev Mode розробник бачить посилання на відповідну story — і навпаки.

Controls panel: дизайнер може змінювати пропси без коду

Storybook має вбудований Controls panel — інтерфейс де можна змінювати пропси компонента через UI без редагування коду. Вибрати variant, змінити текст, увімкнути disabled — все через checkbox і dropdown.

Для дизайнера це означає: можна запустити Storybook, зайти в компонент і самостійно перевірити всі комбінації пропсів без допомоги розробника.

Як дизайнер може самостійно запустити Storybook

  1. Клонуйте репозиторій проекту (попросіть розробника, це 2 хвилини)
  2. npm install в папці проекту
  3. npm run storybook
  4. Відкрийте localhost:6006 в браузері

Все — у вас живий Storybook. Тепер ви можете перевіряти компоненти, порівнювати з Figma і фіксувати розбіжності.

Що перевіряти при QA через Storybook

  • Чи всі Figma-варіанти є у Storybook? (якщо немає — компонент не повністю реалізований)
  • Чи відповідають відступи, розміри шрифту, кольори дизайн-токенам?
  • Чи є story для disabled і error стану?
  • Чи компонент виглядає коректно при довгому тексті? (перевірте через Controls)
  • Чи є темна тема якщо вона є в Figma?

Дизайнер що вміє читати Storybook — дизайнер що не залежить від розробника щоб дізнатися "а як воно насправді виглядає в коді".