MENU
カテゴリー

【2022年版】AdobeXDでボタンホバーを作成する方法!

【2022年版】AdobeXDでボタンホバーを作成する方法!

takato(@n8takato)です!

XDでボタンホバーを作成する方法を知りたい

この記事は上記の課題に向けて作成しています。

XDはカーソルを合わせると変化するボタンホバーが簡単に作成出来ます。

XDでボタンホバーを作ることでコーディング前にアニメーションチェックが出来るメリットがあります。

この記事ではXDでボタンホバーを作成する方法を説明していきます。

この記事を読むメリット

  • XDでボタンホバーを作成する方法がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人
目次

XDでボタンホバーを作成する方法

早速XDでボタンホバーを作成する方法を説明します。

今回のゴールは下記のアニメーションです。

ボタンホバーの作成手順は下記の通りです。

XDでボタンホバーを作成する手順

  1. ボタンの作成
  2. 作成したボタンをコンポーネントにする
  3. 「初期設定のステート」で「ホバーステート」を選択
  4. ボタンをホバー状態にリデザイン
  5. プロトタイプを選択
  6. 「初期設定のステート」を選択
  7. 「インタラクション」の設定
  8. 「アクション」の設定
  9. 「プレビュー」で確認

ボタンの作成

始めにボタンを作成します。

ボタンは左側のメニューにある長方形ツールから作成出来ます。

ボタンは左側のメニューにある長方形ツールから作成出来ます。
ボタンの作成

※長方形の角を丸くするには長方形の内側にある丸で調整します。

作成したボタンをコンポーネントにする

作成したボタンをコンポーネントにします。

ボタンを選択した状態で右クリック→「コンポーネントにする」で出来ます。

ボタンを選択した状態で右クリック→「コンポーネントにする」で出来ます。
コンポーネント

※1.Macユーザーは「command」+「K」で出来ます。
※2.ボタンを選択する際は文字の一緒に選択してください。

「初期設定のステート」で「ホバーステート」を選択

画面右側に「コンポーネント(メイン)」が表示されます。

」を選択し「ホバーステート」を選んでください。

画面右側に「コンポーネント(メイン)」が表示されます。「+」を選択し「ホバーステート」を選んでください。
「ホバーステート」の選択

ボタンをホバー状態にリデザイン

続いてボタンをホバー時の状態に再度デザインします。

ボタンの背景と文字の色を変更してください。

続いてボタンをホバー時の状態に再度デザインします。ボタンの背景と文字の色を変えます。
ホバー時のデザイン

※文字を直接選択出来ない場合は一度テキストツールに切り替えてください。

プロトタイプを選択

ボタンのデザインを変更したら「プロトタイプ」を選択します。

プロトタイプ」は画面上にあります。

画面左上にある「プロトタイプ」を選択します。
プロトタイプの選択

「初期設定のステート」を選択

プロトタイプに切り替えたら、「初期設定ステート」を選択します。

「初期設定ステート」を選択します。
「初期設定ステート」の選択

「インタラクション」の設定

インタラクション」の「トリガー」を「ホバー」に設定します。

「インタラクション」の「トリガー」を「ホバー」に設定します。
「ホバー」を選択

「アクション」の設定

アクションは下記4つの設定をします。

  • 「種類」→「自動アニメーション」
  • 「移動先」→「ホバーステート」
  • 「イージング」→「イーズアウト」
  • 「デュレーション」→「0.3秒」
アクションを修正します。①「種類」→「自動アニメーション」②「移動先」→「ホバーステート」③「イージング」→「イーズアウト」④「デュレーション」→「0.3秒」
「アクション」の設定

「プレビュー」で確認

最後にプレビューで確認します。

画面右上にあるプレビューボタンを押すと確認出来ます。

プレビューを選択して確認します。
プレビューの選択

XDではボタンホバーを簡単に作成出来る!

XDではボタンホバーのアニメーションを簡単に確認出来ます。

コーダーやクライアントとの認識合わせに活用してみてください。

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】XDでクリッピングマスクをする方法! XDでクリッピングマスクをかける方法を知りたい。 この記事は上記の課題に向けて作成しています。 XDはIllustrator同様にマスクをかけることが出来ます。 マスクをかけ...
あわせて読みたい
【2022年版】AdobeXDで画像を書き出しする方法! XDで画像を書き出す方法を知りたい。 この記事は上記の課題に向けて作成しています。 デザインからコーディングに移る際XDで作成したデザインデータから画像を書き出し...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次