今回はAdobe XDを使って、WEBでよく使用されるライトボックス（ポップアップ）の表現の仕方を紹介します。
ライトボックスはCSSのz-indexとpositionプロパティでコーディングされ、画面を覆う様（オーバーレイ）に表示されるのが一般的な方法です。
今回はなるべくWEBの挙動に近いオーバーレイをXDで使って表現します。
XDのオーバレイでライトボックスを表現する
①まずは適当なデザインを作成しましょう。
今回はギャラリーのレイアウトを作成しました。この何かの写真をクリックしたらライトボックスが開き、その中に元写真が表示される仕様を作成します。
②まずは、写真にマウスを乗っけたら表示されるインターフェースを作成します。よくあるのは下記の様な薄い色のフィルターと+マークでしょう。
③コンポーネント（マスター）でステートを作成します。
初期設定のステートでは②で作成したのマウスホバー時のインターフェイスを非表示にします。追加したステートでは表示させます。
④別のアートボートにライトボックスが開いた時のデザインを作成しときます。
⑥プロトタイプモードに移行し③で作成した追加ステートに、タップ後のアニメーションを④で作成したアートボードに対して追加します。そして最後にアクションをオーバーレイに変更すれば完成です。
これで完成です。
実際の動きは、XDの画面右上にある▶︎マークを押すと確認できます。
今回作成したライトボックスをプレビューすると以下の様になります。
以上が「XDのオーバレイでライトボックス（ポップアップ）を表現する」でした。
