Design more, resize less, with Auto Layout | Figma Blog

Figma’s Auto Layout brings structural concepts from CSS flexbox into a free-form design environment. It reduces repetitive resizing and repositioning by making frames respond automatically to their content, while preserving designers’ ability to explore layouts freely. The result is a workflow that feels closer to production code without sacrificing visual experimentation.

Bridging Design and Development

• Traditional Figma designs require manual updates when content changes, such as resizing a button and repositioning neighboring elements.
• HTML/CSS and SwiftUI handle these relationships automatically, but are less suited to rapid, free-form design exploration.
• Auto Layout combines both approaches by adding flexible, code-inspired layout behavior as a property of any Figma frame.

How Auto Layout Works

• Items inside an Auto Layout frame are arranged vertically or horizontally.
• The frame automatically sizes itself based on its contents.
• Frames can include padding, fills, strokes, and corner radii, allowing designers to create buttons without extra layers.
• Changing button text automatically resizes the button and adjusts surrounding elements.
• Spacing is controlled at the container level rather than independently between every pair of items.

Lists, Menus, and Design Systems

• Auto Layout simplifies repeated interface elements such as lists and menus.
• Items can be reordered through drag and drop instead of manually repositioning them.
• Existing components and design-system elements can be converted using Shift + A or the Option menu.
• The feature supports more generic components that adapt to different content instead of requiring separate variants.

Nested Frames and Safeguards

• Auto Layout frames can be nested to build complex interfaces, similar to nested HTML div elements.
• Designers can edit content or move elements in and out of layout frames.
• Figma includes safeguards against unintended actions, such as placing a large image inside a button.
• Holding Command on macOS or Ctrl on Windows overrides these safeguards when needed.

Figma recommends trying Auto Layout through its playground file, video, and documentation. The initial release was presented as a starting point, with further improvements expected based on user feedback.