How to Set Figma Fixed Position When Scrolling

The setting lives in the Prototype tab, inside a dropdown labeled Position. That’s the part that trips people up, because most designers go hunting for a checkbox in the Design panel first. It used to sit there. It doesn’t anymore.

Pick a layer inside a frame that already scrolls, set Position to Fixed, and that layer stays anchored to the viewport while everything behind it moves. The same dropdown carries Sticky, which does something else entirely: the layer scrolls along normally until it hits the top edge of the frame, then locks there.

No plan gate on any of this. Figma’s help center documentation confirms the setting works on any plan, including the free tier, and needs only edit access to the file (Figma Help Center, 2026).

What Is Fixed Position When Scrolling in Figma?

Figma calls it Fixed. You’ll find it in the Position dropdown, under Scroll behavior, in the Prototype tab.

Any layer, group, or component set to Fixed stays pinned to the viewport while the rest of the frame slides past underneath it.

The option only appears once the parent frame has scroll overflow turned on. Which makes sense. If nothing spills past the frame edges, there’s no scroll for a layer to hold still against.

Sticky sits in the same dropdown, one line away, and gets confused with Fixed constantly. A sticky object scrolls like everything else at first, then locks in place once its top edge reaches the top of the frame.

It isn’t a plugin, and it doesn’t export as CSS. It also won’t appear on a static PNG.

• Applies to one layer, group, or component at a time, chosen individually
• Renders only inside a running prototype, never on the editing canvas itself

People asked for this pair of settings for years before Figma shipped them properly. The community forum thread announcing sticky scrolling went live on January 25, 2021, and has since pulled in more than 100,000 views (Figma Community Forum). That’s heavy traffic for what amounts to a feature note.

Fixed Position When Scrolling vs Position Sticky in CSS

The names get swapped constantly, and the swap is backwards.

Figma’s Fixed locks a layer in one spot for the entire scroll, which maps onto CSS position: fixed. Sticky in Figma is the closer cousin to CSS position: sticky, since both wait for the scroll to reach them before doing anything.

The gap shows up at handoff, and it shows up as extra work for somebody else. A developer turning a Figma sticky header into real code still writes the offset and z-index by hand, because a CSS stylesheet needs those numbers and Figma’s dropdown never stored one.

Even the spec treats sticky as a hybrid rather than its own thing. The W3C’s CSS Positioned Layout Module Level 3, last published as a working draft in October 2025, still describes sticky positioning as a mix of relative and fixed.

So the divergence lands in three fairly boring places.

• Figma’s Fixed and Sticky only affect the prototype preview, never the underlying file structure
• CSS position: sticky affects the live, rendered page directly
• Figma has no equivalent of CSS’s top, left, right, or bottom offset values

Fixed Position vs Constraints and Pinning in Figma

Both features “lock” a layer, which is why they get mixed up. They’re answering completely different questions though.

Constraints care about resizing. When a parent frame gets wider or taller, constraints decide whether a layer stretches, centers, or pins to an edge. Fixed doesn’t care about any of that. Fixed cares about scrolling, inside a frame that already has overflow turned on.

The constraints panel keeps layouts intact across different frame sizes and device previews, and it works whether or not scroll overflow is on at all. Its blind spot is scrolling. A header pinned left and right will still scroll straight off the top unless Fixed is applied on top of it.

Fixed goes the other way. It holds a layer anchored through the entire scroll regardless of frame size, and it needs almost no setup beyond picking Fixed from the dropdown. It also has zero opinion about how that layer resizes when the frame width changes.

When to Combine Both Methods

Most working prototypes use both on the same layer. It isn’t an either-or choice, despite how the two panels are separated.

A standard setup pins a header left and right in the constraints panel so it stretches full width across frame sizes, then sets Fixed in the Position dropdown so it stays anchored once scrolling starts.

