Figmaにおけるモックデータ管理の改善案

Transcript

1. Figmaにおけるモックデータ管理の改善案 Kodai Suzuki 2022/9/8
2. アジェンダ はじめに 01. どのような課題があるか？ 02. 既存の解決方法 03. 何を作ろうとしているか？ 04.
3. はじめに Disclaimer
4. 1 はじめに D i s c l a i m e r 直近の社内課題を元に始めたばかりです、全然完成していません! ・ より良いアイデアなど、FoFコミュニティのお力をぜひお貸しください！ ・
5. どのような課題があるか What is the Issue
6. 1 Figma上でデータ入力が大変 P r o b l e m o n F i g m a 複数パターン検証を重ねるにあたって、同一ドメインデータを複数回入力する必要がある
7. 1 プロトタイプ作成時のデータ入力が大変 P r o b l e m w h e n P r ot ot y p i n g デザインに使用したデータをプロト実装に合わせて入力し直す必要がある
8. 1 実装時のデータ入力が大変 P r o b l e m w h e n D e v e l o p i n g storybook駆動開発とSnapshot Testを実行するにあたって、理想に近いデータを再度入力する必要がある
9. 1 クライアント様への最適化が大変 P r o b l e m w h e n C l i e n t r e v i e w プロダクトの性質上、同一UIをクライアント様ごとの見え方で提供する必要がある GANMA! TIF
10. 1 課題まとめ S u m u p デザイナーが、作成したUIごとに入力するのが大変 ・ デザインエンジニアが、プロトタイプ時に再度入力するのが大変 ・ エンジニアが、実装時・テスト時に入力するのが大変 ・ 価値ある検証をするために、より簡単に高品質のデータを利用したい ・
11. 既存の解決方法 Existing solutions
12. 1 Spreadsheet Sync S p r e a d s h e e t S y n c Google Spreadsheetでデータ管理することができる。
13. 1 Data Sync D a t a S y n c jsonファイルやjsonを返すAPIでも管理することができる
14. 1 GraphQL Data Fill G ra p h Q L D a t a F i l l GQLのエンドポイントから、実際のデータを挿入することができる
15. 1 既存の解決策まとめ S u m u p ・ だけど、エンジニア的にスプシ使うのはちょっと..... Google Spreadsheetで管理することができる ・ スプシよりは良いけど、ただのjsonか..... Jsonで管理することができる ・ 本物のデータ!! だけど、実装済みの機能にしか使えない.... 既存APIを使うことができる
16. 何を作りたいか What I trying to build
17. 1 何が欲しいか W h a t I w a n t デザイナー、エンジニア共に使いやすいもの ・ ただデータを用意する以上の付加価値があるもの ・
18. 1 アイデア I d e a GraphQL
19. 1 スキーマ駆動 S c h e m a D r i v e n フロントエンドとバックエンドが共通したドメインオブジェクトを扱う バックエンド フロントエンド
20. 1 スキーマ駆動 S c h e m a D r i v e n デザイナーも共通したドメインオブジェクトを扱えるとデータ管理以外のメリットも... デザイナー バックエンド フロントエンド
21. 1 Figma msw (graphql) F i g m a m s w デザイナーとSchema駆動で開発できる環境をいかにして作ることができるか？
22. 1 まとめ S u m u p デザイナーをGraphQLの世界に誘いつつ、解決したい ! ・ みなさんの解決案はありますか？ ・
23. ありがとうございました