Adobe XDでポップアップオーバーレイを作成する方法

Adobe Studioチームのメンバー、グラフィックアーティストのErica Larson氏は、アイデアが刺激されるデザイン作りに毎日取り組んでいます。そのデザインを見た人がさらに何かを作りたいと思うようなデザインを目指しています。

Larson氏は先頭のアートボードを複製することから作業を開始します。それには、アートボード名をクリックして、Alt（Windows）またはOption（macOS）キーを押しながらアートボードを右側にドラッグします。

アートボード上のいくつかの要素を初期状態では非表示にしておき、ユーザーがアプリを操作したときに表示され、また非表示に戻るようなデザインを考えています。Shiftキーを押しながらクリックして、複数のアートボード上の要素をまとめて選択し、プロパティインスペクターの不透明度スライダーを0％にします。

「プロトタイプ」タブをクリックして、インタラクションを定義します。最初のiPhoneアートボードで設定メニューアイコンを選択し、ワイヤーをMenuアートボードまでドラッグします。アクションを「オーバーレイ」に、アニメーションを「右にスライド」に設定して、メニューがアートボードにスライド表示されるようにします。次に、オーバーレイの緑の円をドラッグして、メニューを表示する位置に配置します。次のiPhoneアートボードでも設定メニューアイコンを選択して、同じ手順を繰り返します。

次に、Infoアイコンから2つ目のiPhoneアートボードにワイヤーをドラッグします。今回は非表示だった要素がフェードイン表示されるようにするため、アクションを「トランジション」に、アニメーションを「ディゾルブ」に設定します。

最後に、モデルのチークのホットスポットからProductオーバーレイにワイヤー接続します。ドットを選択して、ワイヤーをProduct overlayアートボードにドラッグし、インタラクションを定義します。次にオーバーレイを2つ目のアートボード上の表示させる位置に配置します。最後に、デスクトッププレビューをクリックして、すべての動きをテストします。

モバイルアプリ用の再利用可能な画像とメニューのオーバーレイをデザインしましょう。

注意：このチュートリアル付属のプロジェクトファイルは練習目的でのみご利用ください。