In our last lesson, you mastered creating a consistent visual identity with Color and Text Styles, establishing a "single source of truth" for your designs. This gave your layouts a professional, unified feel—but they were still static.
Today, we're going to make your designs dynamic. This lesson introduces Auto Layout, arguably one of Figma's most powerful features. It allows you to create frames and components that automatically grow, shrink, and reflow as their content changes. Think of it as the design equivalent of a dynamic financial spreadsheet: when you change a key input (like the text in a button), the entire model updates perfectly without you manually resizing every cell. For a freelancer, mastering Auto Layout is a direct route to building flexible, low-maintenance designs for your clients.
By the end of this lesson, you will be able to construct flexible, responsive layouts using the full range of Auto Layout properties, moving from simple buttons to complex, nested cards.
1. The Core Mechanics of Auto Layout
At its heart, Auto Layout adds a set of rules to a frame, dictating how the objects inside it should behave. It controls the direction, spacing, padding, and alignment of its children. Applying it is simple: select two or more objects and press Shift + A.
Let's watch a clear, concise introduction to these fundamental properties.
Figma Tutorial: Master Auto Layout in 30 Minutes | Auto Layout (+ Practice File)
This tutorial from DesignWithArash provides an excellent foundation for understanding Auto Layout from the ground up.
Watch from the beginning to the end of the basics. Focus on understanding these four core properties: Direction: Are the items arranged horizontally or vertically? Gap/Spacing: The space between items in the frame. Padding: The space inside the frame, around all the items. Alignment: How the items are positioned within the frame if there's extra space.
To summarize these core properties visually:
2. Resizing: The Key to Responsiveness
This is where the real power of Auto Layout lies. The resizing properties determine how a parent frame and its child elements respond to changes. There are three key behaviors to understand, and their interaction is critical.
A useful way to think about this is to ask, "Who's in charge of the size?" Is it the container or the content inside it?
| Resizing Property | Who's in Charge? | Description |
|---|---|---|
| Hug Contents | The Content | The frame resizes to "hug" the objects inside it, plus any padding. |
| Fixed | The Designer | The frame stays at a specific width or height that you manually define. |
| Fill Container | The Parent Frame | The object stretches to fill the available space within its parent Auto Layout frame. This is only available for child elements. |
The relationship between these settings is what creates responsive behavior. Let's watch a detailed breakdown.
Figma Tutorial: Master Auto Layout in 30 Minutes | Auto Layout (+ Practice File)
We'll continue with the DesignWithArash video, which does a great job explaining the nuances of resizing.
Watch the section on resizing options. Pay close attention to the difference between settings on the parent frame (Fixed vs. Hug) and the child items (Fixed vs. Fill). Notice how setting a child to Fill Container forces the parent to become Fixed.
To reinforce this crucial concept, here is a clear textual explanation.
Auto Layout in Figma - Design good practices
The article "Auto Layout in Figma" provides a great summary of resizing behaviors.
Read the section titled Resizing. The author provides clear examples for Hug contents, Fixed, and Fill container, which will help solidify your understanding.
3. Practical Application: From a Simple Button to a Complex Card
Theory is useful, but the "action-first" approach is where you'll build muscle memory. We'll now apply these concepts to build real UI elements.
Exercise 1: The Responsive Button
A button is the "Hello, World!" of Auto Layout. It's the simplest and most common use case. By adding Auto Layout directly to a text layer, you create a button that automatically resizes as you change the text.
Figma Tutorial: Master Auto Layout in 30 Minutes | Auto Layout (+ Practice File)
Let's see how this is done professionally.
Watch this short segment on creating a responsive button. The key takeaway is adding Auto Layout (Shift + A) to the text layer itself, rather than drawing a separate rectangle behind it. This ensures the padding is always perfect.
Exercise 2: Building a Complex, Nested Card
Simple layouts are easy, but real-world designs are more complex. How do you handle a card with a header, an image, multiple text elements, and buttons? The answer is nesting. You create Auto Layout frames inside other Auto Layout frames.
For example:
- You might have a
verticalAuto Layout for a title and subtitle. - This text group is then placed in a
horizontalAuto Layout with a user's avatar. - This entire header group is then placed in the main card's
verticalAuto Layout, along with an image and a description.
This is the most important part of today's lesson. We will now build a fully responsive card from scratch.
Figma Tutorial: Master Auto Layout in 30 Minutes | Auto Layout (+ Practice File)
This detailed walkthrough shows how to combine everything we've learned to build a sophisticated component.
Follow along with the step-by-step guide on creating a responsive card. Don't just watch; try to replicate the steps in your Figma practice file. Pay attention to: How elements are grouped and put into Auto Layout frames incrementally. The use of nested frames (e.g., a horizontal frame for tags inside the main vertical card frame). How Fill Container is used on child elements to make them responsive to the parent's width. The use of Space between distribution to push a button to the far right. The Wrap setting, which is perfect for creating flexible tag lists.
4. Advanced Controls: Fine-Tuning Your Layouts
There are a few more properties that give you complete control over your responsive designs.
- Min/Max Width & Height: You can set minimum or maximum dimensions to prevent a component from becoming too small or too large. This is essential for ensuring designs look good across all screen sizes. For example, you might set a
min-widthon a card so it doesn't get squished on a narrow screen. - Absolute Position: Sometimes, you need an element to break out of the Auto Layout flow. A classic example is a notification badge or a "close" icon in the corner of a modal. Absolute Position lets you place an element freely within an Auto Layout frame without affecting the position of other elements.
Let's watch a final clip that covers these two advanced features.
Figma Tutorial: Master Auto Layout in 30 Minutes | Auto Layout (+ Practice File)
This last part of the tutorial covers these powerful, specific-use-case features.
Watch the explanation of min/max width to understand how to constrain resizing. Then, watch the segment on absolute position to see how to place elements outside the normal flow.
Conclusion
You've just learned one of the most critical skills for modern UI design. Auto Layout is the engine that drives efficiency, consistency, and responsiveness in Figma. By moving beyond static arrangements, you can now build flexible designs that adapt intelligently to their content—a skill that is immensely valuable to clients.
Key Takeaways:
- Auto Layout Creates Rules: It defines the direction, spacing, padding, and alignment of elements within a frame. Use
Shift + A. - Resizing is Key: The interplay between
Hug Contents,Fixed, andFill Containerdetermines how layouts respond to change. - Nest for Complexity: Complex UIs are built by nesting simple Auto Layout frames within each other, each with its own rules.
- Control the Extremes: Use
Min/Maxdimensions to control resizing boundaries andAbsolute Positionfor elements that need to break the layout flow.
Preview of the Next Lesson:
We've now covered alignment, styles, and responsive layouts. The final piece of the foundational puzzle is reusability. In our next lesson, we will learn how to turn our flexible Auto Layout creations into Components. This will allow you to build a library of reusable UI elements (like buttons and cards) that you can use across your entire project, ensuring consistency and dramatically speeding up your workflow.