オブジェクトベースなFigmaファイルの作り方
Money Forward Design Advent Calendar の1日目の記事です。
これはソフトウェアのUIデザインを前提にした記事です。
デザインデータの管理方法は誰もが一度は頭を悩ませることでしょう。例えば次のような状況はよくあると思います。
最新のデザインデータがどこにあるかわからない
状態表現に過不足がある
データ量が多くファイルが重たい
今回はこういった課題に対処できるおすすめのFigmaファイルの作り方を紹介します。マスターデータの作り方に帰結する内容ですが、デザインを検討する際にも役立つと思います。またタスクベースなUIに陥らないためのテンプレートとしても活用できます。
基本方針は「オブジェクト × CRUD × 状態」
基本方針はオブジェクト × CRUD × 状態の3次元構成です。これらをFigmaファイルのページとページ内に配置していきます。
メジャーなオブジェクトをページに配置する
Figmaのページにそのプロダクトのメジャーなオブジェクトを配置します。オブジェクトベースな設計になっていれば、通常はルートやグローバルと呼ばれるナビゲーション項目が並びます。画面数が少ないプロダクトであればページを分ける必要はないかもしれません。プロダクトがタスクベースな場合、ナビゲーション項目をそのままページに適用できません。現状とのギャップを鑑みる必要はありますが、理想的なオブジェクトを見出してページに配置することをおすすめします。
ページ内の配置①：CRUDのビューを横に並べる
UIをメジャーなビュー・インタラクションで分けて横に並べます。CRUDで考えると次のように分けられます。
Read Collection
Read Single
Create（モードレスであれば不要）
Update（モードレスであれば不要）
Delete（モードレスであれば不要）
Create・Update・Deleteの操作がモードレスな場合、そのビューは不要です。これらすべてがモードレスな場合はCollection ViewとSingle Viewがあれば十分です。
ページ内の配置②：状態を縦に並べる
次にUIの状態（State）を縦に並べていきます。UI Stackをベースにしチューニングするのがおすすめです。例えば以下のようなStateを配置します。
Ideal（理想状態：そのUIをもっとも説明しやすいイメージ）
Empty（0件のとき）
Infinity（件数がたくさんあるとき）
Loading
Error
この場合、CRUDをもっとも説明しやすい画面としてIdeal状態を一番上に配置しておくと良いでしょう。またUIの状態は画面単位ではなく、UI上のすべてのオブジェクトに対して規定されることに留意してください。例えば「ドロップダウンメニューが表示されているとき」「特定の要素がフォーカスされているとき」といった状態の定義が必要になるかもしれません。
これにて「オブジェクト × CRUD × 状態」による構成の完成です。
タスクベースな設計の予防にもなる
これにより状態表現の過不足がなく、少ない画面数でデザインデータを管理できます。画面遷移図ベースな管理やプロジェクト・スプリントベースの管理で苦戦している人はぜひお試しください。
またデザイン検討に際に活用すれば、タスクベースなデザインを未然に防ぐこともできます。テンプレート化すれば不慣れな人でも抜け漏れに気づきやすくなると思います。こちらもぜひお試しください！
積極採用中！
デジタルプロダクトのデザイナーを積極採用中です！高難易度なソフトウェアデザインにチャレンジしたい方はぜひご応募ください！