How to Set Figma Fixed Position When Scrolling

Your navigation bar scrolls away with everything else. Frustrating, right?

Learning how to set Figma fixed position when scrolling solves this problem instantly. This prototype setting locks headers, menus, and floating buttons in place while content scrolls beneath them.

Fixed positioning separates amateur mockups from professional wireframes. Clients expect to see realistic scroll behavior in presentations.

This guide walks you through the complete process. You’ll learn frame preparation, scroll overflow settings, and the difference between fixed and sticky positioning.

Five minutes of setup. Prototypes that actually feel like real apps.

How to Set Figma Fixed Position When Scrolling

Fixed position when scrolling in Figma is a prototype setting that locks specific layers in place while other content moves behind them.

This feature creates persistent headers, sticky navigation bars, floating action buttons, and fixed menus in your design prototypes.

The scroll behavior settings live in the Prototype tab. You’ll find options for Fixed, Sticky, and Scroll with parent positioning.

This guide covers 3 main steps requiring approximately 5 minutes and Figma version 2023 or later.

Prerequisites

Before you start, make sure you have:

• Figma desktop app or browser (version 2023 or later)
• Basic understanding of Figma layers and frames
• A frame with content extending beyond its boundaries
• Edit access to the Figma file

Time required: 5 minutes.

Skill level: Beginner to intermediate.

Step One: How Do You Prepare Your Frame for Scrolling?

Your frame needs content that extends beyond its visible boundaries. Think of it like a webpage on your phone where hidden content exists below the screen.

Extend Content Beyond Frame Dimensions

Select your frame in the canvas. Drag the bounding box edges to make the frame smaller than the total content height.

Hold ⌘ Command (Mac) or Ctrl (Windows) while resizing to ignore constraints temporarily.

Enable Clip Content

Go to Design panel > Layout section > check the Clip content checkbox.

This hides anything extending beyond the frame boundaries. Your overflow content becomes scrollable instead of visible.

Verify Layer Hierarchy

Check the Layers panel on the left. All child objects should nest beneath their parent frame.

If elements sit outside the frame hierarchy, drag them into the correct position. Proper nesting determines scroll behavior.

Purpose

Frames need overflow content because scrolling only works when there’s hidden content to reveal. Without content extending beyond boundaries, there’s nothing to scroll through.

Step Two: How Do You Apply Scroll Overflow to Your Frame?

Scroll overflow defines how users interact with content beyond the frame dimensions. You set this in the Prototype tab.

Select the Parent Frame

Click directly on the top-level frame in your canvas. Don’t select individual elements inside it.

The Properties panel should show frame settings, not object settings.

Open the Prototype Tab

Click “Prototype” in the right properties panel. Look for the Scroll behavior section near the top.

Set Overflow Direction

Click the Overflow dropdown menu. Choose from:

• Vertical – scroll up and down (most common for web pages)
• Horizontal – scroll left and right (for sliders and galleries)
• Both directions – pan freely like an interactive map
• No scrolling – content stays static

Location: Prototype tab > Scroll behavior section > Overflow dropdown.

Expected Result

Your frame becomes scrollable in Presentation view. Click the play icon to preview.

If you see an error about content size, your frame content isn’t extending beyond the boundaries yet.

Purpose

Overflow settings determine scroll direction. Vertical scrolling mimics standard webpage behavior. Horizontal works for carousels in Figma and product sliders.

Step Three: How Do You Set an Object to Fixed Position?

Now you’ll lock specific elements in place while everything else scrolls. This is where the magic happens for user interface prototyping.

Select the Object to Fix

Click the element you want to stay in place. This could be a navigation bar, header, footer, or floating button.

You can select groups or components too. Multiple connected elements? Group them first.

Open Prototype Tab Settings

With your object selected, go to the Prototype tab. Find the Scroll behavior section.

You’ll see a Position dropdown menu. Default setting is “Scroll with parent.”

Choose Fixed from Position Dropdown

Click the Position dropdown. Select Fixed.

Location: Prototype tab > Scroll behavior section > Position dropdown > Fixed.

Figma automatically moves fixed layers above other layers in the Layers panel. You’ll see them labeled as “Fixed” in the hierarchy.

Understanding Position Options

Three choices exist:

• Scroll with parent – moves with content (default)
• Fixed – stays locked in place permanently
• Sticky – scrolls first, then locks when reaching top edge

Fixed positioning works for status bars, persistent menus, and floating action buttons that never move.

Auto Layout Consideration

You cannot assign fixed position to objects inside auto layout frames unless they have absolute position applied first.

Enable absolute positioning in the Design panel before setting fixed scroll behavior.

Purpose

Fixed positioning keeps critical interactive elements visible during scrolling. Users always see the navigation, call-to-action buttons, or important controls without scrolling back up.

How Do You Use Sticky Position Instead of Fixed?

Sticky positioning behaves differently than fixed. The element scrolls normally at first, then locks in place once its top edge hits the parent frame’s top.

Scroll back up and it unsticks, moving down with the content again.

When to Use Sticky vs Fixed

Fixed – element never moves, stays locked from the start. Best for persistent headers, status bars, floating buttons.

Sticky – element scrolls into view, then sticks at top. Best for section headers, table headers, secondary navigation that appears mid-page.

Sticky Behavior Within Nested Frames

Sticky objects stay within their direct parent’s bounds. When the parent frame scrolls out of view, the sticky element scrolls away with it.

This creates natural section breaks in long scrolling content.

Canvas Stacking Order

Layers below sticky objects scroll behind them. Layers above scroll in front.

Change stacking order in the Layers panel. For auto layout frames, the default is “Last on top.”

To reverse: Auto layout section > Auto layout settings (three dots) > Canvas stacking > First on top.

