Auto Layout
Create responsive designs that automatically adapt when content changes. Stack and space child layers dynamically.
Layout
Shortcut: Shift+AAdvanced12 min readQuick Reference
Auto Layout
FigmaKeyboard Shortcut
Shift+Akey
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Advanced⏱ 1–2 hours to master
Key Settings
Enable:Shift+ADirection:Spacing:
Auto Layout is a powerful layout system that automatically arranges layers within a frame. When content changes — like text updates or image swaps — the layout adjusts spacing, alignment, and size automatically.
Where to Find It
Select a frame and press Shift+A, or enable Auto Layout in the Design panel under the Auto Layout section.
How to Use
- Enable: Select a frame with child layers and press Shift+A.
- Direction: Choose horizontal or vertical stacking in the Design panel.
- Spacing: Set gap spacing between items. Use auto spacing for equal distribution.
- Padding: Add padding around the contents for breathing room.
- Resizing: Set each layer's resizing behavior — Fill container, Hug contents, or Fixed.
Pro Tips
- Use nested Auto Layout frames for complex responsive layouts — each frame handles its own direction.
- Combine Auto Layout with components for truly flexible design system building blocks.