Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Figmaにおけるモックデータ管理の改善案
Search
Kodai
September 07, 2022
1
990
Figmaにおけるモックデータ管理の改善案
Kodai
September 07, 2022
Tweet
Share
More Decks by Kodai
See All by Kodai
泥臭いデザインシステムの育て方
kodai3
0
530
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Raft: Consensus for Rubyists
vanstee
140
7k
Visualization
eitanlees
146
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Six Lessons from altMBA
skipperchong
28
3.8k
The Cult of Friendly URLs
andyhume
79
6.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Code Reviewing Like a Champion
maltzj
524
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
A designer walks into a library…
pauljervisheath
206
24k
Facilitating Awesome Meetings
lara
54
6.4k
Transcript
Figmaにおけるモックデータ管理の改善案 Kodai Suzuki 2022/9/8
アジェンダ はじめに 01. どのような課題があるか? 02. 既存の解決方法 03. 何を作ろうとしているか? 04.
はじめに Disclaimer
1 はじめに D i s c l a i m
e r 直近の社内課題を元に始めたばかりです、全然完成していません! ・ より良いアイデアなど、FoFコミュニティのお力をぜひお貸しください! ・
どのような課題があるか What is the Issue
1 Figma上でデータ入力が大変 P r o b l e m o
n F i g m a 複数パターン検証を重ねるにあたって、同一ドメインデータを複数回入力する必要がある
1 プロトタイプ作成時のデータ入力が大変 P r o b l e m w
h e n P r ot ot y p i n g デザインに使用したデータをプロト実装に合わせて入力し直す必要がある
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を実行するにあたって、理想に近いデータを再度入力する必要がある
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
1 課題まとめ S u m u p デザイナーが、作成したUIごとに入力するのが大変 ・ デザインエンジニアが、プロトタイプ時に再度入力するのが大変
・ エンジニアが、実装時・テスト時に入力するのが大変 ・ 価値ある検証をするために、より簡単に高品質のデータを利用したい ・
既存の解決方法 Existing solutions
1 Spreadsheet Sync S p r e a d s
h e e t S y n c Google Spreadsheetでデータ管理することができる。
1 Data Sync D a t a S y n
c jsonファイルやjsonを返すAPIでも管理することができる
1 GraphQL Data Fill G ra p h Q L
D a t a F i l l GQLのエンドポイントから、実際のデータを挿入することができる
1 既存の解決策まとめ S u m u p ・ だけど、エンジニア的にスプシ使うのはちょっと..... Google
Spreadsheetで管理することができる ・ スプシよりは良いけど、ただのjsonか..... Jsonで管理することができる ・ 本物のデータ!! だけど、実装済みの機能にしか使えない.... 既存APIを使うことができる
何を作りたいか What I trying to build
1 何が欲しいか W h a t I w a n
t デザイナー、エンジニア共に使いやすいもの ・ ただデータを用意する以上の付加価値があるもの ・
1 アイデア I d e a GraphQL
1 スキーマ駆動 S c h e m a D r
i v e n フロントエンドとバックエンドが共通したドメインオブジェクトを扱う バックエンド フロントエンド
1 スキーマ駆動 S c h e m a D r
i v e n デザイナーも共通したドメインオブジェクトを扱えるとデータ管理以外のメリットも... デザイナー バックエンド フロントエンド
1 Figma msw (graphql) F i g m a m
s w デザイナーとSchema駆動で開発できる環境をいかにして作ることができるか?
1 まとめ S u m u p デザイナーをGraphQLの世界に誘いつつ、解決したい ! ・
みなさんの解決案はありますか? ・
ありがとうございました