Figmaのプロトタイプでポップアップを作る
こんにちわ。
Figmaを日々つかって楽しい日々を送っています。
Figmaのプロトタイプの機能でポップアップ及びモーダル表現が楽しくなる機能があります。
インタラクション機能のOpen Overlayです。
次の画像のようにポップアップを表示するボタンとポップアップがあるとします。
このような場合にボタンとポップアップをプロトタイプ機能でつなげた場合、デフォルトではNavigate Toというインタラクションがついています。
ここをOpen Overlayに変更します。
すると、Overlayに関するオプションが表示されたと思います
Centeredとなっているのは、画面配置に関して
下のチェックボックスは、
ポップアップ外の領域をクリックしてポップアップを閉じるか
オーバーレイに対しての色を設定できます。
今回は、モーダル外のクリックで戻るを設定し、オーバーレイのカラーはブラックのアルファ25%にしました。
次のような挙動になったと思います。
プロトタイプツールをいろいろ使ってきましたが
こんな簡単にポップアップを付けられることにおどろきました。
UIデザイナーとしてもう1つ驚いたのはCenteredにしたポップアップの配置設定をmanualにした際のUI挙動です。
ポップアップを表示するスクリーンにアルファがかかった表示モーダルが出るんです。
実装する側のきめ細やかさもすごい。。
この機能好きなんですが、今のところ使い所なくて使いたいです。
寿司を食っては戻す。。これくらいしか思いつきませんでした。
この記事が気に入ったらサポートをしてみませんか?