Resizing rules (hug, fill, fixed) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a frame's width to automatically adjust to its content size.

Figma

frame.resize({ width: '[1]' })

Drag options to blanks, or click blank then click option'

Aauto

Bfill

Chug

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'fixed' which sets a constant size.

Choosing 'fill' which stretches to fill the parent.

Using hug makes the frame width adjust to fit its content.

2fill in blank

medium

Complete the code to make a child element stretch to fill its parent's width.

Figma

child.resize({ width: '[1]' })

Drag options to blanks, or click blank then click option'

Afill

Bhug

Cfixed

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'hug' which sizes to content.

Choosing 'fixed' which sets a fixed size.

Using fill makes the child stretch to fill the parent's width.

3fill in blank

hard

Fix the error in the code to set a frame's height to a fixed value of 100 pixels.

Figma

frame.resize({ height: [1] })

Drag options to blanks, or click blank then click option'

A'100px'

B"100"

Cfixed

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like '100px' which causes errors.

Using the word 'fixed' instead of a number.

The height value should be a number without quotes to set fixed pixels.

4fill in blank

hard

Fill both blanks to set a frame's width to hug content and height to fixed 200 pixels.

Figma

frame.resize({ width: '[1]', height: [2] })

Drag options to blanks, or click blank then click option'

Ahug

Bfill

C200

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fill' for width which stretches instead of hugging.

Using 'fixed' string instead of a number for height.

Width uses 'hug' to fit content, height uses number 200 for fixed pixels.

5fill in blank

hard

Fill all three blanks to set a child element's width to fill, height to hug, and minimum width fixed at 150.

Figma

child.resize({ width: '[1]', height: '[2]', minWidth: [3] })

Drag options to blanks, or click blank then click option'

Ahug

Bfill

C150

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'hug' and 'fill' for width and height.

Using string 'fixed' instead of number for minWidth.

Width is 'fill' to stretch, height is 'hug' to fit content, minWidth is fixed number 150 pixels.