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
980
Figmaにおけるモックデータ管理の改善案
Kodai
September 07, 2022
Tweet
Share
More Decks by Kodai
See All by Kodai
泥臭いデザインシステムの育て方
kodai3
0
490
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Side Projects
sachag
452
42k
RailsConf 2023
tenderlove
29
1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Agile that works and the tools we love
rasmusluckow
328
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Speed Design
sergeychernyshev
25
780
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Fireside Chat
paigeccino
34
3.2k
Optimizing for Happiness
mojombo
376
70k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Rails Girls Zürich Keynote
gr2m
94
13k
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の世界に誘いつつ、解決したい ! ・
みなさんの解決案はありますか? ・
ありがとうございました