【XD】「ボタンホバー」の作成方法

【XD】「ボタンホバー」の作成方法

アイコン

ボタンホバー」を作成したいのですが、どう作ればいいんですか〜?

アイコン

5分」ほどで、わかる内容にまとめたのでさっそく解説していきますね〜




1.今回作成する「ボタンホバー」

今回は、以下のような一般的なボタンホバーを作成していきます。



2.「ボタンホバー」の作成手順

①「ボタン」を準備。

①「ボタン」を準備。

②「ボタン」を全選択。
※文字も含みます。
③右クリックで「コンポーネントにする」をクリック。

②「ボタン」を全選択。 ※文字も含みます。③右クリックで「コンポーネントにする」をクリック。

④初期設定のステートの「」をクリック。
⑤「ホバーステート」をクリック。

④初期設定のステートの「+」をクリック。 ⑤「ホバーステート」をクリック。

⑥「ホバーステート」を選択。
⑦ボタンを「ホバー時」に編集。
⑧「プロトタイプ」をクリック。

⑥「ホバーステート」を選択。⑦ボタンを「ホバー時」に編集。⑧「プロトタイプ」をクリック。

⑨「初期設定のステート」を選択。
⑩インタラクションの「トリガー:ホバー」に選択。
⑪アクションの「種類:自動アニメーション」「移動先:ホバーステート」「イージング:イーズアウト」「デュレーション:0.3秒」に選択。
※今回はデフォルトの設定にしております。
⑫「再生ボタン」をクリック。

⑨「初期設定のステート」を選択。⑩インタラクションの「トリガー:ホバー」に選択。⑪アクションの「種類:自動アニメーション」「移動先:ホバーステート 」「イージング:イーズアウト」「デュレーション:0.3秒」に選択。※今回はデフォルトの設定にしております。⑫「再生ボタン」をクリック。

⑬「ホバーアクション」を確認。

ホバーアクション



3.その他の「ホバーアクション」例

以下のように、ボタンをふわっと切り替えるアクションも可能です。

2.⑪アクションの種類を「トランジション」に変更するとできます。

さいごに

アイコン

ボタンホバー」をつくることができました〜

アイコン

今回のボタンホバーの作り方を参考にして、いろんなパターンのホバーアクションもチャレンジしてみてください〜