Resizing rules (hug, fill, fixed) in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the 'Hug' Resizing Rule

In Figma, when you set a frame's width to 'Hug contents', what happens when you add more elements inside the frame?

A The frame width automatically adjusts to fit the total width of its contents.

B The frame width stays fixed and does not change regardless of content size.

C The frame width stretches to fill the parent container's width.

D The frame width shrinks to zero and hides the contents.

💡 Hint

Think about a box that wraps tightly around its items.

The 'Hug contents' resizing rule makes the frame size itself exactly to fit its children. So when you add more elements, the frame grows or shrinks accordingly.

🧠 Conceptual

intermediate

Behavior of the 'Fill' Resizing Rule

What does the 'Fill container' resizing rule do to a frame's width inside a parent frame?

A It hides the frame and its contents.

B It fixes the frame width to a specific pixel value regardless of the parent size.

C It shrinks the frame width to fit only the content inside it.

D It sets the frame width to match the width of its parent container, adjusting dynamically.

💡 Hint

Imagine a box that stretches to fill the space it is given.

The 'Fill container' rule makes the frame expand or contract to fill the entire width of its parent frame, adapting if the parent changes size.

🎯 Scenario

advanced

Choosing Resizing Rules for Responsive Design

You are designing a button inside a frame that should always be 200 pixels wide, regardless of the parent frame size or content inside. Which resizing rule should you apply to the button's width?

A Set width to 'Hug contents' so it adjusts to the text inside.

B Set width to 'Fill container' so it stretches with the parent frame.

C Set width to 'Fixed' with 200 pixels to keep it constant.

D Set width to 'Fill container' and add padding to control size.

💡 Hint

Think about keeping the size constant no matter what.

Using 'Fixed' width locks the button size to 200 pixels, ignoring parent size or content changes, which is perfect for consistent button sizing.

🔧 Formula Fix

advanced

Why Does the Frame Not Resize as Expected?

You set a frame's width to 'Fill container' inside a parent frame, but the frame width does not change when you resize the parent. What is the most likely reason?

A The parent frame is set to 'Hug contents', so it cannot resize.

B The frame has a fixed width set, which overrides 'Fill container'.

C The frame is set to 'Hug contents' instead of 'Fill container'.

D The frame is locked and cannot be resized.

💡 Hint

Check if any fixed size is blocking dynamic resizing.

If a frame has a fixed width, it will not respond to 'Fill container' resizing because the fixed size takes priority.

❓ visualization

expert

Predict the Frame Width After Resizing

Consider a parent frame 500 pixels wide containing a child frame set to 'Fill container' width with 20 pixels padding on each side. What will be the child frame's width?

A 460 pixels

B 500 pixels

C 540 pixels

D 480 pixels

💡 Hint

Subtract the padding from the parent's width.

The child frame fills the parent's width minus the left and right padding (20 + 20 = 40), so 500 - 40 = 460 pixels.

Practice

1. Which resizing rule in Figma makes a frame adjust its size exactly to fit its content?

easy

A. Fixed size

B. Fill container

C. Auto layout

D. Hug contents

Solution

1. Step 1: Understand resizing rules

   Hug contents means the frame changes size to fit the content inside exactly.

2. Step 2: Compare with other rules

   Fill stretches to fill the container, Fixed keeps size constant, Auto layout arranges items but does not define resizing rule itself.

3. Final Answer:

   Hug contents -> Option D

4. Quick Check:

   Hug contents = fits content exactly [OK]

Hint: Hug means frame hugs content tightly [OK]

Common Mistakes:

• Confusing Fill with Hug
• Thinking Fixed resizes with content
• Mixing Auto layout with resizing rules

2. Which of the following is the correct way to set a frame's resizing rule to fill its parent container in Figma?

easy

A. Set resizing to Fill container

B. Set resizing to Fixed size

C. Set resizing to Hug contents

D. Set resizing to Auto layout

Solution

1. Step 1: Identify the fill resizing rule

   Fill container means the frame stretches to fill the available space of its parent container.

2. Step 2: Confirm correct option

   Only Set resizing to Fill container correctly names this resizing rule as Fill container.

3. Final Answer:

   Set resizing to Fill container -> Option A

4. Quick Check:

   Fill container = stretches to parent [OK]

Hint: Fill means stretch to parent container [OK]

Common Mistakes:

• Choosing Fixed size instead of Fill
• Confusing Hug with Fill
• Using Auto layout as resizing rule

3. Consider a frame with a fixed width of 200px inside a parent frame of 400px width. If the child frame's horizontal resizing is set to Fill, what will be its width when the parent frame resizes to 600px?

medium

A. 200px

B. 600px

C. 400px

D. It will stay fixed at 200px

Solution

1. Step 1: Understand Fill resizing behavior

   Fill resizing makes the child frame stretch to fill the parent's width.

2. Step 2: Calculate new width

   When parent resizes to 600px, child frame with Fill will also resize to 600px width.

3. Final Answer:

   600px -> Option B

4. Quick Check:

   Fill resizing stretches child to parent's width [OK]

Hint: Fill means child matches parent size [OK]

Common Mistakes:

• Assuming fixed width stays constant
• Choosing original 200px width
• Confusing Fill with Hug

4. You set a frame's resizing to Fixed size, but when you resize the parent frame, the child frame also resizes unexpectedly. What is the most likely cause?

medium

A. The child frame has Hug contents resizing

B. The parent frame has Auto layout enabled

C. The child frame's resizing is actually set to Fill, not Fixed

D. The child frame is locked

Solution

1. Step 1: Analyze resizing behavior

   If child resizes with parent, it is likely set to Fill, not Fixed.

2. Step 2: Check settings

   Verify child's resizing rule; if set to Fill, it will stretch with parent.

3. Final Answer:

   The child frame's resizing is actually set to Fill, not Fixed -> Option C

4. Quick Check:

   Fixed resizing means no size change [OK]

Hint: Check child's resizing rule if size changes unexpectedly [OK]

Common Mistakes:

• Blaming Auto layout instead of resizing rule
• Assuming locked frames resize
• Confusing Hug with Fixed

5. You want a button inside a resizable panel to always fit its text content width but also stretch vertically to fill the panel height. Which resizing rules should you apply to the button's width and height respectively?

hard

A. Width: Hug contents, Height: Fill container

B. Width: Fill container, Height: Hug contents

C. Width: Fixed size, Height: Fixed size

D. Width: Fill container, Height: Fixed size

Solution

1. Step 1: Determine width resizing

   To fit text exactly, width should be Hug contents.

2. Step 2: Determine height resizing

   To stretch vertically to fill panel, height should be Fill container.

3. Final Answer:

   Width: Hug contents, Height: Fill container -> Option A

4. Quick Check:

   Hug width fits text, Fill height stretches vertically [OK]

Hint: Hug width fits content, Fill height stretches to parent [OK]

Common Mistakes:

• Using Fixed size for width or height
• Swapping Hug and Fill rules
• Setting both dimensions to Fill