Fixed elements in prototypes in Figma - Deep Dive

Overview - Fixed elements in prototypes

What is it?

Fixed elements in prototypes are parts of a design that stay visible and in the same place while the rest of the screen scrolls. They are often used for headers, footers, or navigation bars. This helps users keep important controls or information always accessible. In Figma, you can set elements to be fixed during prototype playback.

Why it matters

Without fixed elements, users might lose track of navigation or key information when scrolling through content. Fixed elements improve usability by keeping essential parts visible, making the prototype feel more like a real app or website. This leads to better feedback and clearer communication with stakeholders.

Where it fits

Before learning fixed elements, you should understand basic prototyping and frames in Figma. After mastering fixed elements, you can explore advanced interactions like overlays and scroll effects to create richer prototypes.

Mental Model

Core Idea

Fixed elements stay in place on the screen while other content moves, ensuring constant visibility.

Think of it like...

It's like a sticky note on a page that stays put even when you flip through the pages underneath.

┌─────────────────────────────┐
│        Fixed Header          │  ← stays visible
├─────────────────────────────┤
│                             │
│       Scrollable Content     │  ← moves up/down
│                             │
└─────────────────────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding Prototypes in Figma

Concept: Learn what prototypes are and how they simulate user flows.

Prototypes in Figma let you link frames and create interactive flows. They show how users move through screens by clicking or scrolling. This helps test design ideas before building the real product.

Result

You can create simple clickable prototypes that simulate navigation.

Knowing prototypes lets you test and communicate design ideas early, saving time and effort.

2

Foundation

Frames and Scrolling Basics

Concept: Understand frames as containers and how scrolling works inside them.

Frames hold your design elements. You can set frames to have fixed sizes with scrollable content inside. Scrolling means the content moves up or down within the frame, like a window showing part of a bigger picture.

Result

You can create scrollable areas in your design to mimic long pages or lists.

Grasping frames and scrolling is key to knowing where fixed elements fit in.

3

Intermediate

Setting Fixed Position Elements

🤔Before reading on: do you think fixed elements move with scrolling or stay put? Commit to your answer.

Concept: Learn how to fix elements so they stay visible during scrolling.

In prototype mode, select an element and enable 'Fix position when scrolling'. This locks the element's position on the screen. Common fixed elements include headers and footers that remain visible as users scroll content behind them.

Result

The fixed element stays visible while the rest of the frame scrolls underneath.

Understanding fixed position lets you create realistic navigation and persistent info areas.

4

Intermediate

Combining Fixed Elements with Scrollable Content

🤔Before reading on: can multiple fixed elements exist in one frame? Predict yes or no.

Concept: Explore how fixed elements and scrollable content coexist in one frame.

You can have several fixed elements in a frame, like a header and a footer. The scrollable content moves between them. This setup mimics real apps where navigation bars stay put and content scrolls.

Result

A prototype with fixed header and footer, and scrollable content in the middle.

Knowing how fixed and scrollable parts combine helps design realistic user experiences.

5

Advanced

Limitations and Performance Considerations

🤔Before reading on: do fixed elements affect prototype performance? Guess yes or no.

Concept: Understand the limits and impact of fixed elements on prototype behavior.

Too many fixed elements or complex designs can slow prototype playback. Fixed elements only work within their frame boundaries and may not behave as expected if frames are nested or resized. Knowing these limits helps avoid confusing bugs.

Result

Better prototype performance and fewer unexpected behaviors by using fixed elements wisely.

Recognizing fixed element limits prevents wasted time troubleshooting prototype glitches.

6

Expert

Advanced Use: Fixed Elements with Overlays and Interactions

🤔Before reading on: can fixed elements appear above overlays? Predict yes or no.

Concept: Learn how fixed elements interact with overlays and complex interactions.

Fixed elements stay visible during scrolling but overlays can cover them depending on layering. You can combine fixed elements with interactive overlays for menus or dialogs. Managing z-order and interaction flow is key to smooth prototypes.

Result

Prototypes with fixed navigation and interactive overlays that behave realistically.

Mastering layering and interaction with fixed elements unlocks professional-quality prototypes.

Under the Hood

Figma prototypes simulate fixed elements by keeping their screen position constant during scroll events. When you enable 'Fix position when scrolling', Figma renders that element outside the scrollable content layer, anchoring it to the viewport. This separation ensures the element does not move as the user scrolls the frame's content.

Why designed this way?

This design mimics real app behavior where headers or footers remain visible. It avoids complex re-rendering of the entire frame on scroll, improving performance. Alternatives like duplicating elements on every scroll position would be inefficient and confusing.

