このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると形が変わるボタンのプロトタイプをデザインする手順を学びます。
Adobe XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
マスクの適用
予め、長方形ツールで作成した背景と、その上にテキストを載せたボタンが用意されています。このボタンをマスク機能を使って丸くします。
長方形ツールで正方形を描き、角丸の機能を使って円にしてから、ボタンの左に揃えて配置します。次に、ボタン関連の要素すべてを選択して、右クリックで表示されるコンテキストメニューから「シェイプでマスク」をクリックすると、カートアイコンのみが表示された、丸いボタンができます。
ボタンコンポーネントの作成とホバーステートの追加
丸いボタンをコンポーネントに変換します。右クリックで表示されるコンテキストメニューから「コンポーネントにする」を選択すると、ボタン周囲の枠線が青から黄緑色に変わります。これで、ボタンがコンポーネントに変換されました。
次に、ステート機能を使って、ホバーステートを追加します。ステート機能とは、ひとつのコンポーネントに対して、複数の状態を持たせることができる機能です。
プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックすると、「新規ステート」「ホバーステート」というメニューが表示されます。ここでは「ホバーステート」を選びます。
続けて、ホバーステートの見た目を編集します。この操作は、ホバーステートが選択されている状態で行います。ボタンをダブルクリックして、マスクグループを編集状態にしてから、マスクとして使用しているシェイプをボタンの幅と同じになるまで右に引き伸ばします。ここで、初期設定のステートとホバーステートを順に切り替えると、ボタンの形状の変化を確認できます。
ホバーステートのインタラクションの確認
インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。
ホバーステートを追加すると、自動的にホバーのインタラクションが追加されます。そのため、特に追加の設定をしなくても、マウスオーバーでボタンの見た目が変化します。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンの上にマウスカーソルを移動して、ボタンの形状が変わることを確認しましょう。
アニメーションの調整
より気持ちの良い動きになるよう、プロパティインスペクターでアニメーションを調整します。アニメーションのオプションの「イージング」をスナップに、「デュレーション」を0.4秒に変更します。
再度、プレビューウィンドウで確認すると、デフォルトの設定よりもスムーズにボタンの形状が変わることを確認できます。