今回はタイトルの如くです。
Figmaのプロトタイプで、ボタンを押すとモーダルが開く挙動の設定を、備忘録も兼ねて記しておきたいと思います。
モーダルの設定方法
例として、動画の再生ボタンを押すとモーダルが開く、という挙動の設定をしてみます。
①デザインを用意
まずは、ベースとなるデザインとモーダルのデザインを用意します。
②インタラクションを設定
動画（再生ボタン）からモーダルに対してコネクションを繋ぎ、インタラクションの設定にあるアクションを「次に移動」から「オーバーレイを開く」に変更します。
③モーダルの調整
位置はデフォルトの「中央」のまま、「外部をクリックしたときに閉じる」にチェックを入れます（ここはお好みで）。そして、「背景」にチェックを入れて元のデザインとモーダルの間に薄い黒を設定します（今回は70%にしました）。
④完成
プルダウンボタンに応用する方法
モーダル表示を応用して、プルダウンボタンをプロトタイプで再現することもできます。
①プロトタイプを設定
デザイン準備〜インタラクションを「オーバーレイを開く」に設定するところまでは先ほどと同様です。
②位置を調整
プルダウンボタンの場合は、位置を「手動」に変更します。
これで任意の位置にオーバーレイの要素を移動できるようになります。
ボタンの上にオーバーレイの要素が表示されるので、任意の位置に動かして調整します。
最後に「外部をクリックしたときに閉じる」にチェックを入れます。
③完成
おわりに
私はプロトタイプでモーダルを作る際、元々は「モーダルが開いた状態の画面」を別で作成し、画面をひとつずつ繋いでいたのですが、Figma自体にその機能があることを教えてもらい、かなりの時短かつ調整が楽になりました。
しばらくの間、「今更ながら知れてよかった…」と「私はなんという無駄な作業を…」の両方の感情がせめぎ合っていましたが、落ち着いたので備忘録にしました。
案件を進めていると、どうしてもデザインそのもののクオリティに注視してしまいがちですが、プロトタイプなど、実際にクライアントやチームが見るものに対してのクオリティも高めていくのが理想ではあるので、こういった機能もしっかり身につけていきたいですね🐈
プロトタイプのナレッジ記事、こちらにもあります☕️
弊社デザイナーが書いた、ループするアニメーションをFigmaプロトタイプで再現するというナレッジもよろしければどうぞ。
KVやカルーセルなど、ループで流れる表現の具現化に便利です。