Thumb Sprain

Adobe XDでモーダルウィンドウを作る方法。

By
約2分

WEB開発をしていると、
「サムネイル画像はクリックで拡大表示にしたい。」
「ログインはモーダルですかね。」
「本当に削除してもいいですか?の画面が欲しいですね。」
など、モーダル系の画面もメインと並行して作ることがよくあると思います。

制作者にとっては、たかがモーダル、されどモーダルですよね!

Adobe XDのプロトタイプで再現できれば、確認時にリアル感がでるので是非やってみましょう!

モーダルウィンドウの作り方

作り方はいたって簡単です。
今回の例として、フォトギャラリーのサムネイル画像をクリックすると、画像がモーダルで開くようにしてみます!


完成 イメージ。

Step1.アートボードを2つ用意しよう!

アートボード1:フォトギャラリー
アートボード2:サムネイル拡大(モーダルウィンドウ)
を用意しました。

モーダル感を出すため、サムネイル拡大の方に背景を敷いて透過させておきましょう!
今回は、透過率60%にしておきます。

Step2.プロトタイプモードでトリガーを設定しよう!

アートボード1のサムネイル画像→アートボード2へトリガーを伸ばしましょう。
(もしくは、トリガーの「移動先」に「アートボード2」を指定しましょう。)

そして次が重要です!

アクションを「オーバーレイ」に設定しましょう!

オーバーレイに設定すると、前のアートボードが下に配置されるので、モーダルをリアルに再現できます。
さらに、トリガーの線が破線になるので、トリガーが複数入り乱れている状況になってもわかりやすいです。

おまけ

緑色のクロスカーソルをクリックすると、薄くプレビューが表示されますよ。

以上、簡単でしたね!!!
冒頭でも書いたように、ログインとか確認画面にも使えるので便利です。
デザイナーなら、地味に背景の透過具合とか調整したいですもんね!

では、良いXDライフを!
制作のみなさん、共に頑張りましょう〜。

おすすめ書籍!

この記事を書いた人

GUU
■仕事:グラフィック(今年で7年目)
■分野:UIデザイン(Adobe XDをよく使う)
■趣味:ダラっと映画見る(Amazon Prime)
■燃料:ビール(ホワイトベルグにハマってる)
■子供:2歳/0歳(どちらも男の子)
■一言:「海外旅行に行きたい...」