What is Auto Layout in Figma: Simple Explanation and Use Cases

Auto Layout in Figma is a feature that automatically arranges and resizes design elements based on rules you set, like spacing and direction. It helps create flexible, responsive designs that adjust as you add or remove content.

How It Works

Think of Auto Layout as a smart container that organizes items inside it, like a box that automatically lines up your photos or text blocks neatly. Instead of moving each item by hand, you tell Figma how you want them arranged—horizontally or vertically—and how much space to keep between them.

When you add or remove items, the container adjusts its size and the position of everything inside it automatically. This is like having a shelf that grows or shrinks depending on how many books you put on it, keeping everything evenly spaced and aligned without extra effort.

Example

This example shows how to create a horizontal auto layout with three buttons spaced evenly.

figma-plugin-api

Frame {
  autoLayout: {
    direction: 'horizontal',
    spacing: 16,
    padding: 12,
    alignItems: 'center'
  },
  children: [
    Button { text: 'Save' },
    Button { text: 'Cancel' },
    Button { text: 'Delete' }
  ]
}

Output

A horizontal row of three buttons labeled 'Save', 'Cancel', and 'Delete' spaced evenly with 16 pixels between them and 12 pixels padding around.

When to Use

Use Auto Layout when you want your designs to adapt easily as content changes. For example, if you have a navigation bar, a list of items, or a form, auto layout keeps everything aligned and spaced without manual adjustments.

It is especially helpful for responsive designs that need to look good on different screen sizes, because it automatically resizes and repositions elements as needed.

Key Points

• Auto Layout arranges elements automatically based on direction and spacing rules.
• It saves time by adjusting layouts when you add, remove, or resize items.
• Great for creating responsive and consistent designs.
• Supports horizontal and vertical stacking with padding and alignment options.

Key Takeaways

Auto Layout automatically arranges and resizes elements based on your rules.

It helps create flexible, responsive designs that adapt to content changes.

Use it for navigation bars, lists, forms, and any layout that needs consistent spacing.

It saves time by reducing manual adjustments in your design workflow.