Fixed elements in prototypes in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working on a sales dashboard prototype for your company's BI team.

📋 Request: Your manager wants you to create a prototype where the top navigation bar and the left side menu stay visible when users scroll through the dashboard data.

📊 Data: You have a dashboard prototype with multiple pages showing sales data tables and charts. The prototype includes a top navigation bar, a left side menu, and a main content area with scrollable data.

🎯 Deliverable: Create a Figma prototype where the top navigation bar and left side menu are fixed in place during scrolling, so users can always access navigation controls.

Sample Data

Element	Position	Scrollable
Top Navigation Bar	Top	No (should be fixed)
Left Side Menu	Left	No (should be fixed)
Main Content Area	Center	Yes (scrollable)

1

Step 1: Select the top navigation bar frame in your Figma prototype.

In the right sidebar under 'Constraints', set the vertical constraint to 'Top' and check 'Fix position when scrolling'.

Expected Result

The top navigation bar stays visible at the top when scrolling the main content.

2

Step 2: Select the left side menu frame in your Figma prototype.

In the right sidebar under 'Constraints', set the horizontal constraint to 'Left' and check 'Fix position when scrolling'.

Expected Result

The left side menu stays visible on the left side when scrolling the main content.

3

Step 3: Ensure the main content area frame is scrollable.

Select the main content frame and in the right sidebar under 'Overflow behavior', set vertical scrolling to 'Vertical scrolling'.

Expected Result

The main content area scrolls vertically while the fixed elements remain visible.

4

Step 4: Preview the prototype to test scrolling behavior.

Click the 'Present' button and scroll the main content area.

Expected Result

The top navigation bar and left side menu remain fixed and visible while the main content scrolls.

Final Result

┌───────────────────────────────────────────────┐
│ Top Navigation Bar (Fixed)                     │
├───────────────┬───────────────────────────────┤
│ Left Side Menu│ Main Content Area (Scrollable) │
│ (Fixed)       │                               │
│               │                               │
│               │                               │
│               │                               │
│               │                               │
└───────────────┴───────────────────────────────┘

✓Fixed elements improve navigation by keeping controls visible.

✓Users can scroll through data without losing access to menus.

✓Figma's 'Fix position when scrolling' feature is essential for prototype realism.

Bonus Challenge

Add a fixed footer bar that shows summary metrics and remains visible during scrolling.

Show Hint

Use the same 'Fix position when scrolling' option on the footer frame and set its vertical constraint to 'Bottom'.

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