プロトタイプのトリガー
プロトタイピングの概要については、プロトタイピングの開始ガイドをご覧ください。
すべてのプロトタイプは1つのインタラクションから始まります。各インタラクションに、トリガーとアクションがあります。
トリガーは、プロトタイプの処理を進行するきっかけとなるホットスポットとのインタラクションのタイプを決定します。これには、マウスや、タップ、ドラッグ、クリックなどのタッチ操作があります。
この記事は、プロトタイプ作成トリガーの詳細について説明します。
ヒント: プロトタイプインタラクションの作成方法、または使用可能なプロトタイプアクションの確認方法の詳細について説明します
クリック/タップ
プロトタイプでホットスポットをクリック (デスクトップ) またはタップ (モバイル) するとアクションがトリガーされます。画面内の数多くのさまざまな要素にクリックまたはタップトリガーを追加できます。
トリガーは、リンクを開く、メニューを使用する、Webサイトを検索するなどの操作に使用できます。また、ユーザーがボタンをクリックする、フォームに入力する、またはアラートを確定または破棄する必要がある場合にも使用できます。
ドラッグ時
画面で要素をドラッグする場合、アクションを実行できます。これは、フレーム全体またはスライダーなどの1つの要素で実行できます。
上下左右の任意の方向にドラッグして使用できます。この操作は、シンプルなスワイプジェスチャーや、ドラッグして更新するような複雑なアニメーションに適しています。
ドラッグすると、移行中に前後に移動できます。これにより、スワイプジェスチャーの後にアクションを実行せずに連続した動きを生み出せます。
マウスオーバー
ホットスポットにカーソルを合わせると、アクションがトリガーされます。これにより、ツールチップ、画面プロンプト、または状態の変化を再現することができます。
ホットスポットからカーソルを動かすと、ユーザーは元のフレームに戻ります。これにより、ユーザーを現在の画面から離れないようにする場合に最適なインタラクションが提供されます。
押下中
デスクトップでマウスやトラックパッドをクリックしたままにすると、アクションがトリガーされます。または、モバイルデバイスでタップしたままにしてもアクションがトリガーされます。
このトリガーを使用して、ドロップダウンメニューをナビゲートしたり、iOSで3Dタッチを使用してプレビューを表示するなどの長押しのインタラクションを複製したりできます。
リリースすると、ユーザーは元のフレームに戻ります。これは、一時的なインタラクションや状態の変更をキャプチャするオーバーレイに最適です。
キーボード/ゲームパッド
キーボード/ゲームパッドトリガーを使用すると、キーボードショートカットとのインタラクションを複製できます。これは、キーボード、コントローラー、およびゲームパッドからのユーザー入力に適用されます。
トリガーは、1つのキーやボタン、またはキーの組み合わせになります。
たとえば、トリガーはユーザーがコントローラーのEnterキーまたは✕ボタンを押すこと、またはShift - Kなどのショートカットを使用することに基づいています。
注: 当社は、Xbox One、PS4、Nintendo SwitchのPro Controllerを公式にサポートしています。その他のコントローラーも動作しますが、Figmaに表示されるボタンはコントローラーの正確に反映しない可能性があります。
マウスエンター
これにより、マウスがホットスポットエリアに入ると移動先フレームが表示されます。このエリアは、ボタンなどの小さなエリアや画面全体のセクションになる場合があります。
これを使用して、マウスがフィールドに入るときに、ドロップダウンメニューにオプションを表示することができます。他のインタラクションを実行するまで、たとえばアイテムを選択またはフィールドの外をクリックするまで、メニューは開いたままになります。
マウスエンターイベントをセットアップしたら、ホットスポットを離れたときにアクションを反転させるため、マウスリーブトリガーをセットアップするとよいでしょう。
注: 2023年11月16日、トリガー名と説明をさらに正確に反映するため、マウスエンタートリガーの動作を更新しました。
- マウスインインタラクションは、マウスがホットスポット内に移動すると、常にトリガーします。
- マウスエンターインタラクションは、マウスがホットスポットに最初に入ったときだけトリガーします。
既存のプロトタイプが影響を受けないようにするため、 2023年11月16日より前に作成されたインタラクションは、現在マウスインというラベルが付けられています。
マウスインインタラクションは作成できなくなりました。すべての新しいインタラクションはマウスエンタートリガーを持っています。
マウスリーブ
これによって、カーソルがホットスポットエリアを離れると、移動先フレームが表示されます。
フィールドを完了していない、またはボックスをチェックしていない場合のアラートなどのオンスクリーンプロンプトに、これを使用できます。
注: 2023年11月16日、トリガー名と説明をさらに正確に反映するため、マウスリーブトリガーの動作を更新しました。
- マウスアウトインタラクションは、マウスがホットスポットの外側に移動すると、常にトリガーします。
- マウスリーブインタラクションは、マウスがホットスポットから最初に離れたときだけトリガーします。
既存のプロトタイプが影響を受けないようにするため、 2023年11月16日より前に作成されたインタラクションは、現在マウスアウトというラベルが付けられています。
マウスアウトインタラクションは作成できなくなりました。すべての新しいインタラクションはマウスリーブトリガーを持っています。
マウスダウン(タッチダウン)
最初にマウスを押したとき、またはパッドにタッチしたときに、移動先フレームをトリガーします。モバイルデバイスの場合は、ユーザーが最初に指でホットスポットにタッチしたときにトリガーします。
マウスアップ(タッチアップ)
マウスまたはパッドを放したときに、移動先フレームをトリガーします。モバイルデバイスの場合は、ユーザーの指がホットスポットから離れたときにトリガーします。
- オーバーレイを開くために、マウスダウントリガーをメニューヘッダーに適用します。
- マウスアップインタラクションをオーバーレイのメニューアイテムに適用します。
- マウスを放したら、関連付けられたフレームに移動します。
ヒント: マウスダウンとマウスアップトリガーをともに使用して、ユーザーのによるドロップダウンメニューの移動を再現できます。
アフターディレイ
アフターディレイトリガーによって、ユーザーが特定のフレームで一定の時間を費やすと、アクションをトリガーすることができます。遅延の時間をミリ秒単位で設定する必要があります。
動画到達時
動画到達時トリガーは、動画ファイルを開始するすべてのコネクションで利用可能です。
これにより、動画が特定のタイムスタンプに到達したときのアクションを設定することができようになります。割り込み動画広告などのためにプロトタイプを作る場合、または動画再生中にオーバーレイメッセージをトリガーする場合に役に立ちます。
動画到達時トリガーを選択すると、タイムスタンプを入力するフィールドが表示されます。
注: 動画の再生時間を超えたタイムスタンプを入力すると、動画終了時にアクションがトリガーされます。
動画終了時
動画終了時トリガーは、動画ファイルを開始するすべてのコネクションで利用可能です。
これにより、動画が終了したときのアクションを設定することができようになります。動画を順番を付けて並べる場合、またはインタラクティブな動画再生機能を作成する場合に役に立ちます。