このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
ボタンコンポーネントの作成とステートの追加
長方形ツールで作成した正方形の上に、パスツールで作成した2つの点が配置してあります。まず、正方形の背景色を白に変更しましょう。正方形と2つの点を選択してから、コンテキストメニューを開いて「コンポーネントにする」を選択します。これで選択した要素がコンポーネント化されます。
続けて、コンポーネントに新しいステートを追加します。プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックして「新規ステート」をクリックすると新しいステートを追加できます。追加したステートには「Check」と名前をつけます。
Checkステートに、タップされた状態のボタンの見た目を指定します。Checkステートが選択された状態で、コンポーネントをダブルクリック等で編集モードにして、正方形の塗りを緑に変更します。続けて、2つの点をパスツールを使って引き延ばし、チェックの形状にします。これがチェックされた状態の見た目になります。
ステートにインタラクションを設定
インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。
初期設定のステートが選択された状態であることを確認したら、チェックボックスを選択し、右に表示される青い矢印をクリックします。これでインタラクションが追加されます。
追加したインタラクションの属性を設定します。プロパティインスペクターを使い、トリガーは「タップ」、アクションの種類は「自動アニメーション」、移動先は「Check」を選択します。さらに、イージングは「イーズアウト」に、デュレーションは「0.4秒」に設定します。
続いてCheckのステートを選択し、同様にインタラクションを追加します。移動先に「初期設定のステート」を選択する以外は、先ほどの設定をそのまま利用します。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンをクリックするとボタンの形状が変わることを確認しましょう。