How to create responsive layouts in Figma using Auto Layout
Introduction
Designing for multiple screen sizes can be tedious if you have to manually resize every element. Auto Layout allows you to create dynamic frames that respond to their content and container size, automating much of the responsive design process.
This guide will show you how to set up a basic responsive frame that adjusts its width and height automatically, saving you hours of manual adjustments.
Prerequisites
- •Basic knowledge of Figma's interface
- •A frame with some layers inside
Guide Steps
Add Auto Layout to a frame
Select the frame or group of objects you want to make responsive. Press Shift + A to add Auto Layout. You will see the Auto Layout panel appear in the right sidebar properties.
Configure direction and spacing
In the Auto Layout panel, choose either vertical (down arrow) or horizontal (right arrow) direction. Adjust the gap between items and the horizontal/vertical padding to define the spacing around your content.
Set resizing constraints
Select the child elements inside your Auto Layout frame. In the resizing panel, change their horizontal resizing to 'Fill container' if you want them to stretch, or 'Fixed width' if they should remain static. Set the parent frame's resizing to 'Hug contents' to wrap around children, or 'Fixed width' to define a specific size.
Test the layout
Select the parent frame and drag its edges to resize it. Observe how the child elements adjust based on the constraints you set. If an element isn't resizing as expected, double-check its specific resizing property.
Common Mistakes to Avoid
- ×Leaving child elements simply set to 'Fixed width' when they should fill the container.
- ×Forgetting to set Constraints (Left/Right/Top/Bottom) on the parent frame itself if it is nested within another frame.
Pro-Level Design Tips & Workflows
💡 Canvas Shortcut: Select any parent Auto Layout frame and double-click the inner padding lines directly on the canvas to set sizing values visually without clicking the sidebar.
💡 Spacing Variables: Always bind padding and gap spacings to dynamic variables (e.g. space/8 or space/16) to support system theming scaling.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.