Resizing rules (hug, fill, fixed) in Figma - Real Business Scenario

Scenario Mode

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

📋 Request: Your manager wants you to create a responsive dashboard layout that adjusts well on different screen sizes using Figma's resizing rules: hug, fill, and fixed.

📊 Data: You have a dashboard frame with several components: a title text box, a filter dropdown, a chart area, and a summary card. Each component needs proper resizing behavior to maintain usability and appearance on various screen widths.

🎯 Deliverable: A Figma file with the dashboard frame and components set up using hug, fill, and fixed resizing rules correctly, plus a short explanation of how each resizing rule affects the components.

Sample Data

Component	Type	Initial Width (px)	Initial Height (px)	Resizing Rule
Dashboard Frame	Frame	1200	800	Fixed
Title Text	Text	Auto	40	Hug
Filter Dropdown	Component	200	40	Fixed
Chart Area	Frame	800	600	Fill
Summary Card	Frame	300	200	Fixed

1

Step 1: Set the dashboard frame size to fixed width 1200px and height 800px to keep the overall layout stable.

Select the dashboard frame > Resize > Set width=1200px, height=800px > Resizing rule = Fixed

Expected Result

Dashboard frame remains 1200x800 px regardless of screen size changes.

2

Step 2: Set the title text box to hug its content width so it adjusts automatically when text changes.

Select title text > Resize > Width = Hug contents, Height = Fixed at 40px

Expected Result

Title text width changes dynamically based on text length, height stays 40px.

3

Step 3: Set the filter dropdown component to fixed size so it does not resize with the frame.

Select filter dropdown > Resize > Width=200px, Height=40px > Resizing rule = Fixed

Expected Result

Filter dropdown remains 200x40 px regardless of frame resizing.

4

Step 4: Set the chart area frame to fill the remaining horizontal space inside the dashboard frame.

Select chart area frame > Resize > Width = Fill container, Height = Fixed at 600px

Expected Result

Chart area width expands or shrinks as dashboard frame width changes, height stays 600px.

5

Step 5: Set the summary card frame to fixed size to keep consistent appearance.

Select summary card frame > Resize > Width=300px, Height=200px > Resizing rule = Fixed

Expected Result

Summary card remains 300x200 px regardless of frame resizing.

6

Step 6: Test resizing the dashboard frame width from 1200px down to 800px and observe component behavior.

Resize dashboard frame width to 800px manually in Figma

Expected Result

Title text width adjusts to content, chart area width shrinks to fill space, filter dropdown and summary card remain fixed size.

Final Result

Dashboard Frame (1200x800)
+------------------------------------------------------------+
| Title Text (Hug)           Filter Dropdown (Fixed 200x40)   |
|                                                            |
| Chart Area (Fill width x 600)          Summary Card (300x200)|
|                                                            |
+------------------------------------------------------------+

✓Hug resizing makes text boxes adjust width to their content, useful for dynamic labels.

✓Fixed resizing keeps components stable in size, good for buttons and cards.

✓Fill resizing allows components like charts to expand or shrink with the container, improving responsiveness.

Bonus Challenge

Create a vertical sidebar menu using resizing rules so that menu items hug their content vertically but fill horizontally to the sidebar width.

Show Hint

Use hug for height on menu items and fill for width inside a fixed width sidebar frame.