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'.