Auto Layout in Figma: A Step-by-Step Guide for Designers

If you're a designer, then you’re likely already familiar with Figma. Popular for creating user interfaces and web designs, Figma is a design tool that's known for its collaborative features and seamless design-to-prototype workflow.

One of its most powerful capabilities is auto layout, a feature that enhances responsive design and streamlines UI/UX workflows. With auto layout, you can create flexible, adaptable layouts that automatically adjust based on content or screen size, which improves both efficiency and design consistency.

Ready to reap those benefits for yourself? We'll walk you through essential tips for using auto layout in Figma, from beginner-friendly basics to advanced techniques.

What is Auto Layout in Figma?

The Figma desktop app open on a computer. The user has created a sample webpage titled ‘Blog,’ and is mousing over a section titled ‘Auto layout’ in the right-hand menu. — In the Skillshare class “Responsive UX/UI Design in Figma: Auto Layout, Constraints and Breakpoints,” teacher Christine Vallaure demonstrates how Figma’s auto layout feature can be used to automatically arrange and space the elements of a webpage.

Figma auto layout is a feature that allows designers to create flexible and responsive designs by automatically resizing and aligning elements within a frame. The main purpose of auto layout is to ensure that a design's components dynamically adjust to changes, such as text length or screen size. It makes creating consistent and adaptable wireframes and prototypes a breeze, especially for responsive design systems.

Auto layout behaves similarly to how CSS Flexbox or Grid operates in web development—both make it easier for developers to create scalable, flexible and responsive designs.

The bottom line is that with auto layout, you can easily manage your design elements' alignment, spacing and distribution, typically in just a few clicks.

Step-by-Step Guide to Adding Auto Layout

A man using Figma to arrange purple and yellow blocks on a dark blue background. He has right-clicked on his design and is mousing over the option titled ‘Add auto layout’ in the drop-down menu. — In the Skillshare class “Figma for Busy People: Mastering Auto Layout,” teacher Adi Purdila adds auto layout to his Figma design using the right-click method.

Use this step-by-step guide to add and start using auto layout in seconds.

Enable auto layout using one of these three methods:
1. Select any elements or frames and use the keyboard shortcut Shift + A to add auto layout to them.
2. Right-click an object or frame from your design and click "Add auto layout" in the menu that appears.
3. Find the section titled "Layout" in the right-hand menu and click the button next to it, which looks like a square containing three shapes.
Select any elements or frames and use the keyboard shortcut Shift + A to add auto layout to them.
Right-click an object or frame from your design and click "Add auto layout" in the menu that appears.
Find the section titled "Layout" in the right-hand menu and click the button next to it, which looks like a square containing three shapes.
Adjust auto layout properties in the right panel. You can set the direction (horizontal or vertical), define spacing between items and add padding inside the frame.
Experiment with resizing options such as "Fill container" (in which elements expand to fill the frame), "Hug content" (in which the frame adjusts to fit the content) and "Fixed width or height" (in which elements maintain a fixed dimension). These settings allow you to decide how your design's elements will adapt when their frame size changes.
Select any elements or frames and use the keyboard shortcut Shift + A to add auto layout to them.
Right-click an object or frame from your design and click "Add auto layout" in the menu that appears.
Find the section titled "Layout" in the right-hand menu and click the button next to it, which looks like a square containing three shapes.

Pro tip: When you're designing buttons in Figma, use auto layout to ensure they maintain consistent padding and alignment, even when the text or icons inside them change.

Using Auto Layout for Responsive Design

Figma open on a computer. The main design space is occupied by a card populated with filler text, a blue rectangle serving as an image placeholder and a sample button. — Vallaure uses auto layout to create a responsive card that can be resized as needed.

Auto layout is particularly effective for creating responsive designs that adapt to various screen sizes, from desktop computers to tablets to smartphones.

When using auto layout to create responsive designs, a critical concept to understand is the parent frame—the container that holds your auto layout elements. By nesting auto layouts (i.e., using an auto layout frame within another auto layout frame), you can achieve highly flexible layouts that seamlessly respond to changes in both content and screen dimensions.

