Learn how to use Auto Layout in Figma to create dynamic frames that grow or shrink as you change their content. This powerful feature makes building responsive components and layouts a breeze.
Start by selecting two or more objects on your canvas. These can be shapes, text layers, components, or even other frames.
With your layers selected, use the keyboard shortcut Shift + A. Alternatively, you can right-click the selection and choose Add auto layout, or click the + button next to 'Auto layout' in the right sidebar.
Once applied, a new 'Auto layout' section will appear in the right sidebar. Here you can control the direction (vertical or horizontal), spacing between items, and padding around the content.
Drag new objects into the Auto Layout frame to add them. They will automatically position themselves based on your settings. You can also drag items within the frame to reorder them or select an item and press Delete to remove it.
Pro Tips for Using Auto Layout
Create complex, responsive components by placing auto layout frames inside other auto layout frames. This is key for building entire interfaces.
Use 'Hug contents' to make the frame resize to its children, and 'Fill container' to make a child element stretch to fill the available space within its parent.
For elements like notification badges that need to overlap, select the item inside an auto layout frame and click the 'Absolute position' icon in the top-right of the Frame panel.
In the Auto layout panel, you can set uniform padding or click the 'Independent paddings' icon to specify different values for top, right, bottom, and left.
Explore other Figma guides and shortcuts