このレッスンでは、色違いの商品を選択するドロップダウンのつくり方を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
画像を表示するコンポーネントの作成
アートボード上の写真、カラーバリエーションの文字、ドロップダウンのボタンを選択します。そのまま、プロパティインスペクタのコンポーネントの右のプラスマークをクリックして、コンポーネントに変換します。
色違いの商品を表示する状態のために別のステートを作成します。新規ステートを作成し、名前を「black-up」とします。プロパティインスペクタで「black-up」が選択されている状態で、ブラックの商品写真を選択してコピーし、コンポーネント内の商品写真を選択して「アピアランスをペースト」を実行します。これで商品写真を差し替えられます。商品カラー名も忘れずに「ブラック」にします。
ドロップダウンのパーツをコンポーネントに追加
「初期設定のステート」に切り替えます。ドロップダウン用のリストをコピーして、コンポーネントをダブルクリックして編集状態にしてからペーストします。このように「初期設定のステート」にオブジェクトを追加すると、自動的に「black-up」ステートにも反映されます。
続けて、リストの表示：非表示を切り替えるためにマスクを追加します。長方形ツールを選びリストを隠すように長方形を描いたら、リストと長方形を選択して「シェイプでマスク」を実行します。
「初期設定のステート」では「グリーン」のシューズが表示されるため、リスト内の選択中のカラーを示すチェックマークは、「ブラック」の方の不透明度を0%にしておきます。
最後に、リストをマスク領域の上に移動して、リストが非表示になるようにします。
ドロップダウンのリストが表示された状態を作成
次は、ドロップダウンのリストが表示されている状態をつくります。新規ステートを作成し、名前を「green-down」とします。上に移動していたリストをマスクの位置に戻します。
同じように、「black-up」を選択してから新規ステートを作成し、名前を「black-down」とします。「green-down」と同じ位置に、ドロップダウンのリストを移動します。リスト内の選択中のカラーを示すチェックマークは、「ブラック」の方が表示されるように不透明度を変更します。
ドロップダウンにインタラクションを設定
プロトタイプモードに移動して、ドロップダウンにインタラクションを設定します。
「初期設定のステート」を選択し、ボタンを選択してから水色のプラスマークをクリックし、インタラクションを追加します。トリガーは「タップ」、種類は「自動アニメーション」、移動先は「green-down」ステートにします。これでボタンをタップすると、ドロップダウンのリストが表示された「green-down」ステートに遷移します。
次に、リストを非表示に戻すインタラクションを追加します。「green-down」のステートに切り替え、リスト内の「グリーン」を選んでプラスマークをクリックします。トリガーは「タップ」、種類は「トランジション」、移動先は「初期設定のステート」にします。
商品の色を切り替えるインタラクションを追加
最後に、商品画像を切り替えるインタラクションを追加します。「green-down」のステートのまま、リスト内の「ブラック」を選んでプラスマークをクリックします。トリガーは「タップ」、種類は「トランジション」、移動先は「black-up」ステートにします。
「black-up」ステートと「black-down」ステートにも、ここまでと同じ要領で、リストの表示を切り替えるインタラクションと、「グリーン」のシューズを選択するインタラクションを追加します。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開くと、設定したインタラクションを確認できます。