┌─────────────────────────────┐
│ Fixed Element (anchored)    │
├─────────────────────────────┤
│ Scrollable Content (moves)  │
│                             │
│                             │
└─────────────────────────────┘

Fixed element is rendered separately and stays put,
while scrollable content moves underneath.

Myth Busters - 4 Common Misconceptions

Quick: Does fixing an element mean it will always be on top of everything else? Commit yes or no.

Common Belief: Fixed elements always appear above all other content and overlays.

Reality: Fixed elements stay visible during scrolling but can be covered by overlays or elements with higher z-index.

Why it matters: Assuming fixed means always on top can cause design errors where important overlays are hidden or fixed elements block interactions.

Quick: Can fixed elements be used outside of frames? Commit yes or no.

Common Belief: You can fix elements anywhere on the canvas, even outside frames.

Reality: Fixed elements only work inside frames with scrolling enabled; outside frames, fixing has no effect.

Why it matters: Trying to fix elements outside frames leads to confusion and wasted effort when prototypes don't behave as expected.

Quick: Does fixing an element automatically make it interactive? Commit yes or no.

Common Belief: Fixed elements are always interactive and respond to clicks or taps by default.

Reality: Fixed position only controls visibility during scroll; interactivity depends on added prototype links or actions.

Why it matters: Confusing fixed position with interactivity can cause prototypes to feel broken or unresponsive.

Quick: Do fixed elements increase prototype file size significantly? Commit yes or no.

Common Belief: Fixed elements add a lot of weight and slow down prototypes drastically.

Reality: Fixed elements have minimal impact on file size but can affect playback performance if overused or combined with complex effects.

Why it matters: Overestimating fixed elements' cost may lead to avoiding useful design patterns unnecessarily.

Expert Zone

1

Fixed elements do not scroll but their clipping depends on the parent frame's overflow settings, which can cause unexpected hiding.

2

When using nested frames, fixed elements behave relative to the nearest scrollable frame, not the entire page.

3

Combining fixed elements with smart animate can cause visual glitches if positions change between frames.

When NOT to use

Avoid fixed elements when the design requires full-page scrolling without persistent navigation. Instead, use overlays or sticky positioning in code. Also, avoid fixing too many elements as it can clutter the interface and confuse users.

Production Patterns

In real projects, fixed headers with navigation links and fixed footers with action buttons are common. Designers use fixed elements to simulate mobile app bars or web page sticky menus. Combining fixed elements with overlays for modals or dropdowns is a frequent pattern to mimic real app behavior.

Connections

Sticky Positioning in CSS

Fixed elements in Figma prototype mimic sticky or fixed CSS positioning on web pages.

Understanding CSS sticky positioning helps grasp how fixed elements behave during scrolling in prototypes.

User Interface Design Principles

Fixed elements support usability principles like persistent navigation and visibility of system status.

Knowing UI principles explains why fixed elements improve user experience by keeping key controls accessible.

Augmented Reality Heads-Up Displays (HUDs)

Fixed elements in prototypes are like HUDs in AR that keep important info visible regardless of user movement.

Recognizing this connection shows how fixed positioning is a universal design pattern for constant information access.

Common Pitfalls

#1 Fixed element disappears when scrolling.

Wrong approach:

Not enabling 'Fix position when scrolling' checkbox on the element in prototype settings.

Correct approach:

Select the element and check 'Fix position when scrolling' to keep it visible during scroll.

Root cause:

Confusing fixed position with static placement; forgetting to enable the specific prototype option.

#2 Fixed element blocks interaction with scrollable content behind it.

Wrong approach:

Placing a large fixed element over scrollable area without adjusting size or transparency.

Correct approach:

Design fixed elements with appropriate size and layering to avoid covering interactive content.

Root cause:

Not considering user interaction flow and layering when adding fixed elements.

#3 Fixed element behaves unexpectedly inside nested frames.

Wrong approach:

Fixing an element inside a nested frame without understanding scroll boundaries.

Correct approach:

Ensure fixed elements are inside the correct scrollable frame and test scrolling behavior carefully.

Root cause:

Misunderstanding how nested frames affect fixed element anchoring.

Key Takeaways

Fixed elements keep important parts of a prototype visible while other content scrolls, improving usability.

In Figma, enabling 'Fix position when scrolling' anchors elements to the viewport during prototype playback.

Fixed elements only work inside scrollable frames and can coexist with scrollable content for realistic designs.

Understanding layering and frame boundaries is essential to avoid unexpected behavior with fixed elements.

Expert use combines fixed elements with overlays and interactions to create professional, interactive prototypes.