オーバーレイを使用する - Adobe XDのチュートリアル

このレッスンでは、 オーバーレイについて説明します。 教材として エクササイズのフォルダにある 10フォルダの中の 10_03.xd を使います。 Top ページの ハンバーガアイコンを押すと Menu が上に重なるという 動きを設定していきます。 アートボード Menu は 「アピアランス」の「塗り」を なしに設定してあり、 アートボードと同じサイズの長方形を 不透明度 90％の状態で 下に置いているという準備をしています。 では、「プロトタイプ」モードに切り替えて 作業をしていきましょう。 まず、アートボード Top の右上にある ハンバーガーアイコンをクリックし、 接続ハンドルをドラッグして、 Menu のアートボードの上で放します。 「アクション」の「種類」を 「オーバーレイ」に設定します。 自動的に接続ハンドルは 点線に変わりました。 続いて Menu の アートボードの右上にある 閉じるボタン、 ×ボタンの接続ハンドルをクリックし 「種類」を「ひとつ前のアートボード」に 設定しておきます。 では、デスクトッププレビューで 確認しましょう。 ハンバーガーアイコンをクリックすると Top ページの上に重なるようにして Menu が表示されます。 不透明度 90％ の長方形があるので 少し後ろが透けて見えるという 状態になっています。 ×ボタンを押すと元に戻ります。 今度はハンバーガーアイコンの 接続ハンドルが選択されている状態で 「アニメーション」を「下にスライド」に 変更しましょう。 もう一度 デスクトッププレビューを確認すると ハンバーガーアイコンを押すと、 下にスライドして Menu が表示されて ×ボタンを押すと、 逆再生して閉じるという動きができました。 このようにオーバーレイを使用すると、 アートボードの上に 別のアートボードを重ねて 表示するということができます。 このレッスンでは、 オーバーレイについて説明しました。