Thumb Sprain

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

By
約2分

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

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

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

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

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


完成 イメージ。

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

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

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

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

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

そして次が重要です!

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

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

おまけ

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

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

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

おすすめ書籍!

この記事を書いた人

GUU
普段の仕事はグラフィックで今年6年目。
海外旅行が趣味で、年に数回は海外へ逃避していました。
今は子供との時間を優先した生活を送っています。
ヒマな時にブログを書くので更新はゆっくりペースです。
ライターのYutaとマカオのWEBマガジンサイトを共同運営しています。
最近は、旅行行きたい欲が半端ないです・・・