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.

Practice

1. What does enabling Fix position when scrolling do in a Figma prototype?

easy

A. Keeps the selected element visible while scrolling the frame

B. Locks the element so it cannot be moved in design mode

C. Makes the element invisible during prototype playback

D. Duplicates the element on every page automatically

Solution

1. Step 1: Understand the fixed position feature

   Enabling 'Fix position when scrolling' means the element stays visible even when you scroll the frame in prototype mode.

2. Step 2: Compare with other options

   Locking elements or duplicating them are unrelated to this feature. Making invisible is opposite of fixed visibility.

3. Final Answer:

   Keeps the selected element visible while scrolling the frame -> Option A

4. Quick Check:

   Fixed elements stay visible while scrolling = A [OK]

Hint: Fixed means visible during scroll, not locked or hidden [OK]

Common Mistakes:

• Confusing fixed with locked elements
• Thinking fixed hides the element
• Assuming fixed duplicates the element

2. Which of the following is the correct way to enable a fixed element in Figma prototype settings?

easy

A. Right-click the element and choose 'Lock position' in the Design panel

B. Select the element and check 'Fix position when scrolling' in the Prototype panel

C. Drag the element outside the frame to fix it

D. Use the Layers panel to rename the element to 'Fixed'

Solution

1. Step 1: Locate the Prototype panel

   In Figma, fixed position is enabled by selecting the element and checking 'Fix position when scrolling' in the Prototype panel.

2. Step 2: Eliminate incorrect methods

   Locking position is different and done in Design panel. Dragging outside frame or renaming does not fix position.

3. Final Answer:

   Select the element and check 'Fix position when scrolling' in the Prototype panel -> Option B

4. Quick Check:

   Enable fixed via Prototype panel checkbox = A [OK]

Hint: Fixed position is set only in Prototype panel, not Design panel [OK]

Common Mistakes:

• Confusing lock with fix position
• Trying to fix by renaming or dragging
• Looking in wrong panel for the option

3. Consider a prototype with a header frame set to fixed position. What will happen when you scroll the content below the header?

medium

A. The header scrolls away with the content

B. The header duplicates and appears twice

C. The header disappears until you scroll back up

D. The header stays visible at the top while content scrolls

Solution

1. Step 1: Understand fixed header behavior

   A fixed header stays visible at the top of the frame while the rest of the content scrolls underneath it.

2. Step 2: Analyze other options

   If the header scrolled away or disappeared, it wouldn't be fixed. Duplication does not happen with fixed elements.

3. Final Answer:

   The header stays visible at the top while content scrolls -> Option D

4. Quick Check:

   Fixed header visible during scroll = D [OK]

Hint: Fixed header stays put; content moves underneath [OK]

Common Mistakes:

• Thinking fixed elements scroll away
• Assuming fixed elements hide on scroll
• Believing fixed elements duplicate automatically

4. You enabled 'Fix position when scrolling' on a button inside a scrolling frame, but the button still scrolls away. What is the most likely cause?

medium

A. The frame itself is not set to scroll in prototype settings

B. The button is not inside the scrolling frame

C. The button is locked in the Design panel

D. The button layer is hidden

Solution

1. Step 1: Check scrolling settings of the frame

   For fixed elements to work, the frame must have scrolling enabled in prototype settings.

2. Step 2: Understand why button still scrolls

   If the frame does not scroll, fixed position has no effect, so the button scrolls away with content.

3. Final Answer:

   The frame itself is not set to scroll in prototype settings -> Option A

4. Quick Check:

   Fixed needs scrolling frame enabled = B [OK]

Hint: Fixed elements need scrolling enabled on frame [OK]

Common Mistakes:

• Assuming button lock affects scrolling
• Thinking hidden layers cause scrolling
• Not checking frame scroll settings

5. You want a footer button to stay visible at the bottom of the screen while users scroll through a long list in your prototype. How should you set this up in Figma?

hard

A. Place the button inside the scrolling frame and enable 'Fix position when scrolling'

B. Place the button inside the scrolling frame without fixing position

C. Place the button outside the scrolling frame and enable 'Fix position when scrolling'

D. Place the button outside the scrolling frame without fixing position

Solution

1. Step 1: Understand fixed element placement

   Fixed elements must be outside the scrolling frame to stay visible while content scrolls.

2. Step 2: Enable fixed position

   After placing outside, enable 'Fix position when scrolling' so the button stays visible at bottom.

3. Step 3: Why inside frame won't work

   If inside the scrolling frame, the button will scroll away even if fixed is enabled.

4. Final Answer:

   Place the button outside the scrolling frame and enable 'Fix position when scrolling' -> Option C

5. Quick Check:

   Fixed footer outside scroll frame = C [OK]

Hint: Fixed footer must be outside scroll frame with fix enabled [OK]

Common Mistakes:

• Placing fixed elements inside scroll frame
• Not enabling fix position checkbox
• Assuming fixed works without correct placement