Auto Layout Fundamentals

# CHAPTER 10

Auto Layout Fundamentals #

1. Introduction #

If you draw a blue rectangle in Figma and place the word "Submit" inside it, you have a button. However, if the client asks you to translate the app into German, "Submit" becomes "Einreichen". Suddenly, the text is physically longer than the blue rectangle, spilling over the edges. You have to manually click the blue rectangle, drag the edges wider, and manually re-center the text. Doing this for 500 buttons across an app is torturous. A button should be intelligent. It should automatically grow wider to accommodate longer text, perfectly maintaining its internal padding, exactly like a real website does in code. In Figma, this intelligence is called Auto Layout. In this chapter, we will master Figma's most powerful, game-changing feature. We will abandon static, rigid drawing and embrace dynamic, responsive design that perfectly mimics CSS Flexbox.

2. Learning Objectives #

By the end of this chapter, you will be able to:

• Define the architectural purpose of Figma's Auto Layout feature.

• Apply Auto Layout to combine text and shapes into dynamic components.

• Configure precise horizontal and vertical internal Padding within a frame.

• Control the spacing gap between multiple items inside an Auto Layout container.

• Understand the resizing rules: Hug Contents, Fill Container, and Fixed Width.

3. What is Auto Layout? #

Auto Layout is a property you can add to any Frame. It tells the Frame: *"Do not let the items inside you float randomly. You must lock them into a strict row or column, and you must dynamically resize yourself to fit them."* If you are familiar with frontend web development, Auto Layout is a visual representation of CSS Flexbox.

How to apply it:

1. 1. Select a text layer and an icon next to it.

1. 2. Press Shift + A (The absolute most important keyboard shortcut in Figma).

1. 3. Figma instantly wraps them in a new Frame and applies Auto Layout. They snap into perfect alignment!

4. The Auto Layout Panel #

Once you press Shift + A, look at the Right Properties panel. A new Auto Layout section appears. Here, you dictate the mathematical rules for the container:

• Direction: An arrow pointing Right (Row) aligns items horizontally. An arrow pointing Down (Column) stacks items vertically.

• Spacing Between Items: The exact pixel gap between the icon and the text (e.g., 8px).

• Padding: The breathing room around the inside edges of the container. You can set the Horizontal padding (Left/Right) and Vertical padding (Top/Bottom) independently.

5. Resizing Rules (The Secret to Responsive UI) #

This is the hardest concept for beginners, but the most important. How does the container react when the screen size changes? Select an item inside an Auto Layout frame. Look at the Frame section in the Right panel. You will see resizing dropdowns for Width and Height:

1. 1. Fixed Width/Height: The object ignores the contents. It stays exactly 200px wide, no matter what. (Rigid).

1. 2. Hug Contents: The container acts like shrink-wrap. If you type more text, the container dynamically grows wider to "hug" the new text perfectly. (Used for Buttons).

1. 3. Fill Container: The object acts like a fluid liquid. It expands to take up 100% of the available empty space inside its parent container. (Used for fluid text paragraphs or full-width search bars).

6. Why Auto Layout is Mandatory #

Before Auto Layout, if you had a vertical list of 5 emails in a UI mockup, and you wanted to delete the 3rd email, you had to manually drag emails 4 and 5 up to fill the empty gap. With an Auto Layout Column, if you delete the 3rd email, emails 4 and 5 *automatically snap upward* to fill the gap instantly, because the container strictly enforces the 16px spacing rule!

7. Diagrams/Visual Suggestions #

*Visual Concept: Hug vs. Fill* Draw a large gray box (The Parent Container). Inside it, draw two buttons side-by-side.

• Button A (Hug Contents): The button is small, wrapping tightly around the word "Cancel".

• Button B (Fill Container): The button stretches massively across the rest of the empty space in the gray box, containing the word "Save Changes".

This visual instantly clarifies the relationship between an object shrink-wrapping itself versus an object expanding to fill a void.

8. Best Practices #

• Auto Layout Everything: Professional Figma files almost never use static frames. Every button, every card, every navigation bar, and the entire main screen itself should be an Auto Layout container nested inside another Auto Layout container. If you build it correctly, you can drag the edge of your Desktop design, and watch the entire page instantly squish and rearrange itself into a Mobile layout!

9. Common Mistakes #

• Drawing Background Rectangles: Beginners want to make a button, so they draw a blue Rectangle, type Text, and group them. This is the old way. *The Auto Layout Way:* You do not draw a rectangle! You type Text, press Shift + A, and then you add a Blue Fill *directly to the Auto Layout Frame itself*. The Frame acts as the background and dynamically resizes. Drawing a separate background rectangle breaks Auto Layout logic.

10. Mini Project: Build an Intelligent Button #

Let's build a button that resizes itself magically.

1. 1. Press T and type "Submit".

1. 2. With the text selected, press Shift + A. (It is now an Auto Layout frame!).

1. 3. Look at the Right panel. Find Fill and add a Blue color. Find Corner Radius and set it to 8.

1. 4. Go to the Auto Layout panel.

1. 5. Set Horizontal Padding (Left/Right) to 24. Set Vertical Padding (Top/Bottom) to 12.

1. 6. Now, double-click the text "Submit" and type "Submit Application Now".

1. 7. *Watch the magic:* The blue background automatically expands to fit the new text, perfectly maintaining the 24px/12px padding!

11. Practice Exercises #

1. 1. Type a paragraph of text. Press Shift + A to wrap it in an Auto Layout frame. Add a white fill, a drop shadow, and 24px of padding on all sides. You have instantly created a dynamic UI Card!

1. 2. Create three squares. Select all three and press Shift + A. Experiment with changing the Layout Direction from Horizontal (Row) to Vertical (Column).

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the concept of Figma's Auto Layout to a Frontend Web Developer. Which specific CSS layout module does Auto Layout attempt to visually replicate, and how does this make the "Developer Handoff" process significantly smoother?

• Q: Walk me through the mechanical difference between the "Hug Contents" and "Fill Container" resizing rules. Provide a practical UI component example where you would explicitly use "Fill Container."

• Q: A junior designer builds a UI card by drawing a white rectangle, placing a photo inside it, typing text, and pressing Ctrl + G to Group them. Why is this considered an archaic, non-responsive workflow, and how would you instruct them to build the card using Auto Layout instead?

14. FAQs #

Q: Can I put an Auto Layout frame inside another Auto Layout frame? A: Yes, and you absolutely must! Complex UI design is just Auto Layouts nested like Russian dolls. For example: A horizontal Auto Layout (Icon + Text) is nested inside a vertical Auto Layout (Title + Paragraph), which is nested inside a massive vertical Auto Layout (The entire webpage).

15. Summary #

In Chapter 10, we breathed intelligence into our static designs. We abandoned the rigid, fragile practice of drawing background rectangles, replacing them with the dynamic, container-driven logic of Auto Layout. We established mathematical rules for internal padding and spacing gaps, mirroring the behavior of CSS Flexbox. We mastered the critical resizing commands—forcing elements to "Hug" their contents like shrink-wrap, or expanding like liquid to "Fill" their parent containers. By embracing Auto Layout, we have engineered UI components that are responsive, flexible, and ready to adapt to the unpredictable nature of real-world content.

16. Next Chapter Recommendation #

Our individual components are now responsive, but what about the entire screen? How do we make a massive desktop website shrink down to fit on an iPhone? Proceed to Chapter 11: Responsive Web Design in Figma.