Adding Auto Layout to frames in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when you add Auto Layout to a frame in Figma?

Imagine you have a frame with several objects inside. You add Auto Layout to this frame. What is the main effect?

A The frame becomes locked and you cannot move or resize objects inside it.

B The frame deletes all objects inside and resets to default size.

C The frame converts into a component and all objects inside become uneditable.

D The objects inside the frame automatically arrange themselves based on direction and spacing settings.

💡 Hint

Think about how Auto Layout helps organize items inside a frame.

Adding Auto Layout makes the frame arrange its child objects automatically based on settings like direction (horizontal or vertical), spacing, and padding.

❓ visualization

intermediate

Identify the correct Auto Layout direction for a horizontal menu

You want to create a horizontal menu with buttons spaced evenly inside a frame using Auto Layout. Which Auto Layout direction should you choose?

A Horizontal

B Stacked

C Grid

D Vertical

💡 Hint

Menus usually list items side by side from left to right.

For a horizontal menu, the Auto Layout direction should be set to Horizontal so items arrange side by side.

❓ data_modeling

advanced

How does Auto Layout affect resizing behavior of frames?

When Auto Layout is applied to a frame, how does it control the resizing of the frame and its child objects?

A Child objects resize independently but the frame size remains static.

B The frame resizes automatically based on the size and spacing of child objects, and child objects can be set to fixed or fill container widths.

C The frame size becomes fixed and child objects cannot resize or move inside it.

D The frame and child objects both ignore resizing settings and keep their original sizes.

💡 Hint

Think about how Auto Layout helps frames adapt to content changes.

Auto Layout frames adjust their size based on child objects and spacing. Child objects can have fixed sizes or fill the available space.

🔧 Formula Fix

advanced

Why does the Auto Layout frame not resize as expected?

You added Auto Layout to a frame but when you resize the frame, the child objects do not adjust their size or position. What is the most likely cause?

A Child objects have fixed width and height set, preventing them from resizing with the frame.

B Auto Layout was applied to the wrong frame and not the one containing the child objects.

C The frame has no child objects inside it.

D The frame is locked and cannot be resized.

💡 Hint

Check the sizing properties of the child objects inside the frame.

If child objects have fixed sizes, they won't resize when the frame changes size. To allow resizing, set child objects to 'Fill container' width or height.

🎯 Scenario

expert

Creating a responsive card component with Auto Layout

You want to create a card component that automatically adjusts its height based on the text content inside it, using Auto Layout. Which setup will achieve this behavior?

A Set the frame to vertical Auto Layout, set text to fixed width and height, and set the frame height to fixed size.

B Set the frame to horizontal Auto Layout, set text width and height to fixed, and set the frame height to fill container.

C Set the frame to vertical Auto Layout, set text width to fixed and height to auto, and set the frame height to hug contents.

D Set the frame to vertical Auto Layout, set text width and height to fixed, and set the frame height to fill container.

💡 Hint

Think about how to make the frame height adapt to text content size.

Using vertical Auto Layout with text width fixed and height auto allows text to grow vertically. Setting frame height to hug contents makes the frame adjust height automatically.

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