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

本記事ではFiomaでホバーボタンを作成する方法について解説します。

ボタンのコンポーネントを作成する

ホバーボタンを作成する前段階として、通常のボタンを作成しコンポーネント化しておきます。

ボタンの作成

最初に、ボタンの作成を作成します。
ここでは詳細なボタンの作成方法は割愛しますが、ボタンの作成方法については以下の記事で詳しく解説していますので参照してみてください。

Figmaでボタンを作成する方法

1.ボタンを作成

テキストツールで作成したテキストを選択してShiftキー+Aキーを押して、テキストの背景をフレーム化します。作成されたプレームにカラーやスタイルを設定してボタンを完成させます。

2.ボタンのフレーム名を変更

コンポーネント化したときに、他のコンポーネントと混同しないように、フレームの名前を変更しておきましょう。ここでは「Frame 1」という名称を「button1」に変更しておきます。

ボタンのコンポーネント化~バリアントの作成

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

1.ボタンをコンポーネント化する

作成したボタンをコンポーネント化します。ボタンの要素になっているテキストとフレームの両方を選択した状態で、画面上部ツールバーの中央にある「コンポーネントの作成」のアイコンをクリックします。

上の画像のように、コンポーネントのアイコンが付き、フレームの名称やガイドのカラーが紫に変わったらコンポート化されています。

2.パリアントを作成する

右サイドバーにあるプロパティという項目右端にある+マークをクリックするとメニューが表示されます。表示されたメニュー項目の中から「バリアント」を選択します。

上の動画のように、コンポーネントのガイド線の上に「バリアント」とマークが表示されるので、マークをクリックするとバリアントが追加されます。

「バリアント」はコンポーネントのセットの中に作成したカラー設定などバージョン違いのオブジェクトのことです。ここでは、ホバー(対象物にマウスカーソルを重ねると何からの処理が自動的に発生する処理のこと)時に切り替わるオブジェクトとしてのバリアントを作成します。

3.ホバーが適用されるバリアントのカラーを変更

ホパー時にボタンのカラーが切り替わるように、バリアントとして追加したオブジェクトの「塗り」のカラーを変更します。

4.バリアントのプロパティ名は変更可能

バリアントのプロパティ名は変更可能です。初期状態では、基のになったオブジェクトのプロパティは「デフォルト」となっています。

追加したバリアントは『バリアント2」という名称がここでは割り当てられています。この名称を「ホバー」という名称に変えてみます。

ポタンにホバーのインタラクションを設定する

ホパーボタンに用いるバリアントを含んだコンポーネントが作成できたら、ボタンにホパーのインタラクションを設定していきましょう。
アニメーション作成方法やインタラクションの設定方法については、以下の記事でも解説していますので参照してみてください。

Figmaでアニメーションを作成する方法

ボタンにホバーのインタラクションを適用

ボタンにホバーのインタラクションを適用する手順を以下に説明します。

1.インタラクションを追加

右サイドバー上部のタブから「プロトタイプ」をクリックすると、「インタラクション」という項目が表示されます。プロパティが「デフォルト」となっているボタンを選択した状態で、「インタラクション。右端にある+マークをクリックします。

2. インタラクションのトリガーを選択

+マークをクリックすると、インタラクションを設定するパネルが表示されます。このパネルにある「クリック時」という項目をクリックします。

「クリック時」をクリックすると、インタラクションのトリガーを選択するプルダウンメニューが表示されます。このメニュー項目の中から「マウスオーバー」を選択します。

インタラクションのトリガーの種類については、以下の表を参照してください。

