How to Use Auto Layout in Figma

Auto Layout is a powerful feature in Figma that allows you to create responsive, adaptable designs that automatically adjust as content changes. It’s particularly useful for creating dynamic elements like buttons, lists, forms, and navigation menus that need to resize or reflow based on the content or screen size. Here’s a comprehensive guide on how to use Auto Layout in Figma:

1. Getting Started with Auto Layout

• Select or Create a Frame: Start by selecting an existing frame or creating a new one. Auto Layout can be applied to frames, groups, or components.

• Apply Auto Layout: With the frame or group selected, click on the "Auto Layout" button in the right-hand properties panel or use the shortcut Shift + A. This will convert your selected frame or group into an Auto Layout container.

2. Understanding Auto Layout Properties

• Direction: Choose the direction in which the elements should flow:

  • Vertical: Stacks elements on top of each other, useful for lists or columns.

  • Horizontal: Places elements side by side, ideal for buttons in a row or navigation bars.

• Padding: Define the space inside the Auto Layout frame around its content. You can set uniform padding or customize padding for each side (top, right, bottom, left).

• Spacing Between Items: Set the gap between items within the Auto Layout frame. This controls the space between elements, such as the distance between buttons or list items.

• Alignment: Align the items within the Auto Layout frame (e.g., top, center, bottom, left, right). This controls how items are positioned relative to the edges of the frame.

• Resizing Behavior:

  • Fixed Width/Height: Keeps the item’s size constant, regardless of content changes.

  • Hug Contents: The item’s size will adjust to fit the content, growing or shrinking as needed.

  • Fill Container: The item will stretch to fill the available space within the container, useful for creating responsive layouts.

3. Creating a Simple Auto Layout Button

• Text Layer: Start by creating a text layer (e.g., “Button”).

• Apply Auto Layout: Select the text layer and apply Auto Layout using Shift + A.

• Padding and Spacing: Adjust the padding to add space around the text inside the button. For example, set padding to 12px on all sides and space between items to 8px.

• Add a Background: With the Auto Layout frame selected, add a fill color to create the button’s background.

• Resize Behavior: Set the text layer’s width to "Hug contents" so the button’s width adjusts based on the text length.

4. Using Auto Layout for Lists and Grids

• Vertical Stacks: Create a vertical list by selecting multiple items (e.g., text layers or frames) and applying Auto Layout. Set the direction to vertical and adjust the spacing between items to create a consistent list.

• Horizontal Rows: Create a horizontal row by selecting items and setting the direction to horizontal. This is useful for creating navigation bars or horizontal galleries.

• Grids with Nested Auto Layout: Combine vertical and horizontal Auto Layout frames to create complex grid structures. For example, create rows using horizontal Auto Layout and stack them vertically.

5. Nesting Auto Layouts

• You can nest Auto Layout frames inside each other to create more complex, responsive layouts. For example, a card component might use vertical Auto Layout to stack text and a button, and the button itself might use Auto Layout to adjust based on its text content.

• Example: Create a card component with an image, text, and a button. Apply Auto Layout to the text and button, then apply Auto Layout to the entire card frame.

6. Resizing with Auto Layout

• Fixed Size: Set an element’s size to remain constant even when content changes. This is useful when you want an element like a button to stay the same size regardless of its label.

• Hug Contents: Use this option to make elements resize automatically based on their content. For example, a button will expand or contract as the text inside it changes.

• Fill Container: Elements with this setting will stretch to fill the available space in their container, useful for creating responsive designs that adapt to different screen sizes.

7. Creating Responsive Designs

• Responsive Frames: Use Auto Layout to create frames that adapt to different screen sizes. For example, a navigation bar with a logo on the left and links on the right can use Auto Layout to ensure the links adjust as the window resizes.

• Component Variants with Auto Layout: Combine Auto Layout with Figma’s component variants to create responsive components that adjust based on state (e.g., a menu button that changes size when hovered).

8. Editing and Updating Auto Layouts

• Modify Padding and Spacing: Adjust padding and spacing at any time by selecting the Auto Layout frame and changing the values in the right-hand panel.

• Adding/Removing Items: You can add new elements to an Auto Layout frame or remove existing ones. Auto Layout will automatically adjust the layout based on your changes.

• Reordering Items: Drag and drop items within an Auto Layout frame to reorder them. The layout will adjust automatically to reflect the new order.

Auto Layout in Figma is a powerful tool that helps you create flexible, responsive designs with ease. By understanding and utilizing Auto Layout properties, you can ensure that your designs adapt seamlessly to content changes and different screen sizes. Whether you're creating simple buttons, complex grids, or entire layouts, Auto Layout streamlines the design process and ensures consistency across your project.