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