Resizing rules (hug, fill, fixed) in Figma - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the 'Hug' resizing rule do in Figma?

The 'Hug' resizing rule makes a frame or component automatically adjust its size to fit its content snugly, like wrapping a gift tightly.

beginner

Explain the 'Fill' resizing rule in Figma.

The 'Fill' resizing rule stretches or shrinks an object to fill the available space of its parent container, similar to how a window curtain covers the entire window.

beginner

What happens when you set a frame's resizing rule to 'Fixed'?

With 'Fixed', the frame or object keeps its set width and height no matter how the parent container changes, like a photo frame that stays the same size on a wall.

intermediate

How does 'Hug' resizing help in responsive design?

It allows components to grow or shrink based on their content size, making layouts flexible and avoiding extra empty space.

intermediate

When would you prefer 'Fill' over 'Fixed' resizing?

Use 'Fill' when you want an element to adapt to the container size, like buttons stretching across a toolbar, and 'Fixed' when you want consistent size regardless of container changes.

Which resizing rule makes a frame size adjust exactly to its content?

A Fill

B Fixed

C Hug

D Stretch

The 'Hug' rule adjusts the frame size to fit its content tightly.

If you want a button to always fill the width of its parent container, which resizing rule should you use?

A Fill

B Hug

C Center

D Fixed

'Fill' makes the element stretch to fill the available space.

What does the 'Fixed' resizing rule do?

A Adjusts size to content

B Keeps size constant regardless of parent size

C Fills parent container

D Centers content

'Fixed' keeps the object's size constant no matter the parent container.

Which resizing rule is best for a text label that should grow with its text content?

A None

B Fill

C Fixed

D Hug

'Hug' lets the label grow or shrink based on text length.

What happens if you set a frame to 'Fill' but its parent container shrinks?

A Frame size shrinks to fill container

B Frame size grows larger

C Frame size stays the same

D Frame disappears

'Fill' causes the frame to shrink or grow to fill the parent container.

Describe the differences between 'Hug', 'Fill', and 'Fixed' resizing rules in Figma.

Think about how each rule affects size when content or container changes.

Explain a real-life example where you would use each resizing rule: Hug, Fill, and Fixed.

Relate resizing rules to everyday objects or situations.