Figma Fixed Header on Scroll: A Step-by-Step Guide

As a UI/UX designer, app developer, or product manager, you’ve likely encountered a common frustration while building prototypes in Figma: your perfectly designed header or navigation bar scrolls away with the content. This default behavior can make your prototype feel less realistic and harder to navigate for users. You want your header and navigation bar to always be visible on the screen; they should remain fixed and not scroll, allowing only the content cards inside to scroll. Fortunately, Figma offers a straightforward solution to create a figma fixed header on scroll, ensuring your essential UI elements stay right where they belong.

Why Your Header Disappears on Scroll (And How to Fix It)

By default, when you create a frame in Figma and add content that extends beyond its visible height, everything within that frame will scroll together. This includes your header, footer, and any other elements you might have placed at the top or bottom. While this is useful for displaying long pages of content, it's not ideal for elements like app headers or fixed navigation bars that need to be constantly accessible. The solution lies in using Figma's 'Fixed position' feature, which tells the prototype to keep specific elements in place regardless of how much the user scrolls. As designers, we often want our header and navigation bar to always be visible on the screen, remaining fixed and not scrolling, while only the internal content scrolls.

Step 1: Setting Up Your Vertical Scroll Frame

Before you can fix your header, you need a scrollable frame. This is the foundation for your figma vertical scroll tutorial. If your content doesn't extend beyond the frame's height, there's nothing to scroll, and thus nothing to fix.

1. Create a Frame: Start by drawing a new Frame (F key) or selecting an existing one that represents your screen (e.g., iPhone 14, Desktop).
2. Add Content: Populate your frame with content, including your header, body content (e.g., cards, text blocks), and potentially a footer.
3. Extend Frame Height: Drag the bottom edge of your frame downwards to make it taller than its initial screen size. This extra height will allow for scrolling. For example, if your iPhone 14 frame is 844px tall, extend it to 1500px or more, ensuring your content fills this extended space.
4. Set Vertical Scrolling: With the main frame selected, go to the Design panel on the right. Under the "Prototype" section (you might need to switch from "Design" to "Prototype" tab at the top of the right panel), ensure that "Overflow scrolling" is set to "Vertical scrolling." If you don't see this option, it means your frame's content does not exceed its initial height, or you are not in the Prototype tab.

[Screenshot: A Figma frame with content extending beyond its initial height, and the "Vertical scrolling" option selected in the Prototype panel.]

Step 2: Pinning the Header with Constraints

Constraints determine how elements resize or reposition themselves when their parent frame changes size. For a fixed header, they are essential for ensuring it sticks to the top and sides of the screen. We will select our Header, then go to the position settings in the Design panel, and here we are going to select Top and Left.

1. Select Your Header: Click on your header group or frame within your main screen frame. Make sure you're selecting the actual header component, not the entire screen frame.
2. Apply Constraints: In the Design panel on the right, locate the "Constraints" section. You'll see horizontal and vertical pinning options.
   • For the horizontal constraint, select "Left & Right" or "Left" if your header is fixed width. "Left & Right" is generally preferred for responsive headers.
   • For the vertical constraint, select "Top." This pins your header to the top edge of its parent frame.

[Screenshot: The Figma Design panel showing a header selected, with "Left & Right" and "Top" constraints highlighted under the Constraints section.]

Step 3: Activating 'Fixed position when scrolling'

This is the most critical step to achieve the figma fixed header on scroll effect. This setting tells Figma to keep the selected element in its viewport position while the rest of the content scrolls underneath it. After setting constraints, go to the Prototype tab, and under the position settings, click and select 'Fixed - Stay in place'.

1. Switch to Prototype Panel: With your header still selected, switch from the "Design" tab to the "Prototype" tab in the right-hand panel.
2. Locate "Position" Setting: Scroll down in the Prototype panel until you find the "Position" dropdown menu. By default, it will likely say "Scroll with parent."
3. Select "Fixed - Stay in place": Click the dropdown and choose "Fixed - Stay in place." This instantly tells Figma that this element should not scroll with its parent frame.

[GIF: Start with a prototype where the header scrolls away. Then, show selecting the header, going to the Prototype panel, and changing "Position" to "Fixed - Stay in place." The GIF should then show the prototype again with the header now fixed while content scrolls.]

Now, when you preview your prototype, your header will remain visible at the top of the screen, creating a professional and user-friendly experience, much like a real app or website with a figma sticky header.

Pro-Tip: Creating a Fixed Footer for Navigation Bars

The same technique can be applied to create a figma prototype fixed footer, perfect for bottom navigation bars common in mobile apps. Now, if you want your navigation bar to also not scroll, you can apply the same principle. You would select the navigation bar, go to the Design panel, and set its constraints to ensure it's fixed at the bottom of your screen. So, for the vertical constraint, you would select 'Bottom'.

1. Select Your Footer/Navigation Bar: Click on the footer or bottom navigation bar group/frame.
2. Apply Constraints (Design Panel):
   • Horizontal: "Left & Right" (for responsive width) or "Left".
   • Vertical: Select "Bottom." This pins it to the bottom edge.
3. Activate "Fixed position when scrolling" (Prototype Panel):
   • Switch to the "Prototype" tab.
   • Under "Position," select "Fixed - Stay in place."

This will ensure your bottom navigation bar remains visible and accessible as users scroll through content, enhancing the overall usability of your prototype.

Beyond Fixed Headers: Build a Complete Prototype

Mastering the figma fixed header on scroll technique is just one step in building compelling and interactive prototypes. Figma offers a vast array of features that allow you to simulate real user experiences, from basic navigation to complex interactions and animations. Understanding how to keep elements in place while others scroll, or how to create dynamic components, are essential skills for any designer or developer.

If you're looking to deepen your Figma prototyping skills and learn how to build a fully clickable and interactive prototype from scratch, Juno School offers a dedicated course. This course covers everything from basic frame setup to advanced interactions, ensuring you can bring your designs to life with realism and precision. Explore more advanced techniques and build a complete, interactive prototype by enrolling in Juno's Build a Clickable Prototype in Figma free certificate course.