Figmaでホバーアニメーションを再現するとは、プロトタイプ機能を使ってマウスオーバー時の色やアイコン、レイアウトの変化を画面上で動かして表現することです。基礎編と応用編のテクニックを押さえれば、エンジニアやクライアントへ動きのイメージを正確に共有できます。
ホバーアニメーションをFigmaで再現するメリット
デザイナーが「こんな動きにしたい」と言葉だけで伝えても、エンジニアやクライアントとの間でイメージのズレが生じがちです。Figmaのプロトタイプ機能でアニメーションを実際に再現しておけば、インタラクションの意図を円滑に伝えられ、実装後の認識違いによる手戻りを減らせます。
また、動きを検証しながら作れるため、デザイナー自身も「実際に動かすとどう見えるか」をその場で確認しながら調整できる点も大きなメリットです。
基礎編：色やアイコンが変化するボタンの作り方
基礎編は5つのステップで進めます。まずホバー前の状態のボタンをデザインし、そのボタンをコンポーネント化します。次にバリアント機能でホバー状態のデザイン（色やアイコンの変化）を追加登録します。
その後、プロトタイプでトリガーとアクション、アニメーションを設定し、最後にフレーム上へインスタンスとして配置すれば完成です。色の変化だけでなく、アイコンの切り替えも同じ手順でバリアントに含めることができます。
応用編：ホバーで飛び出るお問い合わせボタンの作り方
応用編では、フレームと隠しテキスト、背景図形を組み合わせて、ホバー時にボタンから文字や装飾が飛び出すアニメーションを作成します。通常時は「コンテンツを隠す」機能でテキストを非表示にしておき、ホバー時のバリアントでそのテキストを表示させる仕組みです。
動きの質感を高めたい場合は、アニメーションの種類でカスタムスプリングを選び、バウンス（跳ねる強さ）やスピードのカーブを調整します。飛び出す方向や距離を細かく設定することで、より印象的なインタラクションに仕上げられます。
エンジニアへの共有で気をつけたいこと
制作の現場では、凝ったアニメーションほど実装コストが高くなる傾向があります。プロトタイプを共有する際は、動きの見た目だけでなく「どのプロパティが何秒でどう変化しているか」を併せて伝えると、実装時の解釈違いを防げます。
あわせて、CSSのtransitionやtransformで代替できる動きなのか、JavaScriptでの実装が必要な動きなのかをおおまかに切り分けておくと、見積もりやスケジュールの調整がスムーズになります。
よくある質問（FAQ）
Q1. 基礎編と応用編、どちらから練習すべきですか？
A. まずは色やアイコンが変化する基礎編のボタンから練習し、コンポーネントとバリアントの扱いに慣れてから応用編に進むのがおすすめです。
Q2. 「コンテンツを隠す」機能とは何ですか？
A. 特定のレイヤーを非表示状態として保持しつつ、バリアントの切り替え時に表示させられる機能です。飛び出るアニメーションなど、要素の出現表現によく使われます。
Q3. カスタムスプリングとは何ですか？
A. アニメーションの動きに跳ねるような質感を加えられる設定です。バウンスの強さやスピードを数値で調整し、動きのニュアンスを細かくコントロールできます。
Q4. 作ったアニメーションはそのままコーディングに使えますか？
A. Figma上の動きはあくまで再現・確認用です。実装時はCSSやJavaScriptで別途組み直す必要があるため、動きの仕様を明確に共有することが重要です。
基礎編・応用編それぞれの手順を押さえておくと、シンプルな色変化から凝った動きまで幅広いホバーアニメーションをFigma上で再現できるようになります。まずは身近なボタンのデザインから試してみてください。
