テック技報最新号へ →
デザイン

Figmaの「Scroll behavior」で、プロトタイプのヘッダーだけスクロール固定にする

実装前のプロトで「ヘッダー固定」を見せたいとき。クライアント説明が楽になる地味な設定。

@wokobo_net · 2026-11-08
#Figma#プロトタイプ#ヘッダー#UI

どんな問題を解決するか / いつ使うか

長い画面のプロトタイプで、スクロールしてもナビ/ヘッダーを残して見せたいとき。実装の position: sticky の挙動を、Figma上で先に確認・説明したいとき。

関連: Figmaのページがカオスなら、作業前に「セクション」でフレームをまとめてラベル付けする、Figmaは Cmd(Ctrl)+/ の「クイックアクション」で、機能名からすぐ呼び出す

具体手順

  1. プロトタイプ用フレーム内で、固定したいヘッダー(やナビ)を選択する。
  2. 右側パネルの Scroll behavior(スクロール時の挙動)で、スクロールしてもその要素が残る設定にする(固定表示)。
  3. プロトタイプ再生でスクロールし、ヘッダーだけ残ることを確認する。
  4. クライアントやレビューでは「実装後も同様に固定する想定」と一言添える。

注意点

  • プロトの見た目確認用。実装の sticky/fixed の細かい仕様(交差、z-index、モバイルのアドレスバー)までは保証しない。
  • 基本機能だが、知らないと「スクショを何枚も切る」説明になりがち。

出典

X の元の投稿を開く