【忙しい方向け】Figmaのプロトタイピングでモーダルを作る方法2選

忙しい方向けにサクッとプロトタイプでモーダルウィンドウを表現する方法をご紹介します。
Figmaはデフォルトの機能だけでもプロトタイピングの機能が充実しているので簡単に実装可能です。
デザイナーさんはもちろんですが、Figmaわからんぞ！というエンジニアさんにもわかるよう解説してみようと思います。

やり方1:ページを複製してモーダル込みの画面を作る

まずはシンプルかつ思いつきやすい方のやり方から。

モーダル表示前の画面と、モーダルを表示した後の画面を作ります。（グレー背景なども含め）
そしてトリガーとなるボタンを押したらそのページに遷移するようプロトタイプをつなぐだけです。
AnimationはDisolveかSmartAnimateにしておくと綺麗に遷移してくれます。

このやり方のいいところは、本当にただつなぐだけでいいのでプロトタイプの設定が全然わからなくてもとりあえず作れる、という点です。
モーダルウィンドウの位置も自由に調整できるのでその点もわかりやすいですね。

逆にデメリットとしては、モーダルの下にある要素に変更があった場合に毎回差し替えないといけないところです。
もちろんコンポーネントにしておけば変更が反映されるので手間はないのですが、コンポーネント化は後回しで作る場合もあるかと思いますので、柔軟性に欠けますね。
また、画面全体が遷移しているので、ほんの一瞬ですが画面全体がチラつきます。

やり方2:モーダルだけのフレームを作る

こっちが本命のやり方です。
XDにはこの機能はなかった気がするので、普段XDを触っている方には慣れないやり方かもしれませんが、設定を覚えておけば柔軟かつ自動で綺麗なモーダルを再現できます。
後から色々変更を加える可能性がある場合はこちらの方法がおすすめです。

まずモーダルが出る前の画面を用意し、横にモーダルだけのフレームを作ります。
※この時グレーの透過背景は作らなくてOKです。

トリガーとなるボタンとモーダルのフレームをつなぎ、先ほどはNavigato toとしていたところを「Open overlay」に設定します。
あとはOverlayのオプションで位置を「centered」にしてあげれば画面中央にモーダルが自動で出てくれます。

表示位置に関してはいくつか設定があり、左や右、下など諸々設定が可能です。
CSSのプロパティを思い浮かべてもらえれば挙動をイメージしやすいかもしれません。

モーダルの閉じ方

やり方1の方は前の画面に遷移をつなげればいいのですが、こちらでは少し異なります。
閉じるボタンのトリガー設定で「Close Overlay」と設定すると閉じる動きを表現できます。

グレー背景を作りたい

今回はグレー背景を作成していないのですが、Figmaくんが自動的にグレー背景を作ってくれる設定があります。
「add background behind overlay」にチェックを入れて背景色を設定するとモーダル表示時に自動で背景が作成されます。

グレー背景を押したらモーダルを閉じたい

より実装時のイメージに近づけるためにグレー背景を押したらモーダルを閉じたい、という時がありますよね。
その場合は「close when clicking outside」をチェックすれば閉じてくれるようになります。

好きな場所にモーダルを置きたい

ここまでの説明だと、自動でモーダルの位置が決められてしまうため方法1みたいに自由にデザインできないじゃないかと思われてしまうかもしれません。
が、さすがFigmaですね。ちゃんとマニュアル配置にも対応しています。
Overlayの位置オプションを「manual」にすると、半透明でモーダルが現れますので好きな位置においてみてください。これで自由にモーダルを出現させられます。

モーダルだけでなくOpenOverlayは色々応用ができるプロトタイピング機能なので、ぜひ色々試してみてください。