名称	說明
クリック時	オブジェクトをクリックしたときに実行されるインタラクション
ドラッグ時	オブジェクトをドラッグしているときに実行されるインタラクション
マウスオーバー	オブジェクトの上にマウスカーソルを置いたときに実行されるインタラクション
押下中	オブジェクトをクリックしたまま押し続けているときに実行されるインタラクション
キー/ゲームパッド	キーボードのキーを押す、ゲームパッドのボタンを押すといった操作で実行されるインタラクション
マウスエンター	マウスなどのポインティングデバイスでオブジェクトの領域内にカーソルが入ったときに実行されるインタラクション
マウスリープ	マウスなどのポインティングデバイスでオブジェクトの領域内からカーソルが外れたときに実行されるインタラクション
マウスダウン	マウスなどのポインティングデバイスでオブジェクトをクリックした瞬間に実行されるインタラクション
マウスアップ	マウスなどのポインティングデバイスでオブジェクトから指を離したときに実行されるインタラクション
アフターディレイ	トリガーが発生してから一定時間後に実行されるインタラクション

3.インタラクションのリザルトを選択

インタラクションのトリガーを選択すると、下部にインタラクションのリザルトを選択する項目が表示されます。初期設定では「なし」になっていますので、これをクリックします。

「なし」をクリックすると、インタラクションのリザルトを選択するプルダウンメニューが表示されます。このメニュー項目の中から「次に変更」を選択します。

インタラクションのリザルトの種類については、以下の表を参照してください。

名称	說明
次に移動	次のフレームに遷移する
次に変更	要素の状態を変更する
戻る	前のフレームに遷移する
バリアブルを設定	バリアブルの値を設定する ※有料の機能
条件付きアクション	特定の条件を満たした場合にアクションを実行する ※有料の機能
次にスクロール	次のフレームにスクロールする
リンクを開く	外部リンクを開く
オーバーレイを開く	オーバーレイを表示する
オーバーレイの入れ替え	オーバーレイを切り替える
オーバーレイを閉じる	オーバーレイを非表示にする

4.変更先のプロパティを選択

インタラクションのリザルト「次に変更」は、「デフォルト」のボタンが切り替わるバリアントを指定します。

「リザルトを表示するパネルの下部に、変更先のプロパティを選択する項目が表示されていますので、「ホバー」のバリアントを選択します。

5.ディソルブを選択

インタラクションのリザルトを設定すると、「即時」という項目が表示されますので、これをクリックします。

「即時」をクリックすると、「ディソルブ」と「スマートアニメート」というアニメーション機能を選択できます。「即時」は、その名称の通り即時に切り替わります。

アニメーション機能を選択すると、ホバー時にオブジェクトが切り替わる際の動きを、さまざまな手法で表現できます。

ここでは、「ディソルブ」を選択してみます。

6.イージングを設定

「ディソルブ」を選択すると、下部にイージングを設定する項目が表示されます。

イージングとは、アニメーションの速度に緩急の効果を付与することです。スマートアニメート機能では、イージングの種類を選択することで、さまざまな印象を与えるアニメーションを作成できます。

上の画像のように「イーズアウト」をクリックすると、イージングの種類を選択できるプルダウンメニューが表示されます。ここでは、そのまま「イーズアウト」を選択してみます。

Figmaのスマートアニメートで設定できるイージングを、以下の表にまとめましたので参照してください。

名称	說明
リニア	等速の動き
イーズイン	最初はゆっくりと動作し、徐々に加速する動き
イーズアウト	最初は速く動作し、徐々に減速する動き
イーズイン/イーズアウト	イーズインとイーズアウトを組み合わせた動き
イーズインバック	動作の最初(イン) で逆方向に動いてから加速する動き
イーズアウトバック	動作の終わりの位置(アウト) をオーバーに行き過ぎてから終止点に戻る動き
イーズインバック/イーズアウトバック	イーズインバックとイーズアウトバックを組み合わせた動き
カスタムベジェ	ベジェ曲線を使用してアニメーションの動き方を指定するオプション

インタラクションには、イージングの他に、スプリング動作のプリセットメニューも搭載されています。スプリング動作のプリセットの種類は以下の表を参照してください。

名称	說明
なめらか	なめらかに弾む動作
バウンス	戻る時に跳ねる動作
遅い	ゆっくりと弾む動作
カスタムスプリング	スプリングの動きに基づいてアニメーションの動き方を指定するオプション