How to Create a Card Using Auto Layout in Figma

To create a card using Auto Layout in Figma, select the elements you want inside the card and press Shift + A to apply Auto Layout. Then adjust the padding, spacing, and alignment properties in the right panel to arrange the card content neatly and responsively.

Syntax

Auto Layout in Figma is applied to frames or groups to arrange child elements automatically. The main properties include:

• Direction: Choose vertical or horizontal stacking.
• Spacing: Set space between child elements.
• Padding: Add space inside the frame edges.
• Alignment: Align children horizontally and vertically.
• Resizing: Control how the frame and children resize.

text

Select elements inside a frame or group
Press Shift + A to apply Auto Layout
Adjust properties in the right sidebar:
- Direction: Vertical or Horizontal
- Spacing between items: e.g., 16 px
- Padding around items: e.g., 24 px
- Alignment: Left, Center, Right
- Resizing: Fixed or Fill container

Example

This example creates a simple card with a title, description, and button stacked vertically with spacing and padding using Auto Layout.

text

1. Create a frame and add three text layers: Title, Description, and Button.
2. Select all three layers.
3. Press Shift + A to apply Auto Layout.
4. In the right panel, set Direction to Vertical.
5. Set Spacing between items to 12 px.
6. Set Padding to 20 px on all sides.
7. Set Alignment to Left.
8. Adjust the frame background color and corner radius to style the card.

Output

A vertical card with a title on top, description below it, and a button at the bottom, spaced evenly with padding around the edges.

Common Pitfalls

Common mistakes when creating cards with Auto Layout include:

• Not selecting all elements before applying Auto Layout, causing unexpected layout.
• Forgetting to set padding, which makes content stick to edges.
• Using fixed sizes on children that prevent responsive resizing.
• Mixing horizontal and vertical layouts without nesting frames properly.

Always check alignment and resizing settings to ensure the card adapts well.

text

/* Wrong way: Applying Auto Layout to only one element */
Select only the title text
Press Shift + A
/* Result: Only title is in Auto Layout, others stay outside */

/* Right way: Select all card elements before applying Auto Layout */
Select title, description, and button
Press Shift + A
Adjust spacing and padding

Quick Reference

Property	Description	Example Value
Direction	Stack children vertically or horizontally	Vertical
Spacing between items	Space between child elements	12 px
Padding	Space inside frame edges	20 px all sides
Alignment	Horizontal or vertical alignment of children	Left
Resizing	How children or frame resize	Hug contents or Fill container

Key Takeaways

Select all card elements before applying Auto Layout with Shift + A.

Use vertical direction with spacing and padding for neat card layout.

Adjust alignment and resizing to make the card responsive.

Avoid fixed sizes on children to keep flexibility.

Nest Auto Layout frames for complex card designs.