Constraints for responsive behavior in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fix the element's horizontal constraint to the left side.

Figma

element.constraints.horizontal = '[1]'

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

ARight

BCenter

CLeft

DScale

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'Right' will fix the element to the right side instead.

Using 'Center' will center the element horizontally, not fix it to the left.

Setting the horizontal constraint to 'Left' fixes the element to the left side of its container.

2fill in blank

medium

Complete the code to set the vertical constraint to keep the element fixed to the bottom.

Figma

element.constraints.vertical = '[1]'

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

ABottom

BTop

CCenter

DScale

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'Top' will fix the element to the top instead.

Using 'Center' will center the element vertically, not fix it to the bottom.

Setting the vertical constraint to 'Bottom' keeps the element fixed to the bottom edge of its container.

3fill in blank

hard

Fix the error in the code to make the element resize horizontally with its container.

Figma

element.constraints.horizontal = '[1]'

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

ARight

BCenter

CLeft

DScale

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'Left' or 'Right' fixes the element to one side without resizing.

Using 'Center' keeps the element centered but does not resize it.

Using 'Scale' for horizontal constraints makes the element resize proportionally with its container.

4fill in blank

hard

Fill both blanks to fix the element to the top-right corner responsively.

Figma

element.constraints.horizontal = '[1]'
element.constraints.vertical = '[2]'

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

ARight

BLeft

CTop

DBottom

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping 'Left' and 'Right' will fix the element to the wrong horizontal side.

Swapping 'Top' and 'Bottom' will fix the element to the wrong vertical side.

Setting horizontal to 'Right' and vertical to 'Top' fixes the element to the top-right corner.

5fill in blank

hard

Fill all three blanks to make the element fixed to the bottom-left corner and resize vertically.

Figma

element.constraints.horizontal = '[1]'
element.constraints.vertical = '[2]'
element.resize.vertical = '[3]'

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

ALeft

BBottom

CScale

DTop

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Top' instead of 'Bottom' fixes the element to the wrong vertical side.

Not setting vertical resize to 'Scale' prevents resizing.

Setting horizontal to 'Left', vertical to 'Bottom', and vertical resize to 'Scale' fixes the element to bottom-left and allows vertical resizing.