For instance, when designing a navigation bar or card component, auto layout helps ensure that elements like buttons or icons automatically adjust flawlessly across different screen sizes. And if you nest auto layouts, even complex designs can be resized without a hitch.

So if you're working on a web design project that caters to multiple types of devices, auto layout will be a powerful tool in your arsenal.

Advanced Auto Layout Features and Settings

Figma open on a computer. The user has opened a menu titled ‘Advanced layout’ and is mousing over a field called ‘Canvas stacking.’ Within that field, they’ve selected the option ‘First on top.’ — Vallaure shows students how to use Figma’s advanced auto layout settings.

Once you're comfortable with auto layout's fundamentals, you can enhance your designs even further with advanced features like these:

Ignore auto layout: Formerly known as "absolute position," this setting allows an element to stay fixed within an auto layout frame, even while other elements adjust around it. It’s ideal for adding overlays, icons or other elements you want to remain static within an auto layout frame.
Text baseline alignment: Enable this setting to ensure that layers align according to the baseline of a text element. For example, you could use this setting to make the bottom of a non-text icon align with the baseline of the text next to it. This can help to improve readability and consistency across your design.
Canvas stacking order: If your design involves multiple layers that overlap each other to create a stack, the last object in the stack will be on top by default. But if you want the first object in the stack to be on top instead, all you need to do is switch the canvas stacking setting.

Features like those won't just improve your design workflow (though they'll certainly do that). They'll also make it easier to create high-quality UI/UX designs that are adaptable, efficient and beautiful on any device.

Note that those are just some of the features and settings you can use—read up on all of Figma's auto layout properties to truly maximize your designs.

Optimizing Auto Layout in Your Design Process

Follow these best practices to seamlessly integrate auto layout into your design process:

Leverage plugins: Figma and its community have created a variety of plugins that can help you maintain consistency and speed up your workflow when using auto layout. Some, like the aptly named Auto Layout Grids, even make it possible to blend multiple Figma features—in this case, auto layout and layout grids.
Use variants: Figma's variants system allows you to create different versions of components (like buttons) and easily integrate them into design systems. By using variants to populate the designs you create with auto layout, you can save time and maintain a consistent look.
Keep frames to a minimum: To prevent your Figma design from becoming too cluttered, confusing or difficult to work with, try to use as few auto-layout frames as possible to achieve your desired outcome.

Incorporate these strategies into your design process, and you'll enjoy a workflow that's more efficient, effective and easy to manage.

Troubleshooting Common Auto Layout Issues

A diagram of Figma’s auto layout settings as they appear in the right-hand menu within the Figma app. Each symbol is labeled with a descriptor such as ‘direction,’ ‘spacing between items,’ ‘horizontal padding’ and ‘vertical padding.’ — Vallaure uses a diagram to explain Figma’s auto layout options. By mastering these controls, students can easily fix many auto layout issues.

Here are fixes for some of the most common issues you might encounter while using auto layout.

Misaligned elements: Check the alignment settings in the right panel and make sure that all elements are correctly aligned within their auto layout frame.
Unexpected resizing: Review the resizing options (e.g., Fill container, Hug content) to ensure each element has the correct option applied.
Element not responding to auto layout: If there's an element in your design that's not adjusting within its frame like the rest of the elements, make sure that the "Ignore auto layout" setting is not enabled for that element.

When in doubt, always double-check the auto layout settings for whichever frame or element is misbehaving. If you overlooked or mistyped a setting, there’s a good chance that’s what’s causing your issue.

Grow Your Figma Skills

If you want to create responsive, consistent UI/UX designs in Figma, auto layout is simply the best tool for the job. By mastering its features and integrating them into your design process, you can dramatically streamline your workflow while also improving your design quality.

Ready to learn more about Figma and how you can use it to create killer designs? Check out our other Figma tutorials and start growing your design skills:

Written By

Carrie Buchholz

Carrie Buchholz is a freelance writer who lives in Northern Colorado with her husband and dog.