このレッスンでは、商品画像のズーム機能と購入数を指定するカウンターのつくりを解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプルが表示されます。
画像を表示するコンポーネントを作成
シューズの画像と拡大ボタンを選択し、プロパティーインスペクタのコンポーネントの横のプラスマークをクリックしてコンポーネントにします。次に、拡大した画像を表示するためのステートを追加します。名前は「zoom」とします。
「zoom」ステートを選択した状態で、コンポーネントの中の画像をダブルクリックして選択し、変形から「水平方向と垂直方向のスクロール」をオンにします。このとき画像が少しトリミングされるので、元の大きさに戻します。
続けて、画像を拡大します。Macではoption、WindowsではAltを押しながら拡大すると中心を起点に拡大できます。拡大した画像には「垂直方向と水平方向のスクロール」が設定されているため、プレビューすると自由にドラッグできます。
最後に、拡大ボタンを縮小ボタンに変更します。
ズームのインタラクションを設定
ボタンをクリックして画像を拡大・縮小できるようにインタラクションを設定します。まず、「初期設定のステート」を選択します。拡大ボタンを選択し、青いプラスマークをクリックしてインタラクションを追加します。トリガーは「タップ」、種類は「トランジション」、移動先は「zoom」のステート、アニメーションは「なし」にします。
次に、「zoom」のステートに切り替えます。縮小ボタンを選択し、プラスマークをクリックしてインタラクションを追加します。移動先は「初期設定のステート」にします。その他の設定は拡大ボタンと同じです。
プレビューすると、ボタンで拡大と縮小を切り替えられることが確認できます。
カウンターのコンポーネントを作成
ここからは、商品の数を指定するカウンターを作成します。この作業はデザインモードで行います。
まず、数量と商品総額のパーツを選択し、コンポーネントに変換します。数量を2に増やした状態をつくるために新規ステートを作成し、名前を「数量2」とします。「数量2」ステートを選択して、数量の数字を2に変更します。商品総額も、2倍の金額になるように数字を変更します。
数値が増減するインタラクションを設定
プロトタイプモードに移動します。まず、数量を増やすインタラクションを設定します。
「初期設定のステート」に切り替え、数量の横の「＋」ボタンを選択し、プラスマークをクリックしてインタラクションを追加します。移動先を「数量2」のステートにします。その他のインタラクションの設定は拡大ボタンと同じにします。
次は、数量を減らすインタラクションを設定します。「数量2」のステートに切り替え、数量の横の「－」ボタンを選択し、プラスマークをクリックしてインタラクションを追加します。移動先を「初期ステート」にします。その他のインタラクションの設定は拡大ボタンと同じにします。
プレビューウインドウを開くと、ボタンをクリックして、商品数と総額を変えられることが確認できます。