XDのアニメーション機能を使って、マウスオーバーすると不透明度が変わるボタンのプロトタイプをデザインする手順を学びます。XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。長方形ツールで作成した背景と、その上にテキストを載せたボタンが用意されています。これをコンポーネントに変換します。右クリックで表示されるコンテキストメニューから「コンポーネントにする」を選択すると、ボタン周囲の枠線が青から黄緑色に変わります。これで、ボタンがコンポーネントに変換されました。次に、ステート機能を使って、ホバーステートを追加します。ステート機能とは、ひとつのコンポーネントに対して、複数の状態を持たせることができる機能です。プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックすると、「新規ステート」「ホバーステート」というメニューが表示されます。ここでは「ホバーステート」を選びます。続けて、ホバーステートの見た目を編集します。この操作は、ホバーステートが選択されている状態で行います。ボタンをダブルクリックして背景を選択したら、不透明度を80%に変更します。ここで、初期設定のステートとホバーステートを順に切り替えると、不透明度の変化を確認できます。ホバーステートのインタラクションの確認インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。ホバーステートを追加すると、自動的にホバーのインタラクションが追加されます。そのため、特に追加の設定をしなくても、マウスオーバーでボタンの見た目が変化します。ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンの上にマウスカーソルを移動して、不透明度が変わることを確認しましょう。このように、ホバーステートを追加するだけで、簡単にマウスオーバーで不透明度が変わるボタンを作成できます。アニメーションの調整プロトタイプモードでは、プロパティインスペクターでアニメーションを調整することができます。「イージング」を「イーズアウト」から「バウンス」に変更し、「デュレーション」を「0.3秒」から「0.6秒」に変えると、2回フェードする動きになります。オブジェクトへカラーの塗りを適用するには、まずオブジェクトを選択して、次にカラーピッカーを表示します。1/3(ホバーステート)コンポーネントに複数のステートを追加すると、ユーザーの操作によって外観が変化するインタラクティブなコンポーネントを開発できます。デスクトッププレビューを使用して、プロトタイプに設定したインタラクションをプレビューできます。1/3(作成方法)デザイン全体で繰り返される要素を作成するとき、コンポーネントを使うと柔軟に効率よく作業することができます。利用条件Cookieについて。