Absolute positioning within Auto Layout in Figma - Dashboard Guide

Dashboard Mode - Absolute positioning within Auto Layout

Dashboard Goal

Understand how to use absolute positioning inside Auto Layout frames in Figma to create flexible, well-structured dashboards with overlapping or fixed-position elements.

Sample Data

Month	Sales	Profit
January	100	30
February	150	50
March	200	70
April	180	60
May	220	80

Dashboard Components

• KPI Card: Displays Total Sales with formula SUM(Sales) = 850
• Bar Chart: Shows monthly Sales bars from January to May
• Profit Overlay Box: A small box positioned absolutely inside the Auto Layout frame showing Total Profit SUM(Profit) = 290, overlapping top-right corner
• Sales Table: Lists Month, Sales, and Profit in a simple table

Absolute Positioning Detail: The Profit Overlay Box uses absolute positioning inside the Auto Layout frame so it stays fixed at the top-right corner regardless of other content resizing.

Dashboard Layout

+--------------------------------------------------+
| +----------------+  +--------------------------+ |
| | KPI Card       |  | Bar Chart                | |
| | (Total Sales)  |  |                          | |
| +----------------+  +--------------------------+ |
|                                                  |
| +----------------------------------------------+ |
| | Sales Table                                  | |
| +----------------------------------------------+ |
|                                                  |
|                    +----------------+            |
|                    | Profit Overlay |            |
|                    | (Total Profit)  |            |
|                    +----------------+            |
+--------------------------------------------------+

The Profit Overlay box is absolutely positioned inside the Auto Layout container, overlapping the top right area visually but not affecting layout flow.

Interactivity

Adding a filter for Month updates the Bar Chart and Sales Table to show only selected months. The KPI Card and Profit Overlay recalculate totals dynamically based on filtered data. The absolute positioning ensures the Profit Overlay stays fixed visually regardless of content changes.

Self Check

If you add a filter to show only March and April, which components update their data display?

• Bar Chart updates to show only March and April sales bars.
• Sales Table shows only March and April rows.
• KPI Card recalculates Total Sales for March and April (200 + 180 = 380).
• Profit Overlay recalculates Total Profit for March and April (70 + 60 = 130).

The absolute positioning of the Profit Overlay box does not change; it remains fixed visually.

Key Result

Dashboard showing monthly sales and profit with an absolutely positioned profit overlay inside an Auto Layout frame in Figma.