Figmaの「Scroll behavior」で、プロトタイプのヘッダーだけスクロール固定にする
実装前のプロトで「ヘッダー固定」を見せたいとき。クライアント説明が楽になる地味な設定。
どんな問題を解決するか / いつ使うか
長い画面のプロトタイプで、スクロールしてもナビ/ヘッダーを残して見せたいとき。実装の position: sticky の挙動を、Figma上で先に確認・説明したいとき。
関連: Figmaのページがカオスなら、作業前に「セクション」でフレームをまとめてラベル付けする、Figmaは Cmd(Ctrl)+/ の「クイックアクション」で、機能名からすぐ呼び出す
具体手順
- プロトタイプ用フレーム内で、固定したいヘッダー(やナビ)を選択する。
- 右側パネルの Scroll behavior(スクロール時の挙動)で、スクロールしてもその要素が残る設定にする(固定表示)。
- プロトタイプ再生でスクロールし、ヘッダーだけ残ることを確認する。
- クライアントやレビューでは「実装後も同様に固定する想定」と一言添える。
注意点
- プロトの見た目確認用。実装の sticky/fixed の細かい仕様(交差、z-index、モバイルのアドレスバー)までは保証しない。
- 基本機能だが、知らないと「スクショを何枚も切る」説明になりがち。