Nested Auto Layout in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the main frame's layout direction to vertical.

Figma

mainFrame.layoutMode = '[1]'

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

AHORIZONTAL

BVERTICAL

Cgrid

Dstack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'horizontal' instead of 'VERTICAL' changes the direction.

Using unsupported values like 'grid' or 'stack'.

Setting layoutMode to VERTICAL arranges child elements from top to bottom.

2fill in blank

medium

Complete the code to set the spacing between items in the nested auto layout to 12 pixels.

Figma

nestedFrame.itemSpacing = [1]

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

A12

B16

C8

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Using a value too small or too large for the desired spacing.

Confusing itemSpacing with padding.

The itemSpacing property controls the space between child elements. Setting it to 12 adds 12 pixels of space.

3fill in blank

hard

Fix the error in the code to correctly set the padding of the nested frame to 16 pixels on all sides.

Figma

nestedFrame.padding[1] = 16

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

Atop

BTop

CPadding

DpaddingTop

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'top' like 'paddingtop' causes errors.

Using incorrect property names like 'Padding'.

In Figma plugin API, padding properties use camelCase like paddingTop, so paddingTop is correct. Repeat for paddingBottom, paddingLeft, paddingRight.

4fill in blank

hard

Fill both blanks to set the nested frame's layout direction to horizontal and align items to center.

Figma

nestedFrame.layoutMode = '[1]'
nestedFrame.primaryAxisAlignItems = '[2]'

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

AHORIZONTAL

BVERTICAL

CCENTER

DMIN

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing VERTICAL layout with horizontal alignment.

Using 'MIN' instead of 'CENTER' for alignment.

Setting layoutMode to HORIZONTAL arranges items left to right. primaryAxisAlignItems set to CENTER centers items along the main axis.

5fill in blank

hard

Fill all three blanks to create a nested auto layout with vertical direction, 24 pixels spacing, and padding of 16 pixels on all sides.

Figma

nestedFrame.layoutMode = '[1]'
nestedFrame.itemSpacing = [2]
nestedFrame.padding[3] = 16

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

AVERTICAL

B24

CTop

DHORIZONTAL

Attempts:

3 left

💡 Hint

Common Mistakes

Using HORIZONTAL instead of VERTICAL for layoutMode.

Confusing padding property names (use capital T) or missing padding on other sides.

Set layoutMode to VERTICAL for top-to-bottom layout, itemSpacing to 24 for spacing, and paddingTop to 16 for top padding (repeat for other sides similarly).