Adding Auto Layout to frames in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add auto layout to a frame in Figma.

Figma

frame.[1]({ direction: 'VERTICAL' })

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

AaddAutoLayout

BsetAutoLayout

CapplyLayout

DenableAutoLayout

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method that does not exist like 'setAutoLayout'.

Confusing 'applyLayout' with adding auto layout.

In Figma plugin API, addAutoLayout is the correct method to add auto layout to a frame.

2fill in blank

medium

Complete the code to set the spacing between items in an auto layout frame.

Figma

frame.layoutMode = 'HORIZONTAL'; frame.[1] = 16;

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

AitemSpacing

BspacingBetweenItems

Cpadding

Dgap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'gap' which is not a Figma frame property.

Using 'padding' which controls frame padding, not spacing between items.

The property itemSpacing sets the space between items in an auto layout frame in Figma.

3fill in blank

hard

Fix the error in setting the auto layout direction property.

Figma

frame.layoutMode = [1];

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

A'horizontal'

Bvertical

C'Vertical'

D'VERTICAL'

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted strings causing syntax errors.

Using capitalized strings which are invalid.

The layoutMode property requires a string value in uppercase, so it must be in quotes like 'VERTICAL'.

4fill in blank

hard

Fill both blanks to create a frame with auto layout and set padding.

Figma

const frame = figma.createFrame(); frame.[1]({ direction: 'HORIZONTAL' }); frame.[2] = 24;

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

AaddAutoLayout

BitemSpacing

CpaddingLeft

DsetPadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'setPadding' which is not a valid method.

Confusing 'itemSpacing' with padding.

Use addAutoLayout to add auto layout and paddingLeft to set left padding on the frame.

5fill in blank

hard

Fill all three blanks to create a vertical auto layout frame with spacing and padding.

Figma

const frame = figma.createFrame(); frame.[1]({ direction: 'VERTICAL' }); frame.[2] = 12; frame.[3] = 20;

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

AaddAutoLayout

BitemSpacing

CpaddingTop

DsetPadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'setPadding' which is not a valid property or method.

Mixing up spacing and padding properties.

First, add auto layout with addAutoLayout. Then set spacing with itemSpacing and top padding with paddingTop.