Chapter 3 › Lesson 14

14. Design Fixed Headers and Scrollable Body Areas

Skills: Separate frame for header; Separate frame for scrollable content; Fix position in prototype settings; Combine with vertical scrolling on body

Many app screens have a header that stays visible while the body scrolls. In Figma, you achieve this with separate frames — one fixed header and one scrollable body — combined with prototype settings.

14. Design Fixed Headers and Scrollable Body Areas
Figure: The header frame stays fixed while the body frame scrolls independently. Create separate frames and use Fix Position in prototype settings.

Step-by-step

  1. Press F and create a frame for the header — make it the full width of your screen and about 60–80px tall. Add background, title text, and any buttons
  2. Press F again and create a second frame directly below it — this is the scrollable body. Make it the remaining height of your screen
  3. In the body frame, fill it with enough content to be scrollable (several cards, list items, or text sections)
  4. Select the body frame. In the right panel, find Clip content and enable it
  5. Scroll down to the Prototype section in the Design panel and set Vertical scrolling to On
  6. Select the header frame. Keep its scrolling setting off — it needs to stay fixed
  7. Switch to Prototype mode. Select the header frame and enable Fix position when scrolling (the pin icon in the Prototype panel)
  8. Select the body frame and verify it scrolls (you'll see a scroll indicator on the right)
  9. Group both frames into a parent frame (optional) to keep them organised
  10. Press Present and scroll — the body moves, the header stays in place

Pro tip

Fix position in prototypes works differently than CSS 'position: fixed'. In Figma, you set it on individual frames within a larger frame. The fixed element stays in place while sibling frames scroll.