Figmaのプロトタイプは、画面や部品にクリックなどの条件を付けて、遷移や表示の変化を確認する機能です。最初は2つの画面を「クリック時→次に移動→即時」でつなぎ、移動できることを確認してからアニメーションを加えると、設定の誤りを見つけやすくなります。
この記事では、ブラウザー版Figma Designで確認した遷移設定の実画面と、公式資料に基づくスマートアニメート・スクロール・共有の手順を紹介します。基本的なプロトタイプの作成には編集権限、再生には閲覧権限が必要です。プロトタイプの公式ガイド
画面遷移の設定は4項目で考える
| 項目 | 意味 | 最初の設定例 |
|---|---|---|
| トリガー | 何をしたら動くか | クリック時／On click・On tap |
| アクション | 何をするか | 次に移動／Navigate to |
| 移動先 | どこへ進むか | 次の画面のフレーム |
| アニメーション | どう切り替えるか | 即時／Instant |
接続元はボタンなど画面内の部品でも構いません。通常の画面遷移の移動先は、キャンバス直下のフレームを選びます。同じ画面内の要素へ移るScroll toなどとは役割が違います。接続の公式説明
2画面をクリックでつなぐ
1．同じページに画面Aと画面Bを用意する
練習では、同じサイズのフレームを2つ作ります。画面Aには「詳細へ」、画面Bには「戻る」を置くなど、どちらを見ているか区別できる内容にします。フレームの作り方はFigma入門を参照してください。
2．移動する部品を選び、インタラクションを追加する
- 画面Aの「詳細へ」ボタンを選択します。
- 右側の「プロトタイプ」タブを開きます。
- インタラクション欄の追加ボタンを押します。接続ノードを画面Bへドラッグする方法もあります。
- トリガーをクリック時、アクションを次に移動、移動先を画面Bにします。
- 最初のアニメーションは即時にします。
部品の見た目だけを選んだつもりでも、文字だけや外側の画面全体を選んでいることがあります。レイヤーパネルで選択範囲を確認してから、接続を追加してください。
3．実際に確認した設定画面
2026年10月3日、ブラウザー版Figma Designの日本語UIで、検証用のFrame 1とFrame 2を使って接続を作成しました。「クリック時」「次に移動」「Frame 2」「即時」の設定と、Frame 1を開始点とするFlow 1の生成を確認しています。
この画像は接続と設定の確認画面です。再生後の動作、スマートアニメートや共有先からの閲覧を実証する画像ではありません。
4．開始点から再生し、戻り道を確認する
開始する画面を選び、プロトタイプの「フローの開始点」を確認します。新しい接続から開始点が作られる場合もありますが、別の画面から再生される場合は開始点を指定し直します。再生ボタンからプレビューを開き、画面Aのボタンを押して画面Bへ進むか確認してください。フローと開始点の公式説明
戻る操作にはBackを使うか、画面AへのNavigate toを設定します。必ず同じ画面へ戻したいなら移動先を明示し、直前に訪れた画面へ戻したいなら履歴に基づくBackを検討します。最初の画面からBackを試す場合は、戻る履歴があるかにも注意します。
スマートアニメートは名前と階層をそろえる
スマートアニメートは、遷移前後で対応するレイヤーを探し、位置・サイズ・不透明度・回転・塗りなどの変化を補間します。名前だけでなくレイヤー階層も対応している必要があります。スマートアニメートの公式説明
練習例として、画面Aを複製し、内側のIndicatorという長方形の位置だけを変えます。移動の接続でアニメーションをSmart animateにし、たとえば300msから見え方を調整します。300msは練習用の値で、すべての操作に最適な速度ではありません。
| 確認する項目 | 例 |
|---|---|
| レイヤー名 | 両画面の対象をIndicatorにする |
| 階層 | 両画面で同じ親の下に置く |
| 変化 | まず位置など1項目だけ変える |
| 接続 | 対象の移動でSmart animateを選ぶ |
| 時間 | 動きを追える速度にして確認する |
影や形状間の変形など、すべての差が補間されるわけではありません。対応しない属性や対応レイヤーがない場合、期待した移動ではなくフェードに見えることもあります。動かないときは時間を長くして、名前・階層・実際に変えた属性を確認してください。
画面移動・オーバーレイ・スクロールを選ぶ
モーダルはオーバーレイを使う
確認ダイアログのように現在の画面の上へ重ねたい場合は、別フレームを用意し、アクションをOpen overlayにします。位置、外側をクリックしたときに閉じる設定、背後の背景を調整できます。閉じるアイコンにはClose overlayを設定します。オーバーレイの公式説明
長い画面は中身がフレームより大きいか確認する
縦スクロールの画面では、表示領域を表すフレームの高さより内側の内容を長くし、プロトタイプのオーバーフローを垂直にします。内容が全部収まっている場合、スクロールする領域はありません。必要に応じてコンテンツを隠す設定を使い、はみ出した部分の表示を制御します。スクロールの公式説明
オートレイアウトの高さをHugにして内容全部に追従させると、表示領域も伸びてしまう場合があります。表示領域と、その中の内容を分けて設計してください。親子のサイズ調整はオートレイアウトの使い方で説明しています。
共有リンクは閲覧範囲も確認する
プロトタイプのURLをコピーしただけで、すべての相手が閲覧できるわけではありません。共有設定の対象、閲覧権限、組織の公開リンク制限を確認します。招待した相手だけに見せる場合と、リンクを持つ人へ公開する場合を混同しないでください。
現行の公式資料では、デザインファイルへのアクセスを与えずプロトタイプだけを共有する機能は有料プランの条件があります。Starterでプレゼンテーションから共有すると、閲覧者がソースファイルを開ける場合があります。見せてよい範囲を確認してから共有してください。ファイルとプロトタイプの共有条件
WebページやNotionへの設置には、Figmaの埋め込み方法を参照してください。埋め込みも元ファイルの閲覧条件に従います。
動かないときの確認表
| 症状 | 確認する項目 |
|---|---|
| 押しても移動しない | 接続元の範囲、トリガー、アクションが「なし」になっていないか |
| 別の画面から始まる | 再生しているフローと開始点 |
| 移動先が選べない | 同じページのキャンバス直下のフレームか |
| アニメーションがフェードになる | 名前・階層・対応属性 |
| スクロールしない | 内容の大きさ、親の高さ、オーバーフロー |
| 相手が開けない | 閲覧権限、共有対象、組織の制限 |
プロトタイプは設定した操作を確認するための試作です。フォーム送信やデータ保存など、本番のWebサイトやアプリの処理まで完成するわけではありません。まず「進む・戻る・閉じる」の操作を確認し、表示と遷移の意図が伝わる状態を作りましょう。