• Constrain left and right for full-width elements that need to scale with the frame
• Constrain top and bottom together only when a layer must grow vertically with content
• Apply Fixed after constraints are set, since resizing a fixed layer afterward can throw off its position

That last one bit me more than once. Set constraints, then Fixed, in that order.

How Overflow Scrolling Enables Fixed Position

Overflow scrolling is the switch that has to be flipped before Fixed becomes selectable at all.

Select the frame, open Figma’s prototyping tools, and find the Overflow dropdown inside the Scroll behavior section of the Prototype tab.

Sticky plays by narrower rules. Figma’s documentation ties it specifically to frames with vertical scrolling, so a horizontal-only carousel can hold Fixed layers but never Sticky ones.

Vertical, Horizontal, and Both Scrolling Frames

Vertical is what most people pick, since it mirrors how long pages and app feeds already behave.

• Vertical: long pages, feeds, article layouts
• Horizontal: carousels, filmstrips, side-scrolling galleries
• Both directions: maps, zoomed diagrams, oversized canvases

Horizontal scrolling holds a fixed vertical position while content slides sideways, which is exactly why it suits carousels and product rows.

How to Set Fixed Position When Scrolling in Figma

Once a frame already scrolls, the rest is quick.

1. Select the frame that needs to scroll, and confirm its content actually extends past the frame’s edges
2. Open the Prototype tab in the right sidebar and set the Overflow dropdown to Vertical, Horizontal, or Both directions
3. Click the specific layer, group, or component that should stay in place, not the frame itself
4. In the same Prototype tab, find the Position dropdown under Scroll behavior and choose Fixed
5. Click Present in the top right corner to preview the result, since Fixed never shows up on the editing canvas

Figma then moves that layer above the others in the frame automatically, and tags it “Fixed” in the Layers panel on the left.

The move to the Prototype tab has its own paper trail, incidentally. The forum thread announcing it has drawn more than 5,600 views since March 2023 (Figma Community Forum), mostly from people who couldn’t find the old checkbox.

If the Position dropdown doesn’t offer Fixed for a layer, the parent frame’s Overflow is almost certainly still on No scrolling. Check that before anything else.

Fixed Position Behavior Inside Auto Layout Frames

Auto layout is where this gets genuinely annoying, because the two features actively block each other.

Figma’s documentation says it plainly: a fixed scroll position cannot be assigned to any object inside an auto layout frame unless that specific object has absolute position turned on. Absolute position yanks the layer out of the auto layout stack, and that’s what puts Fixed back on the menu.

Without it, the Position dropdown simply won’t list Fixed for that layer. No warning, no greyed-out entry explaining why. It’s just not there. You don’t need to strip auto layout off the whole frame though, only the one layer needs absolute position.

Figma shipped a fix for a related pain point on November 16, 2023, letting sticky scrolling apply to any node or descendant inside an overflowing frame instead of a narrow set of layers (Figma Community Forum). Designers building sticky headers inside auto layout stacks had been asking since the Position dropdown was rebuilt in March 2023.

Layer order inside an auto layout frame still determines what a fixed layer sits in front of or behind, given that Figma sorts Fixed layers above everything else anyway.

So if a layer has to stay part of an auto layout stack for spacing and also stay fixed during scroll, turn on absolute position first, then set Fixed.

Where Fixed Position When Scrolling Is Visible

Nothing happens on the editing canvas. Nothing at all, even with Fixed applied and the panel confirming it. Almost everyone hits this on their first attempt and assumes the setting failed.

You’ll see it in presentation view, opened with the Present button. You’ll also see it in embedded prototypes shared via iframe on an external page, and in shared prototype links opened outside the Figma editor.

You won’t see it on the regular design canvas in edit mode, or in static exports like a PNG or PDF snapshot of a single frame.

The effect activates only once a prototype is actually running. That’s deliberate, since Fixed is a prototype behavior rather than a static layout property.

Best Use Cases for Fixed Position When Scrolling

