プロトタイプのアクション
はじめに
この機能を使用できるユーザー
すべてのプランで利用できます。
ファイルの編集可のアクセス権があれば、誰でもプロトタイプを作成できます。
プロトタイピングの概要については、プロトタイピングの開始ガイドをご覧ください。
アクションは、プロトタイプの次のステップまたはイベントを定義します。それはインタラクショントリガーイベントからの応答です。たとえば、別のフレームに移動する、外部URLを開くなどです。
インタラクションとアニメーションを含むプロトタイプの作成方法についてはこちら→
アクションの種類
次に移動
プロトタイプ内のフレーム間を移動する操作です。これは、画面全体の移動で使用する最も一般的な種類の操作です。
戻る
前の画面に戻ることができます。プロトタイプの[戻る]ボタンのシミュレーションに最適です。
バリアブルの設定
[バリアブルを設定]アクションを使用すると、プロトタイプトリガーの結果としてバリアブルの値を設定または変更できます。
詳細情報: プロトタイプでのバリアブルの使用 →
条件付きアクション
アクションを実行する前にif/else条件ステートメントを使用して、特定の条件が満たされているかどうかを確認します。
詳細情報: 条件付きアクションの使用 →
次にスクロール
プロトタイプまたはネストされたスクロール可能なコンテナを、最上位フレーム内のオブジェクトにスクロールします。カルーセルなどのスクロール可能な要素を含むアンカーリンクやインタラクションの再現に便利です。
プロトタイピングパネルの[インタラクション]セクションを使用して[次にスクロール]を追加すると、スクロール可能なフレーム直下の子要素のみを選択できます。最上位フレーム内のオブジェクトを選択してから、ヌードルを移動先に設定するオブジェクトにリンクします。
[次にスクロール]では、[アニメート]オプションを使用してスクロールアニメーションを[即時]または[イーズに設定]に設定できます。
メモ: 隠れているフレームを移動先としてコネクションをドラッグするには、[デザイン]パネルのフレームセクションから[コンテンツを隠す]をオフにして、最初に移動先フレームを表示しておきます。
リンクを開く
プロトタイプ外のURLに移動できます。メインナビゲーションで使用できない外部リンクや追加リソースの使用に最適です。
このオプションを選択してから、表示されるフィールドにURLを入力します。
ヒント [リンクを開く]のホットスポットをクリックすると、リンクが新しいタブで開きます。これが外部Webサイトへのリンクの場合、Figma以外の場所に移動すると表示されます。表示されるチェックボックスを使用して、以後はこのジャンプページをスキップできます。この設定は現在のデバイスにのみ保存されます。
オーバーレイを開く
現在のフレームの上に移動先フレームを表示します。デザイン内のボタンや他のオブジェクトからモーダル、ツールチップ、警告などを表示する時に使用できます。
オーバーレイを閉じる
このアクションにより、元のフレーム上に表示されているオーバーレイを閉じたり破棄したりできます。これを使用して、画面プロンプトや許可や却下を促すアラートを再現できます。
オーバーレイの入れ替え
この操作により、フレームの入れ替えを実行できます。通常のフレーム内のホットスポットからトリガーされる場合は、[次に移動]オプションと同様の動作になります。
オーバーレイの入れ替えをオーバーレイのホットスポットに適用すると、現在のオーバーレイが新しい[移動先フレームと入れ替えられます。新しいオーバーレイでは、元のオーバーレイと同じ設定が保持されます。
メモ: [オーバーレイの入れ替え]を使用しても、そのフレームはプロトタイプの履歴に追加されません。[戻る]操作を使用してオーバーレイ間を移動できるようにしたい場合は、代わりに[次に移動]オプションを使用することをおすすめします。
動画を再生/一時停止
動画を再生/一時停止アクションは、動画上で終了するあらゆるインタラクションに利用できます。このアクションが選択されていると、次のアクションを利用できます。
- 動画を再生 - 動画の再生を開始します
- 動画を一時停止 - 動画を一時停止します
- 再生/一時停止を切り替える - 動画の再生と一時停止を切り替えます
動画のミュート/ミュート解除
動画をミュート/ミュート解除アクションは、動画上で終了するあらゆるアクションに利用できます。このアクションが選択されていると、次のアクションを利用できます。
- 動画をミュート - 動画の音声をオフにします
- 動画をミュート解除 - 動画の音声をオンにします
- ミュート/ミュート解除を切り替える - 動画の音声のオン/オフを切り替えます。
特定の時間に設定
特定の時間に設定アクションは、動画上で終了するあらゆるインタラクションに利用できます。このアクションは、動画の特定のタイムスタンプにジャンプします。ジャンプ先のタイムスタンプは、特定の時間に設定アクションの選択後に設定できます。
メモ: 秒数で指定したジャンプ先が動画の合計時間より後にある場合は、動画の末尾にジャンプします。動画の繰り返し再生の設定がオンの場合は、動画の最初からもう一度再生されます。
時間の前/後へジャンプ
時間の前/後へジャンプアクションは、動画上で終了するあらゆるインタラクションに利用できます。この動画が選択されている場合、次のアクションを利用できます。
- 前へジャンプ - 再生中の動画を早送りする秒数を設定します。
- 後へジャンプ - 再生中の動画を巻き戻す秒数を設定します。
このアクションは、インタラクティブな動画再生機能をデザインする際に役に立ちます。
メモ: 秒数で指定したジャンプ先が動画の合計時間より後にある場合は、動画の末尾にジャンプします。動画の繰り返し再生の設定がオンの場合は、動画の最初からもう一度再生されます。
次に変更
インタラクティブコンポーネントでプロトタイプを作成する場合は、次に変更アクションを使用できます。
コンポーネントセットのバリアントを切り替えるには、変更アクションを使用します。たとえば、チェックボックスアイコンのコンポーネントセットがあり、チェックされているバリアントとチェックされていないバリアントがあるとします。変更アクションを使用すれば、プロトタイプ内のチェックされているバリアントとチェックされていないバリアントとを切り替えることができます。
ヒント: ネストされているインスタンスで次に変更アクションを使用すると、親コンポーネントのバリアントを変更できます。