Constraints for responsive behavior in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a sales dashboard in Figma.

📋 Request: Your manager wants the dashboard to look good and work well on different screen sizes, like desktops, tablets, and phones.

📊 Data: You have a dashboard design with charts, filters, and summary cards arranged in a frame sized for desktop screens.

🎯 Deliverable: Create a responsive dashboard in Figma by applying constraints to each element so they adjust properly when the frame size changes.

Sample Data

Element	Type	Initial Position (X, Y)	Width	Height	Parent Frame Width
Sales Chart	Chart	(20, 20)	600	300	800
Region Filter	Dropdown	(640, 20)	140	40	800
Summary Card 1	Card	(20, 340)	180	120	800
Summary Card 2	Card	(220, 340)	180	120	800
Summary Card 3	Card	(420, 340)	180	120	800

1

Step 1: Select the Sales Chart element and set its horizontal constraint to 'Left and Right' and vertical constraint to 'Top'.

In Figma, with Sales Chart selected, set Constraints: Horizontal = Left and Right, Vertical = Top.

Expected Result

Sales Chart width adjusts when frame width changes, staying pinned to top.

2

Step 2: Select the Region Filter dropdown and set its horizontal constraint to 'Right' and vertical constraint to 'Top'.

In Figma, with Region Filter selected, set Constraints: Horizontal = Right, Vertical = Top.

Expected Result

Region Filter stays pinned to the right edge and top when frame resizes.

3

Step 3: Select all Summary Cards and set their horizontal constraints to 'Left' and vertical constraints to 'Top'.

In Figma, select Summary Card 1, 2, and 3, set Constraints: Horizontal = Left, Vertical = Top.

Expected Result

Summary Cards keep their positions relative to the top-left corner when frame resizes.

4

Step 4: Resize the parent frame width from 800 to 600 pixels to test responsiveness.

Change frame width property from 800 to 600 pixels.

Expected Result

Sales Chart width shrinks to fit new frame width minus margins; Region Filter moves left to stay at right edge; Summary Cards keep their positions.

5

Step 5: Resize the parent frame width from 800 to 1000 pixels to test responsiveness.

Change frame width property from 800 to 1000 pixels.

Expected Result

Sales Chart width expands to fill wider frame; Region Filter moves right to stay pinned; Summary Cards remain fixed.

Final Result

Dashboard Frame (Width: variable)
+------------------------------------------------------------+
| Sales Chart (Left & Right, Top)                            |
| +--------------------------------------------------------+ |
| |                                                        | |
| +--------------------------------------------------------+ |
| Region Filter (Right, Top)                                |
|                                                        +--+|
| Summary Card 1 (Left, Top)  Summary Card 2  Summary Card 3 |
| +------------+  +------------+  +------------+            |
| |            |  |            |  |            |            |
| +------------+  +------------+  +------------+            |
+------------------------------------------------------------+

Bonus Challenge

Add vertical responsiveness by setting vertical constraints on summary cards so they move down when the frame height increases.

Show Hint

Try setting vertical constraints of summary cards to 'Top and Bottom' or 'Bottom' and resize the frame height to see the effect.