Auto Layout is Figma’s layout system for automatically arranging and resizing frames and components based on content, spacing, padding, alignment, and sizing rules.
Imagine a button where the label changes from “Save” to “Save changes to workspace.” Without layout rules, the designer may need to resize the button manually.
With Auto Layout, the button can keep defined horizontal padding while expanding automatically around the content.
The same idea can apply to cards, navigation, forms, tables, and entire screen sections.
Children can be arranged horizontally or vertically.
Rules control spacing between items and space around the container.
Items can align relative to the container and each other.
Elements can hug content, use fixed dimensions, or fill available space depending on the layout.
Items can flow onto additional lines when space becomes constrained.
Responsive design is a broader product and implementation approach. Auto Layout is one Figma mechanism for expressing flexible layout behavior in design files.
A file can use Auto Layout and still have poor responsive decisions if content priority and breakpoint behavior are undefined.
Reusable components need to handle changing labels, states, sizes, and content without breaking. Auto Layout encodes those rules so instances behave more predictably.
It also reduces manual cleanup when screens are exported, duplicated, or updated.
Too many unnecessary frames make files difficult to understand.
This defeats much of the flexibility Auto Layout provides.
The concepts overlap, but implementation still requires engineering decisions.
Auto Layout asks: what layout rules should make this Figma component or frame adjust automatically when its content or available space changes?
Responsive design · Component · Component variant · Design system
Read Figr’s User Interface Design Guide for the broader UI workflow around reusable, responsive components.