Figma 長押し動作のプロトタイプを作る
長押し動作のプロトタイプを作る
- Figma
- 機能
- プロトタイプパネル
- インタラクション

概要
プレビューの表示など、長押し中の動作を再現します。 作成した動作の確認はプレビューで行います。
- インタラクションの追加
- インタラクションの削除
- インタラクションの種類
- 操作後の動作
1. インタラクションの追加
再現したい操作と、操作後の動きを追加
2. インタラクションの削除
再現したい操作と、操作後の動きを削除
3. インタラクションの種類
操作時のインタラクションの種類を設定します。 クリックするとインタラクション詳細パネルが開きます。ドロップダウンで操作の種類を設定することができます。
4. 操作後の動作
操作後の動作を設定します。ドロップダウンで操作後の動作を設定することができます。
【長押し操作の詳細設定】 長押し中のインタラクションはプレビュー時、長押しすると動作し、離すと元の状態に戻ります。 例えば、「オーバーレイを開く」を設定する時には、対になる「オーバーレイを閉じる」を設定しなくても動作します。 長押し中の動作は主に、以下を使用します。
オーバーレイを開く
アラートの表示や、モーダルウィンドウを開く時に使います。 長押しで動作するオブジェクトを選び、操作=押下中 操作後の動作=オーバーレイを開く を選択します。
移動先を指定します。 指定の方法は2通りあります。
方法① ドラッグで矢印で繋ぐ 方法② プルダウンの選択肢から選ぶ
方法① ドラッグで矢印で繋ぐ
クリックするオブジェクトから、移動先のフレームに矢印を引っ張ります。 または移動先を選択する欄が追加表示されるので、その中から選択します。
起点=Hot Spot 遷移先=Destination 両者をつなぐ線=Connection
と言います。
方法② プルダウンの選択肢から選ぶ
移動先を選択する欄が追加表示されるので、その中から選択します。
押下中のインタラクションは、長押しすると動作し、離すと元の状態に戻るので、対になる「オーバーレイを閉じる」は設定しなくても閉じます。
上記のように繋いだら、遷移前のオブジェクト(ボタン)を選択しプレビューをします。 プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。
Designpedia Team
2024年2月29日(木) 公開