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.