これは何か
画面のためのノードグラフエディターです。各ノードは画面（メインメニュー／インベントリ／設定／ポーズ／…）で、任意でモックアップ画像を持ちます。エッジはユーザーのアクションによって引き起こされる遷移を表します。UXレビューや、新しいUIエンジニアのオンボーディングに役立ちます。
いつ使うか
- Figmaでモックアップを作る前に、新しい画面フローを設計するとき。
- インベントリがクラフトに、クラフトが店にどうつながるかをチームに示すとき。
- UXの行き止まり（戻る手段のない画面）を見つけ出すとき。
- UIエンジニアに、スクリプト化すべきすべての遷移をブリーフィングするとき。
使い方
- 1「+ 画面を追加」をクリックし、名前を付けます。
- 2画面ノードにモックアップ画像をアップロードします（任意ですが効果的です）。
- 3ある画面の出力ポートから別の画面へドラッグして、遷移を定義します。
- 4エッジにトリガー（「インベントリを開く」「Bを押す」「アイテムを拾った」）のラベルを付けます。
知っておくべきヒント
- →ライブカーソル：同じフローを編集しているチームメイトはお互いの動きが見えます。
- →モックアップ画像はR2に保存され、プロジェクトのストレージ予算に計上されます。
- →モーダル／全画面／HUDオーバーレイの区別に、色分けしたカテゴリーを使いましょう。
- →フローをPNGとしてエクスポート（キャンバスを右クリック → エクスポート）すれば、スライドデッキに使えます。