Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kodai
September 07, 2022
970

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

Kodai

September 07, 2022
Tweet

Transcript

  1. 1 はじめに D i s c l a i m

    e r 直近の社内課題を元に始めたばかりです、全然完成していません! ・ より良いアイデアなど、FoFコミュニティのお力をぜひお貸しください! ・
  2. 1 Figma上でデータ入力が大変 P r o b l e m o

    n F i g m a 複数パターン検証を重ねるにあたって、同一ドメインデータを複数回入力する必要がある
  3. 1 プロトタイプ作成時のデータ入力が大変 P r o b l e m w

    h e n P r ot ot y p i n g デザインに使用したデータをプロト実装に合わせて入力し直す必要がある
  4. 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を実行するにあたって、理想に近いデータを再度入力する必要がある
  5. 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
  6. 1 課題まとめ S u m u p デザイナーが、作成したUIごとに入力するのが大変 ・ デザインエンジニアが、プロトタイプ時に再度入力するのが大変

    ・ エンジニアが、実装時・テスト時に入力するのが大変 ・ 価値ある検証をするために、より簡単に高品質のデータを利用したい ・
  7. 1 Spreadsheet Sync S p r e a d s

    h e e t S y n c Google Spreadsheetでデータ管理することができる。
  8. 1 Data Sync D a t a S y n

    c jsonファイルやjsonを返すAPIでも管理することができる
  9. 1 GraphQL Data Fill G ra p h Q L

    D a t a F i l l GQLのエンドポイントから、実際のデータを挿入することができる
  10. 1 既存の解決策まとめ S u m u p ・ だけど、エンジニア的にスプシ使うのはちょっと..... Google

    Spreadsheetで管理することができる ・ スプシよりは良いけど、ただのjsonか..... Jsonで管理することができる ・ 本物のデータ!! だけど、実装済みの機能にしか使えない.... 既存APIを使うことができる
  11. 1 何が欲しいか W h a t I w a n

    t デザイナー、エンジニア共に使いやすいもの ・ ただデータを用意する以上の付加価値があるもの ・
  12. 1 スキーマ駆動 S c h e m a D r

    i v e n フロントエンドとバックエンドが共通したドメインオブジェクトを扱う バックエンド フロントエンド
  13. 1 スキーマ駆動 S c h e m a D r

    i v e n デザイナーも共通したドメインオブジェクトを扱えるとデータ管理以外のメリットも... デザイナー バックエンド フロントエンド
  14. 1 Figma msw (graphql) F i g m a m

    s w デザイナーとSchema駆動で開発できる環境をいかにして作ることができるか?