Constraints for responsive behavior in Figma - Dashboard Guide

Dashboard Mode - Constraints for responsive behavior

Goal

Understand how to use constraints in Figma to make BI dashboard elements adjust smoothly on different screen sizes.

Sample Data

Region	Sales	Profit	Month
North	1000	200	Jan
South	1500	300	Jan
East	1200	250	Jan
West	1300	270	Jan
North	1100	220	Feb
South	1600	320	Feb
East	1250	260	Feb
West	1350	280	Feb

Dashboard Components

• KPI Card - Total Sales: Shows sum of Sales. Formula: SUM(Sales) = 10200
• KPI Card - Total Profit: Shows sum of Profit. Formula: SUM(Profit) = 2090
• Bar Chart - Sales by Region: Displays sales grouped by Region for selected Month.
• Line Chart - Sales Trend: Shows sales over months for all regions combined.
• Filter - Month Selector: Dropdown to select Jan or Feb, updates charts and KPIs.

Figma Constraints Setup

• KPI Cards: Set horizontal constraints to Left and Right so cards stretch horizontally on wider screens.
• Bar Chart: Set constraints to Left, Right, and Top to resize width and stay pinned to top.
• Line Chart: Set constraints to Left, Right, and Bottom to resize width and stay pinned to bottom.
• Filter Dropdown: Set constraints to Right and Top so it stays in top-right corner on resize.

Dashboard Layout (ASCII Art)

+--------------------------------------------------+
| KPI Card 1 (Total Sales)    | KPI Card 2 (Profit) |
| [Left & Right constraints]  | [Left & Right]      |
+--------------------------------------------------+
| Bar Chart (Sales by Region)                      |
| [Left, Right, Top constraints]                   |
|                                                  |
|                                                  |
+--------------------------------------------------+
| Line Chart (Sales Trend)                         |
| [Left, Right, Bottom constraints]                |
+--------------------------------------------------+
| Filter Dropdown (Month Selector) [Right, Top]    |
+--------------------------------------------------+

Interactivity

The Month Selector filter updates the KPI cards and both charts to show data only for the selected month. When the user picks "Jan" or "Feb", the sales and profit numbers recalculate, and charts redraw accordingly.

Because of constraints, when the dashboard width changes, all components resize or reposition smoothly without overlap or cutoff.

Self Check

If you resize the dashboard frame narrower, which components will stretch horizontally and which will stay pinned?

• KPI Cards stretch horizontally because of Left & Right constraints.
• Bar and Line charts stretch horizontally but stay pinned vertically as per constraints.
• Filter Dropdown stays pinned to top-right corner and does not stretch.

Key Result

A responsive BI dashboard in Figma showing sales KPIs and charts that adjust smoothly using constraints.