動画の内容はテキストで読むこともできます

XDユーザーズガイドのテキストを読みながら学ぶとより理解できます

公式テキストを読む

Tutorial

オーバーレイを使用したプロトタイプの作成

この動画のサンプルファイル

prototyping-add-overlays.zip (38 MB)

Adobe XDのプロトタイプでは、アートボードの上に別のアートボードを重ねて表示できます。ドロップダウンリスト、入力用キーボードなどの表現に便利です。

まず、プロトタイプモードで、インタラクションのトリガーとなるオブジェクトからオーバーレイ表示するアートボードにコネクタを接続します。コネクタを選択した状態で、プロパティインスペクターから次のオプションを設定します。

  • トリガー:「タップ」を選択します。
  • アクション:「オーバーレイ」を選択します。
  • アニメーション:アニメーションの種類を選択します。「上にスライド」を選択すると、画面下からアートボードが表示されます。

オーバーレイ表示する位置を調整するには、ソースアートボード上の緑色のバウンディングボックスをドラッグします。デスクトッププレビューを使うと、実際の動作を確認できます。