Direction (horizontal, vertical) in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the frame direction to horizontal in Figma.

Figma

frame.layoutMode = '[1]'

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

AVERTICAL

Binline

CHORIZONTAL

Dstack

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'VERTICAL' instead of 'HORIZONTAL' will stack items top to bottom.

Using 'inline' or 'stack' are not valid values for layoutMode.

Setting layoutMode to HORIZONTAL arranges child elements side by side.

2fill in blank

medium

Complete the code to set the frame direction to vertical in Figma.

Figma

frame.layoutMode = '[1]'

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

AHORIZONTAL

Bstack

Cinline

DVERTICAL

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'HORIZONTAL' will arrange items side by side instead of stacked.

Using 'inline' or 'stack' are not valid values for layoutMode.

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

3fill in blank

hard

Fix the error in the code to correctly set the frame direction to vertical.

Figma

frame.layoutMode = [1]

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

A'VERTICAL'

BVERTICAL

CHORIZONTAL

D'HORIZONTAL'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the string value.

Using the wrong string value like 'HORIZONTAL'.

The value for layoutMode must be a string, so it needs quotes around 'VERTICAL'.

4fill in blank

hard

Fill both blanks to set the frame direction to horizontal and enable item spacing.

Figma

frame.layoutMode = [1];
frame.itemSpacing = [2];

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

A'HORIZONTAL'

B10

C'VERTICAL'

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'VERTICAL' direction instead of 'HORIZONTAL'.

Setting spacing to zero or forgetting to use quotes for strings.

Set layoutMode to 'HORIZONTAL' (string) and itemSpacing to 10 pixels.

5fill in blank

hard

Fill all three blanks to set the frame direction to vertical, enable item spacing, and set padding to 20.

Figma

frame.layoutMode = [1];
frame.itemSpacing = [2];
frame.paddingTop = [3];

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

A'HORIZONTAL'

B15

C'VERTICAL'

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'HORIZONTAL' and 'VERTICAL' strings.

Using incorrect numeric values or forgetting quotes for strings.

Set layoutMode to 'VERTICAL', itemSpacing to 15, and paddingTop to 20 pixels.