【Figma】プロトタイプ実践ガイド｜アニメーション・ホバー・スクロールなど実務で使える設定まとめ

本記事では、プロトタイプ作成で実務でよく使われる5つの実装テクニックについて、具体的な設定方法と活用例を詳しく解説します。

以下をマスターすることで、実装に近いリアルなプロトタイプが作成できるようになります。

1. ページ遷移
2. ボタンのホバー効果
3. アコーディオン
4. モーダル（オーバーレイ）表示
5. スクロール処理

1. ページ遷移：クリックやタップで別画面に移動する

ページ遷移は、ユーザーがボタンやリンクをクリックしたときに別の画面に移動させるプロトタイプの基本機能です。Figmaでは、トリガー（クリックやタップ）を設定し、遷移先のフレームを指定することで、実際のアプリやWebサイトと同じ動きを再現できます。

設定方法

1. 遷移元の要素を選択

遷移元の要素を選択し、ボタンやリンクなどユーザーが操作する要素から遷移先のフレームへのコネクションを作成します。

2. インタラクションの設定

プロトタイプタブで以下を設定します。

• トリガー：「クリック時」
• アクション：「→ 次に移動」
• アニメーション：「スライドイン」
• 曲線：「イーズインアウト」
• 所要時間：300〜400ms（任意で調整可能）

3. スクロール位置を設定

必要に応じて「スクロール位置をリセット」や保持する設定を選択します。

スクロール位置の制御
スクロール位置の制御では、画面遷移時にスクロール位置をどのように扱うかを設定できます。
「スクロール位置をリセット」を有効にすると、画面遷移時にスクロール位置が自動的にトップに戻ります。

一方、戻る操作などで元のスクロール位置を保持したい場合は、この設定をオフにします。

2. ボタンのホバー：マウス操作に反応させる

ボタンにホバー効果を追加することでマウスカーソルを重ねた際に色や影が変化させることができます。このような視覚的な変化により、ユーザーにクリック可能であることを直感的に伝えられる効果があります。

実装手順

1. ボタンコンポーネントを作成

まず基本となるボタンのコンポーネントを用意します。

2. バリアントを作成

hover用の状態を持たせるために、コンポーネントにバリアントを設定します。

3. コンポーネントを選択し、右クリックから「バリアントを追加」を選択

既存のボタンに対して追加バリアントを作成し、異なる状態（hover状態）を管理できるようにします。

4. バリアントプロパティを設定

プロパティ名を「Btn」など任意に決め、その値として「Default」と「Hover」を設定します。
これで2つの状態を明確に区別でき、プロトタイプで状態遷移を設定しやすくなります。

5. Hover状態のデザインを変更

ホバー時に変化させたい見た目を設定します。
例：作成中のボタンでは、背景色や線の色を濃くしたり、余白を調整して矢印アイコンを少し移動させています。

6. Default状態を選択し、プロトタイプタブを開く

通常の状態から Hover 状態へ遷移できるように、プロトタイプ設定に進みます。

7. トリガー：「ホバー時」、アクション：「→ 次に移動」、遷移先：「Hover」を設定

ホバーした瞬間に状態が切り替わるように設定します。

8. アニメーション：「スマートアニメート」、曲線：「イーズアウト」、所要時間：「300 ms」

自然な動きに見えるよう、アニメーション効果を追加します。
数値は調整して最適な速度を探すとよいです。

3. アコーディオン：情報を展開・折りたたむ

アコーディオンとはクリックやタップで内容を展開・折りたたみできるUI要素です。
FAQページや設定画面など、多くの情報を整理して表示する際に活用します。

実装手順

1. 閉じた状態（Closed）のコンポーネントを作成

質問部分（タイトル + 開閉アイコン）と回答部分を作ります。
初期状態では回答が見えないように非表示に設定します。

2. バリアントを追加して開いた状態（Open）を作成

Close のコンポーネントを複製し、回答部分の高さを展開します。
開閉アイコンは下向き矢印から上向き矢印に回転させるとわかりやすくなります。

3. インタラクションの設定

プロトタイプタブで以下を設定します。

• トリガー：「クリック時」
• アクション：「→ 次に移動」
• アニメーション：「スマートアニメート」
• 曲線：「イーズインアウト」
• 所要時間：300〜400ms（任意で調整可能）

4. モーダル（オーバーレイ）の表示

オーバーレイとは、既存の画面上に新しい要素を重ねて表示する機能です。
モーダルダイアログ、サイドメニュー、ドロップダウンなどの実装に使用します。

実装手順

1. モーダルのフレームとトリガーとなるボタンを作成

表示したいモーダルをフレームとして用意します。
同時に、モーダルを開くためのボタンを作成します。

2. トリガーとなる要素（ボタンなど）を選択し、コネクションを作成

