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.

Practice

1. What is the main purpose of using constraints in Figma when designing frames?

easy

A. To export designs as images

B. To add colors and styles to elements

C. To control how elements move and resize inside frames

D. To create new frames automatically

Solution

1. Step 1: Understand the role of constraints

   Constraints define how elements behave when their parent frame changes size.

2. Step 2: Identify the correct purpose

   They help elements move or resize responsively inside frames.

3. Final Answer:

   To control how elements move and resize inside frames -> Option C

4. Quick Check:

   Constraints control element resizing = D [OK]

Hint: Constraints control element resizing [OK]

Common Mistakes:

• Thinking constraints add colors or styles
• Confusing constraints with exporting features
• Believing constraints create frames automatically

2. Which of the following is the correct way to set constraints for an element to stay fixed to the top and left edges of its frame in Figma?

easy

A. Set constraints to Top and Left

B. Set constraints to Bottom and Right

C. Set constraints to Center and Middle

D. Set constraints to Scale

Solution

1. Step 1: Identify fixed position constraints

   To keep an element fixed to the top-left, you must constrain it to Top and Left edges.

2. Step 2: Match constraints to behavior

   Top and Left constraints keep the element anchored to those edges when resizing.

3. Final Answer:

   Set constraints to Top and Left -> Option A

4. Quick Check:

   Top and Left constraints fix position = A [OK]

Hint: Top and Left constraints fix element position [OK]

Common Mistakes:

• Choosing Bottom and Right for top-left fixed position
• Using Center and Middle which centers element
• Using Scale which resizes element proportionally

3. If an element inside a frame has constraints set to Left and Right, what happens when the frame width increases?

medium

A. The element stays the same size and moves right

B. The element disappears

C. The element stays fixed to the left edge only

D. The element stretches horizontally to fill the new width

Solution

1. Step 1: Understand Left and Right constraints

   When both Left and Right constraints are set, the element resizes horizontally with the frame.

2. Step 2: Predict behavior on frame resize

   Increasing frame width stretches the element to maintain distance from both edges.

3. Final Answer:

   The element stretches horizontally to fill the new width -> Option D

4. Quick Check:

   Left and Right constraints cause horizontal stretch = B [OK]

Hint: Left and Right constraints stretch element width [OK]

Common Mistakes:

• Thinking element moves without resizing
• Assuming element stays fixed only to left
• Believing element disappears on resize

4. You set an element's constraints to Top and Bottom inside a frame, but when you resize the frame vertically, the element does not stretch. What is the likely mistake?

medium

A. The element's constraints are set to Left and Right instead

B. The element is set to fixed height instead of auto height

C. The frame is locked and cannot resize

D. The element is outside the frame

Solution

1. Step 1: Check constraints vs element size

   Top and Bottom constraints should stretch element vertically, but fixed height prevents resizing.

2. Step 2: Identify the cause

   If element height is fixed, it won't stretch despite constraints.

3. Final Answer:

   The element is set to fixed height instead of auto height -> Option B

4. Quick Check:

   Fixed height blocks vertical stretch = A [OK]

Hint: Ensure element height is auto for vertical stretch [OK]

Common Mistakes:

• Confusing constraints with frame lock
• Mistaking Left and Right constraints for vertical behavior
• Ignoring element position inside frame

5. You want a button inside a frame to always stay centered horizontally and fixed 20px from the bottom edge, regardless of frame resizing. Which constraints should you set?

hard

A. Center horizontally and Bottom

B. Left and Bottom

C. Right and Bottom

D. Center horizontally and Top

Solution

1. Step 1: Understand horizontal centering

   To keep the button centered horizontally, set the horizontal constraint to Center.

2. Step 2: Fix vertical position 20px from bottom

   Set vertical constraint to Bottom to keep fixed distance from bottom edge.

3. Final Answer:

   Center horizontally and Bottom -> Option A

4. Quick Check:

   Center + Bottom constraints fix horizontal center and bottom distance = C [OK]

Hint: Use Center horizontally + Bottom for fixed bottom center [OK]

Common Mistakes:

• Using Left or Right instead of Center for horizontal position
• Setting Top instead of Bottom for vertical constraint
• Not combining horizontal and vertical constraints properly