【Adobe XD】まるっと解説！ホバーステートの使い方

画面右側のメニューから初期ステート横「ステートの追加」を選択。

ホバーステートが選択された状態で設定を行います。今回は上画像のようにホバーでテキストが離れるアニメーションを設定していきます。

ホバーステートを選択した状態でプロパティメニューから文字間の調整をします。

画面左上の「プロトタイプ」をクリックしてプロトタイプの操作画面に移動します。初期ステートを選択し、以下画像のようにアイコンが表示されてるか確認してください。

確認できたらインタラクションを設定します。

トリガーが「ホバー」になっているか確認し、種類から「自動アニメーション」を選んでください。イージング（動きの加減速）から「イーズイン」を選び、デュレーション（インタラクションの初めから終わりまでの秒数）を決めます。

実際にホバーの設定ができてるか確認します。画面右上の「デスクトッププレビュー」をクリック。
すると、プレビュー画面が開きます。

プレビュー画面上でホバーするか確認してください。無事滑らかに動いたら完成です。

テキストが楕円に囲まれるようにコンポーネントを作成します。楕円を囲んだコンポーネントを2つ並べましょう。
※紛らわしいですが「コンポーネントにする」はまだしないでください。

2つのコンポーネントの片方だけ楕円を変形させます。パスにアンカーポイントを追加して、円に見えないくらいグチャグチャにしましょう。
変形させたあと、パスのみアピアランス（透過度）を0％にしてください。

楕円を変形させたコンポーネントを「コンポーネントにする（⌘K）」で登録してください。

ホバーステートをクリック。先程作成した楕円を囲んだもののもう片方の楕円をコピーをします。
コピーした楕円をホバーステートに貼り付けてください。パスのレイアウト名が初期ステートと同じ名前になるようにしましょう。

インタラクションの設定をします。種類「自動アニメーション」を選択してください。デュレーション、イージングはお好みで変更すれば完成です。

画像のようにテキストが白地になるようにボタンを作ります。色はなんでも大丈夫です。グラデーションは後で作成します。

グラデーションの長方形を作ります。グラデーションは3色以上にしてください。作成した長方形をボタン内の長方形下に配置します。

長方形同士を選択してシェイプでマスク（⌘+shift+M）をします。マスクをかけたら「コンポーネントにする（⌘K）」をしてください。

ホバーステートをクリックしたら、マスクをかけたグラデーションの長方形を横方向に動かします。

「自動アニメーション」を選択し、デュレーション、イージングはお好みで変更すれば完成です。

長方形にグラデーションをかけてトランジションさせるやり方もあります。マスクをかけて移動させるやり方を覚えると応用ができるのでこのような作り方にしました。

このコンポーネントはマスクをかけた中で上下にテキストが動く仕組みになっています。

まずはテキストを入力します。6つテキストを画像のように縦になれべてグループ化します。
ボタンにマスクをかけて見えなくするのでテキストはボタンの外側に配置してください。

次に上側に配置したテキストのみに一文字ずつシェイプでマスクをします。

下側のテキストも上側のテキストと同様にマスクをかけます。その後下側のずれたテキストをボタンの表示領域内に移動させます。

この状態でボタンの表示領域にマスクをかけます。

ホバーステートは逆に下側のテキストをした画像のようにずらしてならべます。今度は上側のテキストを表示領域内に並べます。

お疲れさまです。これで完成です。