モーダルを開くきっかけとなるボタンを選択し、プロトタイプモードでモーダルのフレームへドラッグしてコネクションを作成します。

3. プロトタイプタブでインタラクションを設定

プロトタイプタブで「クリック時 → オーバーレイを開く」を設定します。
遷移先として、作成したモーダルのフレームを指定します。

4. モーダルの位置設定

オーバーレイの表示位置（中央・上・右など）を指定します。

※モーダルは中央表示が多いですが、サイドメニューの場合は左右に配置します。

5. 背景設定（背後の画面の見え方や雰囲気を調整する設定）

オーバーレイの背景を「暗くする」「ぼかす」などに設定し、背後の操作ができない雰囲気を出します。
また、背景（オーバーレイ部分）をクリックするとモーダルが閉じるように設定することで、より直感的な操作感を実現できます。

6. 閉じる設定

モーダルを閉じるアクションを設定します。
例えば、右上の「×ボタン」や「閉じる」ボタンをクリックして閉じるようにすると、ユーザーにとって分かりやすく自然な操作になります。

5. スクロール：長いコンテンツを扱う

フレームにスクロール機能を追加することで、長いコンテンツやリストを自然に表示できます。

設定方法

1. フレームを選択

スクロールさせたいコンテンツをまとめたフレームを選択します。

2. 「オーバーフロー挙動」セクションでスクロール方向を設定

フレームを選択した状態で、右パネルの「プロトタイプ」タブを開きます。
「オーバーフロー挙動」セクションで、スクロールの方向を「縦方向」「横方向」「両方向」から選択します。

オーバーフロー挙動
オーバーフロー挙動は以下の3つを選択することができます。

• 垂直スクロール：縦方向のスクロール
• 水平スクロール：横方向のスクロール（カルーセルなど）
• 水平および垂直スクロール：両方向のスクロール

固定要素の実装

ヘッダーやナビゲーションバーなど、スクロールしても常に画面上部に表示させたい要素を固定する方法です。

1. 固定したい要素（ヘッダーなど）を選択

画面上部に固定したいフレームやグループを選択します。

2. プロトタイプタブで「スクロール時に位置を固定」にチェック

右パネルの「プロトタイプ」タブで、スクロール時に位置を固定にチェックを入れます。
これで、スクロールしても選択した要素が常に画面上に表示されるようになります。

おまけ. 条件分岐（有料プランの機能）

条件分岐とは、特定の条件を満たした場合にだけアクションを実行する仕組みです。
いわば 「もし〇〇なら〜する」(if / else) というロジックで、変数と組み合わせることで、よりリアルで複雑なプロトタイプを再現できます。

例：ユーザーの入力内容や状態に応じて、異なる画面に遷移させる etc.

変数の作成

1. 右パネルの「バリアブル」から変数モーダルにアクセスする

右パネルにあるバリアブルの編集アイコンをクリックして、変数の管理モーダルを開きます。
ここで新規作成や既存変数の確認ができます。

2. 「＋作成」ボタンをクリックし、型を選ぶ（色、数値、文字列、ブール値）

「＋作成」ボタンを押し、用途に応じて変数の型を選択します。
例えば、配色管理なら「色」、開閉状態を制御したい場合は「ブール値」を選びます。

3. 変数名と型を設定する

わかりやすい変数名を入力し、チームメンバーにも意図が伝わるように命名します。

実装手順

1. インタラクションパネルで、ドロップダウンメニューから任意のトリガーを選択します。
2. [アクション] ドロップダウンメニューから [条件付きアクション] を選択します。
3. If条件を設定します。
   -「If」フィールドに、満たす必要がある条件（ブール式）を入力します。
   – 条件を満たした場合に実行するアクション（複数選択可）を設定します。
4. Else条件を設定します。
   – 条件を満たさなかった場合に実行するアクションを設定します。

複数のアクションと条件文 – Figma Learn – ヘルプセンター

https://help.figma.com/hc/en-us/articles/15253220891799-Multiple-actions-and-conditionals

まとめ

Figmaのプロトタイプ機能を使うと、ユーザー操作に応じた動きのあるインタラクティブなデザインを作れます。ボタンのホバーやモーダル、スクロール、条件分岐などを組み合わせることで、実際の操作感を事前に検証でき、チームやクライアントへの共有もスムーズになります。

Figmaプロトタイプを基礎から学ぶ!

Figmaプロトタイプ入門｜基本操作から共有方法まで徹底解説

Figmaプロトタイプ入門｜基本操作から共有方法まで徹底解説

関連リンク

• プロトタイプ作成 – Figma Learn – ヘルプセンター
  https://help.figma.com/hc/ja/sections/360006534454-%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E4%BD%9C%E6%88%90