Figmaのオーバーレイは、元の画面を残したまま、ダイアログやメニューを重ねて見せるプロトタイプ機能です。画面全体を別ページへ切り替えると、背後の情報が見えなくなる場面で役立ちます。
基本は、表示する内容を別のフレームに作り、ボタンからOpen overlayでつなぐことです。表示位置と閉じ方まで設定すると、確認ダイアログの一連の動きを試せます。
通常の画面遷移との違い
| アクション | 使う場面 | 今回の例 |
|---|---|---|
| Navigate to | 表示する画面そのものを切り替える | 一覧から詳細へ進む |
| Open overlay | 元の画面に別のフレームを重ねる | 保存の確認ダイアログを開く |
| Close overlay | 表示中のオーバーレイを閉じる | キャンセルで元の画面へ戻る |
同じ見た目のダイアログでも、画面全体を複製して切り替える方法と、オーバーレイとして重ねる方法では管理の仕方が変わります。共通の確認画面を複数箇所から開くなら、オーバーレイにまとめると修正箇所を減らせます。
表示するフレームを分けて用意する
練習用に、元の画面をMain、確認ダイアログをConfirmというフレーム名で作ります。Confirmには、見出し・説明文・キャンセルボタン・確定ボタンを入れます。
たとえばMainが幅390pxのモバイル画面なら、Confirmを幅320pxから試すと左右の余白を見比べやすくなります。この数値は練習用の例で、Figmaの推奨サイズや固定の規則ではありません。説明文の長さや表示端末に合わせて調整します。
ダイアログだけを重ねたい場合、Confirmを画面全体と同じ大きさにする必要はありません。背景を暗くするための長方形までフレームに含めると、外側クリックの判定範囲や配置を考えにくくなるので、まず内容部分のフレームとして作ります。
ボタンからOpen overlayでつなぐ
- Main内の「保存」ボタンを選び、Prototypeタブを開きます。
- 接続をConfirmフレームへつなぎます。
- トリガーをOn click、アクションをOpen overlayにします。
- 接続先がConfirmになっていることを確認します。
- 表示位置を中央に設定し、Mainからプロトタイプを再生します。
作成の基本操作と配置設定はFigma公式のオーバーレイガイドにあります。編集キャンバスでフレームが並んで見える状態と、再生時に重なって見える状態を区別して確認します。
最初の動作確認ではアニメーションを控えめにし、「押したら開く」が成立することを先に確かめます。開く動きと閉じる動きが整ってから、フェードや移動などの表現を加えると原因を切り分けやすくなります。
背後を暗くする・表示位置を変える
Add background behind overlayを有効にすると、元の画面とオーバーレイの間に背景色を加えられます。色と不透明度を調整し、元の画面が残っていることと、ダイアログが前面にあることの両方が伝わる見た目にします。
画面中央の確認ダイアログなら中央配置、ボタンの近くへ出すメニューなら手動配置など、用途に応じて位置を選びます。手動配置では、編集画面での見た目だけで判断せず、再生中の画面サイズで開いて確認してください。
別の幅の画面でも使う場合は、同じ接続先で端が切れないかを確認します。長い文章によってフレームの高さが増えた場合も、下部の確定ボタンが見えるかを見直します。
閉じる操作を必ず作る
Confirm内のキャンセルボタンや閉じるアイコンに、On clickとClose overlayを設定します。外側を押して閉じたい場合は、Close when clicking outsideも有効にします。
重要な入力途中に誤って閉じてほしくない画面では、外側クリックで閉じる設定を外すという判断もあります。その場合でも、戻る・キャンセルなど、利用者が閉じ方を理解できる操作を残します。
確定ボタンについては、閉じるだけなのか、次の画面へ進むのかを先に決めます。このプロトタイプ操作だけで実際のデータ保存が行われるわけではないため、レビューでは「確認したい画面上の動き」として扱います。
表示されない・閉じられないときの確認順
- Mainから再生しているか。Confirm単体を再生していないか。
- 接続がNavigate toになっていないか。
- クリックするレイヤーに意図した操作が設定されているか。
- Confirmフレームの範囲が、想定するダイアログの範囲と合っているか。
- 閉じるボタンにClose overlayが設定されているか。
表示中のオーバーレイを別のものへ置き換えるときにはSwap overlayも使えます。ただし、Backで戻る動きとは性質が異なるため、単純な確認画面では開く・閉じるから組み立てると管理しやすくなります。アクションの違いはFigma公式のプロトタイプアクション一覧で確認できます。
最後に、開く、閉じる、もう一度開くという順で確認します。ダイアログの外側を押す操作も試すと、意図しない閉じ方や、閉じられない状態を見つけやすくなります。