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.
Read original(opens in new tab)