XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。XDを起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。長方形ツールで作成した正方形の上に、パスツールで作成した2つの点が配置してあります。正方形の背景色を白に変更しましょう。正方形と2つの点を選択してから、コンテキストメニューを開いて「コンポーネントにする」を選択します。これで選択した要素がコンポーネント化されます。続けて、コンポーネントに新しいステートを追加します。プロパティインスペクターの「初期設定のステート」の横のプラスボタンをクリックして「新規ステート」をクリックすると新しいステートを追加できます。追加したステートには「Check」と名前をつけます。Checkステートに、タップされた状態のボタンの見た目を指定します。Checkステートが選択された状態で、コンポーネントをダブルクリック等で編集モードにして、正方形の塗りを緑に変更します。続けて、2つの点をパスツールを使って引き延ばし、チェックの形状にします。これがチェックされた状態の見た目になります。ステートにインタラクションを設定インタラクションの設定は、プロトタイプモードで行います。ワークスペース上部のタブをクリックして、プロトタイプモードに移動しましょう。初期設定のステートが選択された状態であることを確認したら、チェックボックスを選択し、右に表示される青い矢印をクリックします。これでインタラクションが追加されます。追加したインタラクションの属性を設定します。プロパティインスペクターを使い、トリガーは「タップ」、アクションの種類は「自動アニメーション」、移動先は「Check」を選択します。イージングは「イーズアウト」に、デュレーションは「0.4秒」に設定します。続いてCheckのステートを選択し、同様にインタラクションを追加します。移動先に「初期設定のステート」を選択する以外は、先ほどの設定をそのまま利用します。ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開き、ボタンをクリックするとボタンの形状が変わることを確認しましょう。3/3(線、ペン)線ツールを選択し、始点をクリックして終点までドラッグすると、直線を描画できます。キーを押しながらドラッグすると、水平、垂直、45度の線を描画できます。2/3(インタラクションの追加)コンポーネントのステートにインタラクションを指定して、タップ操作で表示するステートを切り替えることが可能です。デスクトッププレビューを使用して、プロトタイプに設定したインタラクションをプレビューできます。2/3(インスタンスのカスタマイズ)作成したメインコンポーネントのすべてのコピーをインスタンスと呼びます。インスタンスは、メインコンポーネントの正確なコピーで、メインにリンクされているため、メインコンポーネントに変更...デザインシステムさらに強化。XDで、マウスオーバーに反応するボタンをデザインしましょう。デザインの動的な側面を表現すれば、アイデアを周囲に伝えることがずっと容易で確実になります。利用条件Cookieについて。