Bird
Raised Fist0
Figmabi_tool~8 mins

Constraints for responsive behavior in Figma - Dashboard Guide

Choose your learning style10 modes available
LearnWhyDeepSheetTryChallengeScenarioRecallDash

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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
RegionSalesProfitMonth
North1000200Jan
South1500300Jan
East1200250Jan
West1300270Jan
North1100220Feb
South1600320Feb
East1250260Feb
West1350280Feb
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.

Practice

(1/5)
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