【XD】「モーダルウィンドウ」の作成方法

「モーダルウィンドウ」を作成したいのですが、どう作ればいいんですか〜？

「2分」ほどで、わかる内容にまとめたのでさっそく解説していきますね〜

1.今回作成する「モーダルウィンドウ」

今回は、以下のようなモーダルウィンドウを作成していきます。

2.「モーダルウィンドウ」の作成手順

①「モーダルウィンドウ非表示画面」を準備。

②隣に「モーダルウィンドウ表示画面」を準備。
※背景を黒透過にするとモーダル感がでます。

③「プロトタイプ」をクリック。

④「モーダルウィンドウ非表示画面」の「ボタン」をクリック。
⑤「トリガー」を「モーダルウィンドウ表示画面」へもっていく。

⑥インタラクションの「トリガー：タップ」に選択。
⑦アクションの「種類：オーバレイ」「移動先：モーダルウィンドウ表示画面」「アニメーション：ディゾブル」「イージング：イーズアウト」「デュレーション：0.5秒」に選択。
⑧「プレビュー」ボタンをクリック。

⑨「モーダルウィンドウ」の動きを確認。

さいごに

「モーダルウィンドウ」をつくることができました〜

またつくってみてください〜