プロトタイプの状態管理
プロトタイプでは、特に複数のフレーム間を移動するときは実際のインタラクションに近づけるようにします。
状態管理を使用すると、プロトタイプの再生時にフレーム内やフレーム間を移動する場合に、オブジェクトのプロパティと状態を維持したままにすることができます。
状態管理は、インタラクティブコンポーネント、スクロール位置、そしてプロトタイプの動画により、次の3つの方法で使用できます。
- 状態記憶: ユーザーがフレームから離れて再び戻ったときにオブジェクトの状態を保存します
- 状態共有: 異なるフレーム内の一致するオブジェクト間の状態を共有します
- 状態リセット: インタラクションごとにオブジェクトの状態をリセットします
フレーム間で状態を共有するには、 オブジェクトが一致している必要があります。
スクロール位置を保持するための更新
スクロール位置を保持する設定を更新しました。最上位のフレーム名が同一の名前または共有プレフィックスを持つ限り、最上位のフレームのスクロール位置を自動的に保持するようになりました。レイヤーの名前を一括変更して、共有プレフィックスを追加します。
詳細情報: スクロール位置を保持 →
状態記憶
フレーム間を行き来する操作を行った際、オブジェクトが最後に設定された状態で再び開きます。
インタラクティブコンポーネント
Figmaは、インタラクティブコンポーネントの直近に設定されたバリアントを記憶します。
たとえば、チェックボックス用のインタラクティブコンポーネントがある場合、このインタラクティブコンポーネントをチェック済みのバリアントに設定すると、Figmaはそのバリアントの状態を記憶します。つまり、そのフレームからいったん離れて後で戻ってきても、インタラクティブコンポーネントはチェックされた状態で保持されます。
スクロール位置
Figmaは、スクロール位置を記憶します。
たとえば、横スクロールと縦スクロールが有効になっている地図がある場合、地図上の特定の場所までスクロールすると、Figmaはスクロールの位置を記憶します。つまり、そのフレームからいったん離れて後で戻ってきたとしても、地図上の同じ位置までスクロールされたままになります。
動画
Figmaは、プロトタイプで使用した動画の再生状態を記憶します。
たとえば、あるフレームで動画再生を開始するとします。5秒が経過したところで、別のフレームに移動したとします。元のフレームに戻った場合に、先ほど中断した5秒の位置から動画の再生を続けます。
状態共有
一致するオブジェクトを含むフレーム間を移動する際、最初のオブジェクトの状態が2番目のオブジェクトと共有されます。
インタラクティブコンポーネント
Figmaは、一致するインタラクティブコンポーネント間で状態を共有します。コンポーネントが最初に操作された後にのみ、状態が共有されます。
たとえば、チェックボックス用のインタラクティブコンポーネントがあり、2つのフレームのそれぞれにチェックされていないバリアントのインスタンスがあるとします。プロトタイプの再生時に最初のフレームのチェックボックスをオンにしたとします。その後、2番目のフレームに移動した際、2番目のフレーム上の一致するコンポーネントもチェック済みのバリアントに設定されます。
スクロール位置
Figmaは、一致するオブジェクト間でスクロール位置を共有します。
たとえば、2つのフレームのそれぞれで横スクロールと縦スクロールが有効になっている地図があるとします。地図上の特定の位置までスクロールしてから2番目のフレームに移動すると、2番目のフレームの一致する地図オブジェクト上でも同じ位置までスクロールされます。
動画
Figmaは、一致するオブジェクト間で動画の再生状態を共有します。
たとえば、あるフレームで動画再生を開始するとします。一致する動画オブジェクトのある2番目のフレームに移動すると、2番目のフレームの動画は中断したところから再生を続けます。
状態リセット
ユーザーがプロトタイプ内を移動しているときに、特定のインタラクションでオブジェクトの状態をリセットする必要があることがあります。オブジェクトの状態は、次のフレームに移動するインタラクションでリセットする必要があります。
- プロトタイプコネクションをクリックし、 インタラクションの詳細パネルを開きます。
- パネルの[状態管理]セクションで、次の設定のいずれかのチェックをオフにします。
- [スクロール位置をリセット]: 元のスクロール位置にリセットします
- [コンポーネントの状態をリセット]: キャンバスに設定されている元のコンポーネントの状態にリセットします
- [動画の状態をリセット]: 動画を最初から再開して、元の再生状態にリセットします
注: リセット設定は、現在選択されているインタラクションに関連する場合にのみ、インタラクションの詳細パネルに表示されます。たとえば、動画のないフレームにインタラクションが接続されている場合、 [動画の状態をリセット]設定にはなりません。
インタラクティブコンポーネント
インタラクティブコンポーネントの状態を、キャンバスに設定されている元の状態にリセットします。
たとえば、空のバリアントと完全なバリアントを持つローディングバーのインタラクティブコンポーネントがあるとします。
ユーザーがリロードボタンをクリックしたときに、ローディングバーが空のバリアントで再開するようにしたい場合、ボタンインタラクションの[コンポーネントの状態をリセット]設定のチェックをオフにします。
スクロール位置
[スクロール位置をリセット]を使用すると、キャンバス上で設定されている元のスクロール位置に戻ります。
たとえば、横スクロールと縦スクロールが有効になっている地図があるとします。フレーム間を移動するときに元のスクロール位置に戻りたい場合は、インタラクションの[スクロール位置をリセット]設定のチェックをオフにします。
動画
動画を最初から再開し、キャンバスに設定されている元の再生状態にリセットします。
たとえば、あるフレームでビデオ再生を開始するとします。5秒が経過したところで、別のフレームに移動したとします。元のフレームに戻ったときに最初から動画を再開したい場合は、インタラクションの[ビデオの状態をリセット]設定のチェックをオフにします。
一致するオブジェクト
フレーム間で状態を共有するには、オブジェクトが一致している必要があります。
詳細情報: 一致するオブジェクト →
フレーム間で一致するオブジェクトを特定するには:
- 右サイドバーの[プロトタイプ]タブを開きます。
- キャンバスのオブジェクトまたはレイヤーをポイントします。
- Figmaでは、一致するオブジェクトを存在する他のフレーム内でハイライト表示します。
ネストされたオブジェクト
オブジェクトは、最上位フレーム全体で同じレイヤー名と同じ親のセットを持つ場合に一致しているとみなされます。
ヒント: 2つのオブジェクト間で状態を共有したくない場合は、一致しなくなるように名前を変更できます。
最上位フレーム
最上位フレームは、キャンバス上に直接配置されるフレームです。最上位のフレームには親オブジェクトがないため、次のいずれかを実行してそれらを一致させることができます。
- 同一レイヤー名の使用
- 一致する文字列とスラッシュを含むレイヤー名を使用します。たとえば、
Checkout / 1という名前の最上位フレームは、スラッシュの前のすべてが同一であるCheckout / 2という名前の別の最上位フレームと一致します。
ヒント: レイヤーの名前を変更する必要がありますか? レイヤー名を一括変更する方法についてはこちら→
新しい状態管理への更新
Figmaは、2023年5月24日に現在の状態管理コントロールに更新いたしました。
2023年5月24日以前に作成されたプロトタイプインタラクションの場合:
- インタラクティブコンポーネントは、フレーム間で状態を共有できません
- スクロールオブジェクトは、再度開いたときにその状態を記憶できません
- スクロールオブジェクトは、[スクロール位置を保持]設定がオンになっている場合にのみ、フレーム間で状態を共有できます。
注: 新しいインタラクションでは、オブジェクト名がフレーム間で一致している限り、スクロール位置は自動的に共有されます。
スクロール位置の保持と新しい状態管理への移行について詳細はこちら→
古いインタラクションを新しい状態管理コントロールに更新するには:
- プロトタイプコネクションをクリックして、インタラクションの詳細パネルを開きます。
- [更新]をクリックします。
ヒント: インタラクションを更新すると、キャンバスの下部に成功メッセージが表示されます。ファイル内の他のすべてのインタラクションを更新するには、成功メッセージバナーの[すべて更新]ボタンをクリックします。