Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエン...

semigura
September 08, 2023
1.6k

OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する

2023.09.08 UIT Meetup vol.20『これがぼくらのスタンダード』で発表したスライドです。
https://twitter.com/@semigura

semigura

September 08, 2023
Tweet

More Decks by semigura

Transcript

  1. semigura @ 株式会社Gaji-Labo 2023/09/08 UIT Meetup vol.20 OpenAPI, Storybook, Figma

    のワークフローを標準化して デザイナーとエンジニアのコラボレーションを促進する 1
  2. かつての Web アプリケーション制作は…… 4 • バックエンドエンジニアが API を設計 • フロントエンドエンジニアがコンポーネントの

    State を設計 • デザイナーがデザインパターンを展開 デザインとエンジニアリングの 領域は分断している
  3. • OpenAPI による API 定義のコミュニケーション • Storybook による React コンポーネントの可視化とState

    定義のコミュニケーション • Figma によるコンポーネントデザインと Properties 定義のコミュニケーション 7 具体的には
  4. OpenAPI による API 定義のコミュニケーション 11 ➔ ドキュメントオーナー - バックエンドエンジニア ➔

    主に編集する人 - バックエンドエンジニア - フロントエンドエンジニア ➔ 参照する人 - バックエンドエンジニア - フロントエンドエンジニア - UIデザイナー ※UIデザイナーもデータセットの確認や名前の確 認に使えると◎
  5. Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 12 • Storybook が

    React コンポーネントのドキュメントとし て整備されていない • フロントエンドエンジニアしか Storybook を見られない かつては……
  6. Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 15 ➔ ドキュメントオーナー -

    フロントエンドエンジニア ➔ 主に編集する人 - フロントエンドエンジニア ➔ 参照する人 - フロントエンドエンジニア - UIデザイナー - バックエンドエンジニア
  7. Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 18 Figma と Storybook が作業的に連結している状態になっている

    現在は…… • Figma と Storybook を同期させることでズレが見つけやすくなる • 早期にフィードバックを受けやすく改善が回る
  8. Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 19 ➔ ドキュメントオーナー ⚪ UIデザイナー

    ➔ 主に編集する人 ⚪ UIデザイナー ➔ 参照する人 ⚪ UIデザイナー ⚪ フロントエンドエンジニア ⚪ バックエンドエンジニア
  9. すべてが繋がった結果…… 22 • 不要な手戻りやコミュニケーションロスを減らす • エンジニアとデザイナーが密に連携できる • 全体の設計が洗練される • 浮いた時間でプロダクトの改善につなげられる

    • ズレを見つけやすくなるので事前にコミュニケーションを取れる • ワークフローが分離せず標準化されているので同様の工程を効率化できる
  10. 参考URL 27 • OpenAPI: https://www.openapis.org/ • Stoplight Studio: https://github.com/stoplightio/studio •

    Storybook: https://storybook.js.org/ • Figma: https://www.figma.com/ja/ • Gaji-Labo corporate site: https://www.gaji.jp/