見出し画像

Figmaのプロトタイプでポップアップを作る

こんにちわ。
Figmaを日々つかって楽しい日々を送っています。

Figmaのプロトタイプの機能でポップアップ及びモーダル表現が楽しくなる機能があります。

インタラクション機能のOpen Overlayです。
次の画像のようにポップアップを表示するボタンとポップアップがあるとします。

スクリーンショット 2020-04-28 22.19.38

このような場合にボタンとポップアップをプロトタイプ機能でつなげた場合、デフォルトではNavigate Toというインタラクションがついています。

スクリーンショット_2020-04-28_22_17_15

ここをOpen Overlayに変更します。

スクリーンショット 2020-04-28 22.10.06

すると、Overlayに関するオプションが表示されたと思います

スクリーンショット 2020-04-28 22.29.51

Centeredとなっているのは、画面配置に関して
下のチェックボックスは、
ポップアップ外の領域をクリックしてポップアップを閉じるか
オーバーレイに対しての色を設定できます。

今回は、モーダル外のクリックで戻るを設定し、オーバーレイのカラーはブラックのアルファ25%にしました。
次のような挙動になったと思います。

画像5

プロトタイプツールをいろいろ使ってきましたが
こんな簡単にポップアップを付けられることにおどろきました。
UIデザイナーとしてもう1つ驚いたのはCenteredにしたポップアップの配置設定をmanualにした際のUI挙動です。

スクリーンショット 2020-04-28 22.58.01

ポップアップを表示するスクリーンにアルファがかかった表示モーダルが出るんです。
実装する側のきめ細やかさもすごい。。

この機能好きなんですが、今のところ使い所なくて使いたいです。

画像7

寿司を食っては戻す。。これくらいしか思いつきませんでした。

この記事が気に入ったらサポートをしてみませんか?