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
930
Figmaにおけるモックデータ管理の改善案
Kodai
September 07, 2022
Tweet
Share
More Decks by Kodai
See All by Kodai
泥臭いデザインシステムの育て方
kodai3
0
410
Featured
See All Featured
The Cult of Friendly URLs
andyhume
74
5.7k
Six Lessons from altMBA
skipperchong
20
3k
Facilitating Awesome Meetings
lara
41
5.6k
What's in a price? How to price your products and services
michaelherold
237
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Building Your Own Lightsaber
phodgson
98
5.7k
Teambox: Starting and Learning
jrom
128
8.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
How GitHub (no longer) Works
holman
304
140k
YesSQL, Process and Tooling at Scale
rocio
163
13k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
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の世界に誘いつつ、解決したい ! ・
みなさんの解決案はありますか? ・
ありがとうございました