プロトタイプフローの作成と管理

はじめに

この機能を使用できるユーザー

すべてのプランで利用可能

ファイルへの編集可アクセス権が必要です

Figmaでプロタイプを作成すると、複数のフローを作成して、ユーザージャーニーのさまざまな部分をテストできます。

フローは、1つのプロトタイプ操作を構成する連結されたフレームのコレクションです。たとえば、ショッピングアプリのプロトタイプを作成し、アカウント作成のフロー、商品閲覧のフロー、チェックアウトのフローをすべて1つのページにまとめることができます。

プロトタイプフローの作成

フローの開始点

フローの開始点は、フローが開始される場所です。フローの開始点は、最上位フレームで設定されます。

既存のコネクションがない2つのフレーム間にコネクションを追加すると、コネクションの開始点となる最上位フレームに開始点が作成されます。フローの開始点は、青いプレビューアイコンとフロー名でキャンバスに表示されます。

フレームは1つのフロー開始点しか持つことができません。

手動でフローの開始点を作成することもできます。

1. 開始フレームを選択します。
2. 右サイドバーの[プロトタイプ]タブを選択します。
3. [フローの開始点]セクションで、プラス記号をクリックします。

現在のページでフローの開始点をすべて表示するには:

1. キャンバスの空白のエリアをクリックすると、オブジェクトを選択解除できます。
2. 右サイドバーの[プロトタイプ]タブを選択します。
3. フローセクションで、フローの開始点すべてのリストを表示します。
4. フロー名にカーソルを合わせて[フレームを選択]をクリックすると、開始点があるフレームに移動できます。

フレームをフローに追加またはフローから削除

フローの開始点が決まれば、フローの残りの部分はプロトタイプ作成インタラクションで開始点に連結されたフレームとなります。これには、開始点と直接連結されたフレームだけでなく、他のインタラクションにより連結されたフレームも含まれます。

たとえば、下の画像の紫色のフレームはすべてフロー1に含まれます。

フローからフレームを削除するには、フレームをフロー内の他のフレームに接続するプロトタイプインタラクションを削除します。

フレームは複数のフローに含まれることがあります。例えば、下の画像の青いフレームは、フロー1とフロー2の両方に含まれます。

ユーザーが複数のフローに含まれるフレームに移動すると、そのフレーム上であらゆるインタラクションを使用できます。これにより、元々のフローが該当のフレームからのあらゆるコネクションを含むようになります。

プロトタイプフローを管理

フロー名の編集

作成したフローは、デフォルトで「Flow 1」と名付けられます。追加のフローは「Flow 2」、「Flow 3」などになります。ユーザーはいつでもフローの名前を変更できます。

フローの名前を変更するには、以下の手順に従います。

1. 開始フレームを選択します。
2. 右サイドバーの[プロトタイプ]タブを選択します。
3. [フローの開始点]セクションからフロー名フィールドを選択します。
4. 新しいフロー名を入力します。

名前を変更すると、フレームの青色の開始点アイコンとプレゼンテーションビューの左サイドバーにフロー名が表示されます。

フローの説明の追加

プレゼンテーションビューでは、フローの名前と説明が左サイドバーに表示されます。説明を使用して、ユーザビリティテストの参加者にプロンプトを提供したり、チームに追加のコンテキストやドキュメントを提供したりします。説明は、太字のテキスト、番号付きリストまたは箇条書きリスト、ハイパーリンクで書式設定できます。

フローの説明を追加するには、次の手順に従います。

1. フローの開始点のあるフレームを選択します。
2. 右サイドバーの[プロトタイプ]タブを選択します。
3. [フローの開始点]セクションから、編集するフローの名前の横にある[説明の編集]をクリックします。
4. リッチテキストの説明を追加します。
5. Xをクリックして[説明]パネルを閉じ、説明を保存します。

プレゼンテーションビューで、追加された説明は左サイドバーに表示されます。

フローの開始点の移動

デフォルトでは、Figmaではフローの開始点として最初に作成したコネクションが使用されます。開始点は別のフレームに移動できます。

1. キャンバス上で青い開始点アイコンを見つけます。
2. フロー名をクリックし、新しい開始フレームまでドラッグします。

フロー開始点の削除

フロー開始点を削除するには、次のように操作します。

1. フローの開始点のあるフレームを選択します。
2. 右サイドバーの[プロトタイプ]タブを選択します。
3. [フローの開始点]セクションから、[開始点を削除]をクリックします。

プロトタイプフローの再生と共有

フローのプレビュー

インラインプレビューを使って、エディターでプロトタイプフローを直接プレビューできます。

1. キャンバスの空白のエリアをクリックすると、オブジェクトを選択解除できます。
2. 右サイドバーの[プロトタイプ]タブを選択します。
3. [フロー]セクションで、すべてのフローのリストを表示します。
4. フロー名にカーソルを合わせ、 [プレビュー]をクリックすると、インラインプレビューが開きます。

インラインプレビューから、各プロトタイプインタラクションをトリガーして、フロー内で移動します。

フローリンクのコピーと共有

特定のユーザーフローまたはユーザージャーニーに関するフィードバックを取得するため、他のユーザーとプロトタイプフローを共有できます。プロトタイプフローを共有した場合、ユーザーはプロトタイプをプレゼンテーションビューで再生できます。プレゼンテーションビューから、他のフローを選択して再生することもできます。

キャンバスで以下のように操作します。

1. フローの開始点のあるフレームを選択します。
2. 右サイドバーの[プロトタイプ]タブを選択します。
3. [フロー開始点]の見出しの横にカーソルを合わせます。
4. [リンクをコピー]をクリックします。

プレゼンテーションビューから 、次の手順に従います。

1. 左側のサイドバーから、共有するフローを選択します。
2. ツールバーの[プロトタイプを共有]をクリックします。
3. [リンクをコピー]をクリックします。