How to use Auto Layout for cards and lists in Figma
Introduction
Cards and lists are foundational UI patterns. Without Auto Layout, changing the text in a card usually means manually moving every element below it. With Auto Layout, these adjustments happen automatically.
In this guide, you will learn to construct a card component that adapts to its content and a list that automatically spaces out its items.
Prerequisites
- •A text layer and an image layer (rectangles work)
- •Figma desktop or web app open
Guide Steps
Group your card elements
Place your image, headline, and body text on the canvas. Select them all and press Shift + A to create an Auto Layout frame. Ensure the direction is set to 'Vertical'.
Style the card container
Add a fill color to the frame. Set corner radius and add padding (e.g., 16px) in the Auto Layout properties. Set the gap between items to a consistent value like 8px or 12px.
Make text flexible
Select the text layers. Set their horizontal resizing to 'Fill container' and vertical resizing to 'Hug contents'. This ensures the text wraps to a new line when the card width changes, and the card grows taller to fit the text.
Stack cards into a list
Duplicate your card multiple times. Select all the card instances and press Shift + A again to wrap them in a parent Auto Layout frame. Set this parent frame to 'Vertical' direction to create a clean list.
Common Mistakes to Avoid
- ×Not setting text to 'Fill container', causing it to overflow the card width.
- ×Applying Auto Layout to the wrong selection of layers.
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.