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.