Why Fixed elements in prototypes in Figma? - Purpose & Use Cases

The Big Idea

What if your prototype's menu could magically stay put without extra effort?

The Scenario

Imagine you are designing a website prototype and want the menu bar to stay visible while users scroll through the page. Without fixed elements, you have to create multiple copies of the menu on every screen or frame.

The Problem

This manual method is slow and frustrating. You waste time copying and aligning menus on each screen. If you want to change the menu, you must update every copy, risking mistakes and inconsistencies.

The Solution

Fixed elements in prototypes let you lock parts like menus or headers in place. They stay visible as users scroll, so you only design them once. This saves time and keeps your prototype consistent and realistic.

Before vs After

✗ Before

Copy menu to every frame
Update each menu separately

✓ After

Set menu as fixed element
Menu stays visible on scroll automatically

What It Enables

Fixed elements make your prototypes feel real and professional by keeping important parts visible without extra work.

Real Life Example

When testing a shopping app prototype, the fixed cart icon stays on screen as users browse products, making it easy to check out anytime.

Key Takeaways

Manually duplicating fixed parts wastes time and causes errors.

Fixed elements lock UI parts in place during scrolling.

This feature improves prototype realism and speeds up design.

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