Figma でホバー効果を作成する方法
Figma を使用すると、ユーザーは多くの機能を設計およびカスタマイズできます。ユーザー エクスペリエンスを向上させるために使用できる機能の 1 つは、ホバー エフェクトです。ボタンのホバー効果は、カーソルをボタンに移動すると別のデザインが表示されることを意味します。この効果自体は、色を変更する標準的なものから、境界線やハイライトの変更などのより複雑な方法まで、さまざまです。
Figma のコンポーネントにホバー効果を追加する方法を学習してください。
ボタンにホバー効果を作成する
コンポーネントの上にマウスを置いたときに、コンポーネントに特定のインタラクションやトランジションを持たせたい場合は、ホバー効果を設定できます。作成できる最も簡単な結果は、ボタンの色を変更してクリックできるように強調表示することです。ボタン コンポーネントにホバー効果を作成する方法は次のとおりです。
- ボタンを作ります。
- それを複製してフレームの外に移動します。
- 複製したボタンの色を変更します。
- コンポーネントを作成するには、右クリックしてメニューから「コンポーネントの作成」を選択するか、キーボードの「Ctrl + Alt + K」を押します。
- サイドバーの「プロトタイプ」タブをクリックします。
- 2 つのボタン コンポーネントを接続します。
- 「インタラクションの詳細」ドロップダウンで「ホバリング中」を選択します。
- 同じメニューの「オーバーレイを開く」オプションをクリックし、オーバーレイを「手動」に設定します。
ユーザーが元のボタンの上にマウスを移動すると、そのボタンは別の色のボタンに置き換えられます。同様の方法で、ボタンに表示されるテキストを変更することもできます。
すべてのボタンに対してこれを繰り返す必要があります。
ボタンの境界線にホバー効果を作成する
ボタン コンポーネントでホバー効果を利用するもう 1 つの方法は、ボタンの上にカーソルを置くと変化する境界線を作成することです。その方法は次のとおりです。
- 任意のテキストを含むボタンを作成します。
- それを複製します。
- 複製にストロークを追加し、塗りつぶしを削除し、色を変更します。
- サイドバーの「プロトタイプ」タブをクリックします。
- 2 つのボタン コンポーネントを接続します。
- 「インタラクションの詳細」ドロップダウンで「ホバリング中」を選択します。
ボタン効果をプレビューしてその上にマウスを置くと、色付きの境界線が表示されます。
Figma で Anima プラグインを使用する
Figma にホバー エフェクトを追加するもう 1 つの方法は、デザインからコードまでのツール Anima を使用することです。このプラグインには、Figma で Web サイト、アプリアイコン、またはその他の Web コンポーネントを作成する際に実装できる独自の機能があります。アニメーション化するコンポーネントを選択し、それに応じて設定を調整するだけです。これを行う方法は次のとおりです。
- コンポーネントを選択します。
- アニマプラグインを開きます。
- 「ホバー効果」オプションをタップします。
- 効果 (拡大、縮小、シャドウグローなど) を選択します。
- 「持続時間」や「カーブ」などのアニメーション効果をカスタマイズします。
- 「プレビュー」ボタンをタップして効果を確認します。
- 「保存」をクリックします。
Anime プラグインのもう 1 つの特徴は、CSS トランジションをカスタマイズできることです。これを使用すると、アニメーションの速度を制御し、その設定を好みに合わせて調整したり、より自然にすることができます。
Figma のホバー エフェクト機能を活用する
プロのデザイナーでも初心者でも、Figma にはコンポーネント、アイコン、オブジェクトの独自のデザインやアニメーションを作成するための機能が多数あります。ホバー効果を使用すると、テキストを変更したり、ハイライト、異なる色、異なる境界線などを追加したりできます。最初の Web サイトをインタラクティブにし、そこに個人的なタッチを加えるには、これらの効果を作成する方法を知ることが非常に重要です。
Figma のコンポーネントにはどのホバー エフェクトを実装しますか? 以下のコメントセクションでお知らせください。
コメントを残す