Grid styles in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a grid layout with 12 columns in Figma.

Figma

frame.layoutMode = 'GRID'; frame.gridStyle = [1];

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

Arows4

Bcolumns8

Crows6

Dcolumns12

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a row-based grid style instead of columns.

Setting gridStyle to columns12 applies a 12-column grid layout.

2fill in blank

medium

Complete the code to set the grid gutter size to 16 pixels.

Figma

frame.gridGutterSize = [1];

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

A16

B8

C24

D32

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong gutter size value.

Setting gridGutterSize to 16 sets the space between columns to 16 pixels.

3fill in blank

hard

Fix the error in the code to apply a grid with 8 columns and 20px gutter.

Figma

frame.layoutMode = 'GRID'; frame.gridStyle = [1]; frame.gridGutterSize = 20;

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

Acolumns8

Bcolumns12

Crows8

Drows12

Attempts:

3 left

💡 Hint

Common Mistakes

Using a row grid style instead of columns.

The grid style must be columns8 to have 8 columns. The gutter size should be set separately.

4fill in blank

hard

Fill both blanks to create a grid with 10 columns and 24px gutter size.

Figma

frame.gridStyle = [1]; frame.gridGutterSize = [2];

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

Acolumns10

B24

C16

Dcolumns8

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up gutter size values or grid style names.

Use columns10 for 10 columns and set gutter size to 24 pixels.

5fill in blank

hard

Fill all three blanks to set a grid with 12 columns, 20px gutter, and 24px margin.

Figma

frame.gridStyle = [1]; frame.gridGutterSize = [2]; frame.gridMargin = [3];

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

Acolumns12

B20

C24

Dcolumns8

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing gutter and margin values.

Use columns12 for 12 columns, gutter size 20 pixels, and margin 24 pixels.