Resizing rules (hug, fill, fixed) in Figma - Cell-by-Cell Formula Trace

Sample Data

This data shows three UI elements with their parent container width, their original width, the resizing rule applied, and the resulting width after applying the rule.

Cell	Value
A1	Element
B1	Parent Width
C1	Element Width
D1	Resizing Rule
E1	Resulting Width
A2	Button
B2	300
C2	100
D2	Fixed
E2
A3	Text Box
B3	300
C3	150
D3	Hug
E3
A4	Image
B4	300
C4	200
D4	Fill
E4

Formula Trace

IF(D2="Fixed", C2, IF(D2="Hug", C2, IF(D2="Fill", B2, C2)))

Step 1: D2 = "Fixed"

Step 2: IF(TRUE, C2, ...)

Step 3: D3 = "Hug"

Step 4: IF(TRUE, C3, ...)

Step 5: D4 = "Fill"

Step 6: IF(TRUE, B4, ...)

Cell Reference Map

    A       B       C       D       E
1 |Element|Parent W|Elem W |Rule   |Result
2 |Button |  300   |  100  |Fixed  |  ?  
3 |Text Box|  300   |  150  |Hug    |  ?  
4 |Image  |  300   |  200  |Fill   |  ?  

Cells B2, C2, D2 are used to calculate the resulting width for the Button. Similarly, B3, C3, D3 for Text Box, and B4, C4, D4 for Image.

Result

    A       B       C       D       E
1 |Element|Parent W|Elem W |Rule   |Result
2 |Button |  300   |  100  |Fixed  | 100 
3 |Text Box|  300   |  150  |Hug    | 150 
4 |Image  |  300   |  200  |Fill   | 300 

The resulting widths show that Fixed keeps the original width, Hug keeps the element's own width, and Fill stretches the element to the parent's width.

Sheet Trace Quiz - 3 Questions

What width does the Button have after applying the Fixed resizing rule?

A 100

B 300

C 150

D 200

Key Result

IF resizing rule is Fixed, keep element width; if Hug, keep element width; if Fill, use parent width.