Alignment within Auto Layout in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the horizontal alignment of items in an Auto Layout frame.

Figma

frame.layoutAlign = '[1]'

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

ATOP

BCENTER

CRIGHT

DLEFT

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'TOP' which aligns vertically, not horizontally.

Using 'CENTER' when left alignment is needed.

Setting layoutAlign to LEFT aligns items horizontally to the left inside the Auto Layout frame.

2fill in blank

medium

Complete the code to set vertical alignment of items in an Auto Layout frame.

Figma

frame.layoutAlignVertical = '[1]'

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

AMIDDLE

BCENTER

CTOP

DBOTTOM

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'MIDDLE' which is not a valid value.

Using 'TOP' or 'BOTTOM' when vertical centering is needed.

Setting layoutAlignVertical to CENTER aligns items vertically centered inside the Auto Layout frame.

3fill in blank

hard

Fix the error in setting the alignment property for Auto Layout items.

Figma

frame.primaryAxisAlignItems = '[1]'

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

Astart

Bcenter

CSPACE_BETWEEN

DEND

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase values like 'start' or 'center' which are invalid.

Using 'END' which aligns items to the end but does not space them.

The correct value for distributing items with space between them is SPACE_BETWEEN. Other values are case sensitive or invalid.

4fill in blank

hard

Fill both blanks to set horizontal and vertical alignment inside an Auto Layout frame.

Figma

frame.layoutAlign = '[1]'
frame.layoutAlignVertical = '[2]'

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

ACENTER

BLEFT

CTOP

DBOTTOM

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up horizontal and vertical alignment values.

Using 'BOTTOM' instead of 'TOP' for vertical alignment.

Setting layoutAlign to LEFT aligns items horizontally left, and layoutAlignVertical to TOP aligns items vertically at the top.

5fill in blank

hard

Fill all three blanks to set primary axis alignment, counter axis alignment, and spacing mode in Auto Layout.

Figma

frame.primaryAxisAlignItems = '[1]'
frame.counterAxisAlignItems = '[2]'
frame.primaryAxisSizingMode = '[3]'

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

AMIN

BCENTER

CMAX

DSPACE_BETWEEN

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'MAX' for sizing mode which makes frame fill available space.

Using 'CENTER' for primary axis alignment which centers but does not space evenly.

primaryAxisAlignItems set to SPACE_BETWEEN spaces items evenly along the main axis. counterAxisAlignItems set to CENTER centers items on the cross axis. primaryAxisSizingMode set to MIN makes the frame size to fit its content.