Responsive grid systems in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a 12-column grid in Figma.

Figma

grid = {"type": "[1]", "count": 12, "gutter": 16}

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

Acolumns

Brows

Clayers

Dframes

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rows' instead of 'columns' for a vertical grid.

Confusing 'layers' or 'frames' with grid types.

In Figma, a responsive grid is usually defined using columns. Here, setting "type" to "columns" creates a 12-column grid.

2fill in blank

medium

Complete the code to set the gutter width between columns to 24 pixels.

Figma

grid_settings = {"type": "columns", "count": 12, "gutter": [1]

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

A16

B12

C32

D24

Attempts:

3 left

💡 Hint

Common Mistakes

Setting gutter to 12 which is too narrow for typical designs.

Confusing gutter with margin or padding.

The gutter is the space between columns. Setting it to 24 pixels increases spacing for better readability.

3fill in blank

hard

Fix the error in the code to correctly apply a margin of 20 pixels on both sides of the grid.

Figma

grid_settings = {"type": "columns", "count": 12, "gutter": 24, "[1]": 20}

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

Apadding

Boffset

Cspacing

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'margin' or 'padding' which are CSS terms but not Figma grid properties.

Using 'spacing' which is not a valid property here.

In Figma grids, 'offset' defines the margin space on the sides of the grid. Using 'offset' with 20 pixels applies the margin correctly.

4fill in blank

hard

Fill both blanks to create a responsive grid that switches from 12 columns on desktop to 4 columns on mobile.

Figma

responsive_grid = {"desktop": {"type": "[1]", "count": 12}, "mobile": {"type": "[2]", "count": 4}}

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

Acolumns

Brows

Cframes

Dlayers

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rows' for mobile grid which is incorrect for column-based layouts.

Mixing grid types between desktop and mobile.

Both desktop and mobile grids use columns, but with different counts to adapt layout responsively.

5fill in blank

hard

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

Figma

grid_config = {"type": "[1]", "count": [2], "gutter": [3], "offset": 24}

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

Acolumns

B12

C20

Drows

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rows' instead of 'columns' for grid type.

Confusing gutter and offset values.

This configuration sets a 12-column grid with 20 pixels gutter and 24 pixels offset margin for balanced spacing.