オーバーレイとは
「上に置く」「重ね合わせる」という意味の英単語です。
その名の通りIT言語としても要素を重ね合わせる時に使われます。
オーバーレイの使い方
STEP
デザインを用意
背景デザインとオーバーレイさせるデザインを別々のアートボードで用意します。
今回はモーダルウィンドウのデザインを用意しました。
モーダルデザインの背景は最終的に重ね合わせるので、透過させています。
STEP
プロトタイプを開いて設定
左上のメニューよりプロトタイプの画面に切り替えます。
ボタンをクリックするとモーダルデザインが出るように設定をするので、ボタンからモーダルのアートボードへ線を繋げます。
オーバーレイのときは、アートボードを結ぶワイヤーが点線で表示されます。
今回はボタンをホバーステート設定をしているので、ホバーステートから設定します。
トリガーは[タップ]、種類は[オーバーレイ]、移動先はオーバーレイするアートボード
設定が終わったらプレビューで確認してみましょう。
プレビューのショートカットは、macOSは⌘＋Enter、WindowsはCtrl+Enter
まとめ
今回はXDでオーバーレイ機能を使用したデザインを紹介しました。
モーダルウィンドウで説明しましたが、スマホのハンバーガーメニューやキーボード表示などでも使える機能です。
ぜひ試してみてください。
