Fixed elements in prototypes in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fix the header during scrolling in a Figma prototype.

Figma

Select the header frame and enable [1] in the prototype settings.

Drag options to blanks, or click blank then click option'

AFix position when scrolling

BAuto layout

COverlay

DScroll to

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'Auto layout' instead of fixing position

Using 'Overlay' which is for popups

Enabling Fix position when scrolling keeps the header visible as you scroll.

2fill in blank

medium

Complete the step to fix a sidebar in a Figma prototype.

Figma

In prototype mode, select the sidebar frame and check [1] to keep it visible on scroll.

Drag options to blanks, or click blank then click option'

AFix position when scrolling

BSwap with

CScroll to

DNavigate to

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting 'Scroll to' which moves viewport

Choosing 'Navigate to' which changes screens

The Fix position when scrolling option keeps the sidebar visible as you scroll the page.

3fill in blank

hard

Fix the error in this prototype setup to keep the footer fixed.

Figma

Footer frame is selected but [1] is not enabled, so it scrolls away.

Drag options to blanks, or click blank then click option'

AAuto layout

BScroll to

CFix position when scrolling

DOverlay

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Overlay' which is for popups

Forgetting to enable fixed position

Without Fix position when scrolling, the footer will move with the page scroll.

4fill in blank

hard

Fill both blanks to fix header and sidebar in a Figma prototype.

Figma

Select the header and sidebar frames, then enable [1] and [2] respectively to keep them fixed.

Drag options to blanks, or click blank then click option'

AFix position when scrolling

BAuto layout

DOverlay

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Auto layout' which arranges elements

Choosing 'Overlay' which is for popups

Both header and sidebar need Fix position when scrolling enabled to stay visible during scroll.

5fill in blank

hard

Fill all three blanks to fix header, sidebar, and footer in a Figma prototype.

Figma

Enable [1] for header, [2] for sidebar, and [3] for footer to keep them fixed during scroll.

Drag options to blanks, or click blank then click option'

AFix position when scrolling

BAuto layout

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing 'Auto layout' which is for layout, not fixing

Using different options for each element

All three elements require Fix position when scrolling to stay visible while scrolling.

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