Fixed earns its keep on a handful of UI patterns. Not everywhere, and definitely not on every layer that looks important.

What ties the good cases together is persistence. Something needs to stay reachable no matter how far a user has scrolled down.

• A 40-participant usability study found sticky navigation cut task-completion time by 22% compared with standard navigation (Denney, Smashing Magazine, 2012)
• Of the participants in that same study who had a preference between the two designs, 100% picked the sticky version, without being able to say why
• Google’s Material Design guidelines cap floating action buttons at a single one per screen (m3.material.io)

That second finding is my favorite, honestly. People preferred it and couldn’t articulate the reason, which is roughly how good interface work is supposed to feel.

Sticky Headers and Navigation

A header pinned with Fixed keeps the logo, menu, and search bar reachable through an entire long page.

Same pattern covered under sticky navigation, just built natively inside a Figma prototype instead of shipped as live CSS.

• Primary navigation bars on marketing sites and long-form articles
• Section tabs that stay visible while a user browses categories below them

Floating Buttons and Persistent Actions

A floating action button set to Fixed stays in its corner regardless of scroll position. Mobile apps lean on this for one primary action, and only one.

Persistent buttons behave the same way for a call-to-action that has to stay visible on a checkout or signup screen.

Placement tends to fall into a few spots:

• Bottom-right corner for a single add or create action
• Bottom-center bar for a checkout or signup CTA
• Bottom-left for chat or support triggers, less common but still used

When Fixed Position When Scrolling Does Not Apply

The failures here are documented and repeatable, not random.

Published components are the big one. A 49-reply thread on Figma’s community forum confirms that Fixed set on a layer inside a component only shows up reliably in instances within the file of origin. Drop that same component into another file through a published library and the behavior doesn’t reliably follow it.

Nesting causes the other common failure. Figma’s community forum confirms Fixed only works on objects placed directly inside the scrolling frame, so a layer buried a few levels deep inside nested groups won’t respond.

Then there’s the disappearing-layer problem. An object fixed outside the frame’s starting viewport can vanish entirely, because its position gets calculated from the parent frame’s original x and y coordinates rather than the visible scroll window.

• A layer pinned below the fold with no adjustment to its constraints stays off-screen the whole time
• Reassigning its constraints to the bottom or right edge is the workaround reported most often on the forum

Scrolling content above and below a single fixed section isn’t supported natively either. The forum thread on that exact problem has drawn more than 27,500 views, and users have landed on split-frame workarounds rather than a built-in setting.

Fixing Common Fixed Position Problems

Nearly every Fixed position issue traces back to the wrong layer being selected, Overflow sitting on No scrolling, or auto layout quietly blocking the option.

Checkbox Greyed Out or Not Fixed in Preview

Clicking the whole frame instead of the specific layer surfaces only the Overflow setting. Position appears for objects, never for their parent frame, so a frame selection hides half the panel.

A frame nested inside another frame sometimes has to be selected directly rather than through a group before both dropdowns show up.

• Click the layer name in the Layers panel instead of the canvas, if the canvas keeps grabbing the wrong item
• Confirm the parent frame’s Overflow isn’t set to No scrolling before checking Position
• Reopen the Prototype tab after switching layers, since the panel occasionally needs a fresh click to refresh

Fixed Position When Scrolling in Dev Mode and Code Export

Dev Mode hands developers spacing, color, and typography. Fixed and Sticky live in a different tab, so they don’t come along for the ride.

The Prototype tab’s Scroll behavior settings sit outside the Design properties that Dev Mode’s Inspect panel translates into CSS snippets.

The split runs all the way down to the data model. Figma’s own API specification gives every layer node a boolean isFixed field plus a separate scrollBehavior property (figma.com/developers/api).

Which brings back the handoff gap from earlier. Those fields exist in Figma’s data, not in a stylesheet, and that’s a large part of why exact offset and z-index values still get typed by hand.

