HOME
本記事は執筆時点（2026年03月06日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
Webデザインの標準ツールとして欠かせない「Figma」。
私自身、現在進行形でFigmaの操作を習得中なのですが、学べば学ぶほどその奥深さに驚く毎日です。
今回は、自分自身の学習の備忘録も兼ねて、初心者がまず習得したい「マウスオーバー効果」の実装手順をまとめました。
はじめに
Figmaでデザインを作成していて、「ボタンにマウスを置いた時の動き（ホバー効果）を、もっと手軽に再現できればいいのに」と思ったことはありませんか？
実際のWebサイトやアプリでは、ユーザーがマウスを動かした際の「反応」が直感的な操作感を生みます。
Figmaの「マウスオーバー効果」をマスターすれば、エンジニアへの指示出しがスムーズになるだけでなく、クライアントへのプレゼンでも「完成後のイメージ」をより鮮明に伝えることが可能です。
マウスオーバー（ホバー）の実装手順
マウスオーバーは次のような流れで実装します。
- コンポーネントとバリアントを作成する
- プロトタイプモードで接続する
- トリガーを「マウスオーバー」に設定する
各工程を確認していきましょう!
コンポーネントとバリアントを作成する
まずマウスオーバーを実装させたいオブジェクト（ボタン等）を作り、コンポーネント化します。
コンポーネント化したオブジェクトはバウンディングボックスが紫色に変わります。
（※こちらはコンポーネントなので実際にフレーム内に配置しません）
コンポーネントを選択し、右サイドバーで「バリアントを追加」をクリック。
するとボタンが真下に複製されます。
追加したバリアントを選択（紫色の実線のバウンディングボックス）した状態で、右サイドバーにてバリアントの名称を「マウスホバー時」に変更しておきます。
同様に元のコンポーネントを選択した状態で、右サイドバーにて名称を「通常時」に変更しておきます。
マウスオーバー時の状態を編集する
バリアント「マウスオーバー時」を選択し、マウスオーバー時の状態を編集（色などを変更）します。
プロトタイプモードで接続する
オブジェクト「通常時」を選択し、右サイドバーにてタブを「プロトタイプ」に切り替えます。
インタラクションの「＋」を押してインタラクションを追加します。
トリガーなどを設定する
インタラクションの詳細設定で以下の通りに設定します（設定はあくまで一例です）。
「通常時」から「マウスオーバー時」（バリアント）へ矢印が伸びたら設定完了です。
プロトタイプで動作確認を行う
プロトタイプで動作を確認するために適当なフレームを作成します。
フレームを作成したら左サイドバーからアセットを開き、
作成したボタンをドラッグアンドドロップでフレーム内に配置します。
フレームを選択した状態で右サイドバーからプロトタイプを表示して確認します。
まとめ
今回は、Figmaでマウスホバー効果を実装する基本の手順をご紹介しました。
ホバー効果は、UIデザインのクオリティを一段階引き上げる魔法のような機能です。
まずはシンプルなボタンから試して、徐々にナビゲーションメニューやカードデザインに応用してみてください。