Purpose

Sticky positioning creates more dynamic scroll interactions than fixed. Content feels more natural when headers stick contextually rather than permanently blocking screen space.

Verification

Test your prototype before considering it done.

Preview in Presentation View

Click the Present button (play icon) in the top right corner. Keyboard shortcut: ⌘ + Enter (Mac) or Ctrl + Enter (Windows).

Test Scroll Behavior

Scroll through your content. Fixed elements should stay completely stationary while other content moves.

Check all fixed layers remain visible in expected positions.

Check Layers Panel Labels

Back in edit mode, open the Layers panel. Fixed objects display a “Fixed” label next to their name.

Missing the label? The setting didn’t apply correctly.

Test on Device Frames

If designing for mobile-first, preview on actual device frame dimensions. Fixed positioning might look different on phone versus desktop viewport sizes.

Troubleshooting

Common problems and how to fix them fast.

Fixed Position Option Is Disabled (Greyed Out)

Cause: Object is inside an auto layout frame without absolute positioning.

Solution: Select the object > Design panel > enable Absolute position toggle, or remove auto layout from parent frame entirely.

Fixed Element Disappears in Prototype Preview

Cause: Constraints set incorrectly, element positioned outside visible frame bounds.

Solution: Check constraints in Design panel. Set to appropriate edge (center bottom, top left, etc.). Verify element sits within the frame’s visible area at its intended scroll position.

Fixed Element Appears Behind Scrolling Content

Cause: Layer order wrong in hierarchy.

Solution: Rearrange layers in the Layers panel. Fixed elements should be positioned correctly relative to scrolling content. Check canvas stacking setting if using auto layout.

Scroll Behavior Not Working at All

Cause: Content doesn’t extend beyond frame, overflow not set, clip content disabled.

Solution:

• Confirm content extends past frame boundaries
• Set Overflow to Vertical or Both directions in Prototype tab
• Enable Clip content in Design panel

Sticky Element Not Sticking at Correct Position

Cause: Nested inside another frame that limits sticky behavior.

Solution: Move sticky element to be a direct child of the scrolling frame, or accept that it will stick within its parent container’s bounds only.

Related Processes

Once you’ve got fixed positioning down, these related Figma skills level up your prototyping.

• How to make Figma interactive – add click interactions and transitions
• How to link pages in Figma – connect multiple screens in your prototype
• How to make a frame in Figma – create proper containers for scroll behavior
• How to create variants in Figma – build component states for interactive prototypes
• How to animate in Figma – add motion to your scroll interactions
• How to make components in Figma – create reusable fixed navigation elements

Fixed scroll positioning transforms static mockups into realistic user experience prototypes. Master this skill and your presentations instantly feel more professional.

FAQ on How To Set Figma Fixed Position When Scrolling

Why is the fixed position option greyed out in Figma?

The object is inside an auto layout frame without absolute positioning enabled. Select your element, open the Design panel, and toggle on Absolute position. This overrides auto layout constraints and unlocks the fixed scroll behavior option.

What is the difference between fixed and sticky in Figma?

Fixed elements never move and stay locked from the start. Sticky elements scroll normally until their top edge reaches the parent frame’s top, then lock in place. Scroll back up and sticky elements unstick.

Can I make multiple elements fixed at the same time?

Yes. Select multiple objects or group them first. Apply fixed position to the selection or group. All elements will stay locked together while other content scrolls. Check the Layers panel to confirm the “Fixed” label appears.

Why does my fixed element disappear in prototype preview?

Your element’s constraints are likely set incorrectly, positioning it outside the visible frame area. Check the Design panel constraints. Set them to match where you want the element to appear (top left, center bottom, etc.).

Does fixed position work with components in Figma?

Yes. Components accept fixed scroll positioning just like regular objects. Select the component instance, open the Prototype tab, and set Position to Fixed. This works great for reusable navigation bars and persistent buttons.

How do I fix a navigation bar to the top of my Figma prototype?

Select your nav bar element. Go to Prototype tab > Scroll behavior > Position dropdown > Fixed. Set constraints to “Top” and “Left and Right” in the Design panel. Preview with the Present button to verify.

Why is my fixed element appearing behind scrolling content?

Layer order is wrong. Fixed layers should appear above scrolling content in the Layers panel. Drag your fixed element higher in the hierarchy. For auto layout frames, change Canvas stacking to “First on top.”

Can I use fixed position inside nested frames?

Fixed position only works on direct children of the scrolling frame. Deeply nested objects cannot be fixed. Move your element to be a direct child of the main scrollable frame, then apply fixed positioning.

How do I create a fixed footer button in Figma?

Place your button inside the scrollable frame. Set constraints to “Bottom” and your preferred horizontal alignment. Open Prototype tab, set Position to Fixed. The button stays locked at the bottom during scrolling.

Does fixed position work with horizontal scrolling?

Yes. Set your frame’s Overflow to Horizontal or Both directions. Apply fixed position to elements you want locked. They remain stationary while content scrolls left and right. Works well for persistent sidebars and vertical navigation.

Conclusion

You now know how to set Figma fixed position when scrolling. The process takes five minutes and transforms static designs into realistic prototypes.

Remember the three core steps: prepare your frame with overflow content, apply scroll behavior settings, and set individual layers to Fixed or Sticky positioning.

Fixed elements keep hamburger menus, headers, and floating buttons visible during vertical scrolling. Sticky positioning works better for contextual section headers.

Watch out for auto layout conflicts. Enable absolute position first if the fixed option appears greyed out.

Test everything in Presentation view before sharing. Check the Layers panel for proper hierarchy and canvas stacking order.

Your prototypes will feel like actual apps now. Clients notice the difference immediately.