• The isFixed and scrollBehavior fields are readable through Figma’s REST API, useful for a custom plugin or script, not a one-click CSS export
• Sticky layers appear as their own StickyNode type in the API response, separate from a standard node with isFixed set to true

In practice, check which layers are set to Fixed or Sticky in the Prototype tab before writing anything, then translate those into explicit CSS rules once the rest of the layout code exists.

Figma Fixed Position vs Other Prototyping Tools

Every major design tool has some version of this, and the differences surface the second a file changes hands.

Sketch documents two ways to calculate a fixed layer’s landing spot: Proximity, which infers top or bottom placement automatically, and Pinning, set through the Resizing section of the Design tab (sketch.com, last updated January 2026).

Adobe’s forum is a reminder of how long these bugs can sit unresolved. A thread reporting that Fix Position When Scrolling breaks horizontal Scroll Groups has run since 2020 and passed 18,600 views without an official fix (Adobe Community).

Framer and Webflow sit in a different category for one reason. Both export production CSS, so their position values are the actual position: fixed and position: sticky properties rather than a prototype-only approximation.

Figma still lags on two specific things:

• No pixel-based offset field for Sticky, unlike Webflow’s Top value or Framer’s offset parameter
• Fixed and Sticky are prototype behaviors, not shipped code, which puts Figma closer to Sketch and Adobe XD than to Framer or Webflow

FAQ on How To Set Figma Fixed Position When Scrolling

Is Fixed Position When Scrolling a Plugin or a Native Feature?

Fixed position when scrolling ships natively inside Figma’s Prototype tab, no plugin needed. Tools like Anima replicate similar fixed-layer behavior for handoff into Sketch or Adobe XD files, but inside Figma the Position dropdown handles it without any installed plugin.

Does Fixed Position Affect the Figma API or Exported Layer Data?

Figma’s Plugin API exposes the same isFixed and scrollBehavior fields as the REST API, letting a script read a layer’s scroll setting. Static exports like PNG or PDF carry no scroll data, since those formats capture only a single frame.

When Should You Use Fixed Position Instead of Interactive Components or Smart Animate?

Fixed position suits a layer that never changes state, like a static header. Interactive components handle layers that swap variants on tap, and Smart Animate handles a layer transforming shape or position between frames, which Fixed alone cannot replicate.

Does Fixed Position When Scrolling Require a Specific Figma Plan?

Setting Fixed or Sticky costs nothing extra, since prototyping works on any plan with edit access. Inspecting that layer through Dev Mode differs: Figma’s documentation requires a paid plan and a Full or Dev seat before the Code panel appears.

Can Multiple Layers Have Fixed Position in the Same Frame?

Figma limits each layer to one scroll position, Fixed, Sticky, or Scroll with parent, though a frame can hold as many fixed layers as needed. A header, a footer, and a floating button can stay fixed within one frame.

Does Fixed Position Work the Same in the Figma Mobile App Preview?

Figma’s mobile apps read the same Position and Overflow data as desktop Present mode, so Fixed and Sticky layers render the same way on a phone. Figma has not published a separate specification covering mobile preview behavior for scroll position.

What Should You Fix First in How To Set Figma Fixed Position When Scrolling?

Diagnose in order, and the order matters. Check Overflow first. Confirm the layer sits directly inside the scrolling frame second. Rule out auto layout third.

• Overflow set to Vertical, Horizontal, or Both
• Layer placed directly inside the scrolling frame
• Absolute position enabled inside any auto layout stack

Each check gates the next. Overflow decides whether Position even offers Fixed, and auto layout decides whether Fixed can be applied once it’s on the menu.

Jumping straight to the auto layout theory trades time for guesswork, because Overflow causes most failures long before auto layout gets a chance to.

Auto layout accounts for most of what’s left, and Figma’s auto layout guide explains why absolute position exists as the escape hatch for fixed layers stuck inside a stack.