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.

Practice

1. What is the main purpose of adding Auto Layout to frames in Figma?

easy

A. To change the color of all items inside a frame

B. To automatically arrange and space items inside a frame

C. To convert frames into images

D. To lock the position of items inside a frame

Solution

1. Step 1: Understand Auto Layout function

   Auto Layout arranges items automatically inside frames, managing spacing and alignment.

2. Step 2: Compare options

   Only To automatically arrange and space items inside a frame describes automatic arrangement and spacing, which matches Auto Layout's purpose.

3. Final Answer:

   To automatically arrange and space items inside a frame -> Option B

4. Quick Check:

   Auto Layout = automatic arrangement [OK]

Hint: Auto Layout means automatic arrangement inside frames [OK]

Common Mistakes:

• Confusing Auto Layout with color or image changes
• Thinking Auto Layout locks items instead of arranging them

2. Which of the following is the correct way to add Auto Layout to a frame in Figma?

easy

A. Right-click the frame and select 'Add Auto Layout'

B. Double-click the frame and press Ctrl+C

C. Select the frame and press Delete

D. Drag the frame outside the canvas

Solution

1. Step 1: Identify how to add Auto Layout

   In Figma, you add Auto Layout by right-clicking a frame and choosing 'Add Auto Layout'.

2. Step 2: Eliminate incorrect options

   Copying, deleting, or dragging frames does not add Auto Layout.

3. Final Answer:

   Right-click the frame and select 'Add Auto Layout' -> Option A

4. Quick Check:

   Add Auto Layout = right-click + select option [OK]

Hint: Right-click frame, choose 'Add Auto Layout' to apply [OK]

Common Mistakes:

• Trying to add Auto Layout by copying or deleting
• Assuming double-click adds Auto Layout

3. Given a frame with three buttons arranged horizontally without Auto Layout, what happens after you add Auto Layout with horizontal direction and 10px spacing?

medium

A. Buttons stay in place but spacing changes to 10px automatically

B. Buttons stack vertically with 10px spacing

C. Buttons overlap each other

D. Buttons disappear from the frame

Solution

1. Step 1: Understand Auto Layout horizontal direction

   Adding Auto Layout with horizontal direction arranges items side by side with specified spacing.

2. Step 2: Apply 10px spacing effect

   The buttons remain horizontal but spacing between them becomes 10px automatically.

3. Final Answer:

   Buttons stay in place but spacing changes to 10px automatically -> Option A

4. Quick Check:

   Horizontal Auto Layout = horizontal arrangement + spacing [OK]

Hint: Horizontal Auto Layout arranges items side by side with spacing [OK]

Common Mistakes:

• Thinking buttons stack vertically instead of horizontally
• Assuming buttons overlap or disappear

4. You added Auto Layout to a frame but the items inside do not space evenly. What is the most likely cause?

medium

A. The items are grouped, not inside the frame

B. The frame is locked

C. Auto Layout was added twice

D. The spacing value is set to zero or too small

Solution

1. Step 1: Check spacing settings in Auto Layout

   If spacing is zero or very small, items will appear too close or unevenly spaced.

2. Step 2: Consider other options

   Locking frames or grouping items does not affect Auto Layout spacing directly; adding Auto Layout twice is not possible.

3. Final Answer:

   The spacing value is set to zero or too small -> Option D

4. Quick Check:

   Spacing controls item gaps in Auto Layout [OK]

Hint: Check spacing value if items are too close [OK]

Common Mistakes:

• Confusing frame lock with spacing issues
• Thinking grouping breaks Auto Layout spacing
• Assuming Auto Layout can be added twice

5. You want a vertical list of menu items inside a frame that automatically adjusts spacing and resizes when items are added or removed. Which Auto Layout settings should you use?

hard

A. Horizontal direction with fixed spacing and frame resizing set to 'Fixed size'

B. Vertical direction with zero spacing and frame resizing set to 'Fixed size'

C. Vertical direction with fixed spacing and frame resizing set to 'Hug contents'

D. Horizontal direction with zero spacing and frame resizing set to 'Hug contents'

Solution

1. Step 1: Choose vertical direction for list

   A vertical list requires Auto Layout direction set to vertical to stack items top to bottom.

2. Step 2: Set spacing and resizing

   Fixed spacing keeps consistent gaps; 'Hug contents' resizing lets frame adjust size as items change.

3. Final Answer:

   Vertical direction with fixed spacing and frame resizing set to 'Hug contents' -> Option C

4. Quick Check:

   Vertical + fixed spacing + hug contents = dynamic vertical list [OK]

Hint: Use vertical + fixed spacing + hug contents for dynamic lists [OK]

Common Mistakes:

• Choosing horizontal direction for vertical lists
• Using zero spacing causing items to touch
• Setting frame resizing to fixed size prevents auto resizing