Why Auto Layout creates responsive designs in Figma - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the main axis direction in Auto Layout.

Figma

frame.layoutMode = '[1]'

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

AVERTICAL

BSTACK

CHORIZONTAL

DGRID

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'VERTICAL' when horizontal layout is needed.

Setting layoutMode to HORIZONTAL arranges child elements side by side, which is essential for responsive horizontal layouts.

2fill in blank

medium

Complete the code to make the frame resize based on its contents.

Figma

frame.primaryAxisSizingMode = '[1]'

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

AAUTO

BSTATIC

CMANUAL

DFIXED

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'FIXED' which keeps size constant.

Setting primaryAxisSizingMode to AUTO allows the frame to resize automatically based on its child elements, enabling responsiveness.

3fill in blank

hard

Fix the error in setting padding for Auto Layout frame.

Figma

frame.padding[1] = 16

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

ATop

BMargin

CPadding

DLeft

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Margin' which is outside spacing.

To set padding on the left side, use paddingLeft. The code uses paddingLeft property correctly.

4fill in blank

hard

Fill both blanks to set spacing and alignment in Auto Layout.

Figma

frame.itemSpacing = [1]
frame.counterAxisAlignItems = '[2]'

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

A12

BCENTER

CSTART

D24

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing spacing with alignment values.

Setting itemSpacing to 12 adds space between items. Setting counterAxisAlignItems to CENTER aligns items centrally on the cross axis.

5fill in blank

hard

Fill all three blanks to create a responsive Auto Layout frame with padding, spacing, and vertical direction.

Figma

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

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

AVERTICAL

B16

C8

DHORIZONTAL

Attempts:

3 left

💡 Hint

Common Mistakes

Using horizontal layout when vertical is needed.

Setting layoutMode to VERTICAL stacks items top to bottom. Padding top of 16 adds space inside the top edge. Item spacing of 8 adds space between items vertically.