Fixed elements in prototypes in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does 'fixed elements' mean in Figma prototypes?

Fixed elements are parts of your design that stay visible in the same place when you scroll through a prototype. For example, a top menu bar that stays at the top while you scroll down.

beginner

How do you make an element fixed in a Figma prototype?

Select the element, then in the Prototype tab, check the 'Fix position when scrolling' option. This locks the element's position on the screen during scrolling.

beginner

Why use fixed elements in a prototype?

Fixed elements improve user experience by keeping important controls or information visible, like navigation bars or buttons, so users don’t have to scroll back up.

intermediate

Can fixed elements overlap other content in Figma prototypes?

Yes, fixed elements stay on top of scrolling content. You should design carefully to avoid hiding important information behind fixed elements.

intermediate

What happens if you fix an element inside a frame that scrolls?

The element stays fixed relative to the frame’s viewport, meaning it stays visible while scrolling inside that frame but not outside it.

In Figma, how do you keep a header visible while scrolling in a prototype?

A Check 'Fix position when scrolling' for the header

B Group the header with other elements

C Use a separate frame for the header

D Convert the header to a component

Checking 'Fix position when scrolling' locks the header in place during scrolling.

What is a common use for fixed elements in prototypes?

A To keep navigation visible

B To change colors

C To hide content

D To create animations

Fixed elements often keep navigation or controls visible for easy access.

If a fixed element overlaps content, what should you do?

A Ignore it

B Make the element transparent

C Delete the fixed element

D Adjust the layout to avoid overlap

Adjusting layout ensures important content is not hidden behind fixed elements.

Where does a fixed element stay when placed inside a scrolling frame?

A Fixed relative to the whole page

B Fixed relative to the frame’s viewport

C Moves with the frame content

D Disappears when scrolling

Fixed elements inside a frame stay visible relative to that frame’s viewport during scrolling.

Which tab in Figma lets you fix an element’s position during prototype scrolling?

A Inspect tab

B Design tab

C Prototype tab

D Assets tab

The Prototype tab contains the option to fix position when scrolling.

Explain how fixed elements improve user experience in Figma prototypes.

Think about what happens when you scroll a webpage with a fixed menu.

Describe the steps to fix an element’s position in a Figma prototype.

Look for the option in the prototype settings panel.

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