Fixed elements in prototypes in Figma - Dashboard Guide

Dashboard Mode - Fixed elements in prototypes

Goal

Understand how fixed elements in prototypes help keep important parts visible while scrolling, improving user experience in dashboards.

Sample Data

Month	Region	Sales
January	North	100
February	North	150
March	North	200
January	South	120
February	South	180
March	South	220

Dashboard Components

• Fixed Header Bar: Displays the dashboard title and navigation. Fixed position so it stays visible when scrolling.
• Fixed Filter Panel: Contains region and month filters. Fixed on the left side for easy access anytime.
• Sales Line Chart: Shows sales trends over months for selected region(s). Scrollable vertically if needed.
• Sales Data Table: Lists detailed sales numbers by month and region. Scrolls vertically under fixed header and filter panel.
• KPI Card: Shows total sales for selected filters. Positioned below header, scrolls horizontally with content.

Dashboard Layout (ASCII Art)

+--------------------------------------------------+
| Fixed Header Bar (Dashboard Title & Navigation)  |
+----------------+---------------------------------+
| Fixed Filter   | Sales Line Chart                |
| Panel (Left)  | (Scrollable vertically)          |
| (Fixed)       |                                 |
+----------------+---------------------------------+
|                Sales Data Table (Scrollable)     |
|                + KPI Card (Below Header, scrolls)|
+--------------------------------------------------+
    

Interactivity

The fixed filter panel lets users select Region and Month. When filters change:

• The Sales Line Chart updates to show filtered sales trends.
• The Sales Data Table refreshes to list only filtered rows.
• The KPI Card recalculates total sales for the filtered data.
• The fixed header and filter panel remain visible and unchanged during scrolling.

Self Check

Try this: Add a filter for Region = South. Which components update?

• The Sales Line Chart updates to show only South region sales.
• The Sales Data Table shows only South region rows.
• The KPI Card recalculates total sales for South region.
• The Fixed Header Bar and Fixed Filter Panel stay visible and unchanged.

Key Result

Dashboard prototype with fixed header and filter panel to keep navigation and filters visible while scrolling sales charts and data table.