TL;DR: Auto Layout lets you build responsive UI by turning static frames into flexible containers that adapt to content and screen size. In 10 minutes, you’ll learn to add, configure, and nest Auto Layout frames to handle spacing, resizing, and alignment automatically.
Step 1: Select Your Frame or Elements
Start by selecting one or more layers in your Figma design—buttons, cards, or text blocks work best. Click the “+” icon next to “Auto layout” in the right-hand properties panel (or press Shift + A). This converts your selection into a single Auto Layout frame with default padding and spacing.
If you want to dig deeper, check out our guide on 10 Easy Lifestyle Habits for a Healthier, Happier You.
Step 2: Set Direction and Spacing
In the Auto Layout panel, choose Horizontal (row) or Vertical (column) direction. Adjust the gap between children (e.g., 8px, 16px). For even distribution, click the “Space between” icon—this pushes items to the edges with equal gaps, perfect for navbars or toolbars.
Step 3: Control Padding and Alignment
Set padding values (top, right, bottom, left) individually or use the “Uniform” toggle. For alignment, use the cross-axis dropdown: “Top,” “Center,” or “Bottom” for vertical frames; “Left,” “Center,” or “Right” for horizontal ones. Combine with “Fill container” on children to make them stretch equally.
Step 4: Master Resizing Behavior
Select a child element and find its resize mode. “Hug contents” shrinks the frame to fit its text or shapes. “Fill container” makes it expand to match the parent’s width/height. “Fixed” keeps a constant size. For responsive text, use “Hug” on the text, but set the parent’s width to “Fill” so it grows with the page.
Step 5: Nest Auto Layout Frames
Drag an Auto Layout frame inside another—this is how you build complex layouts like a card with an image, title, and button. Each nested frame can have its own direction, spacing, and padding. Use the “Absolute position” toggle on a child to pin it to a corner without affecting other layout logic.
Step 6: Test Responsiveness
Select the top-level frame and resize it by dragging its edges. Watch how children reflow, shrink, or grow. To simulate different screen widths, set the frame’s width to “Fill container” and then drag the canvas—or use “Constraints” (under the frame’s layout tab) to control horizontal/vertical pinning. Finally, press Ctrl/Cmd + R to enter presentation mode and preview at various breakpoints.
Pro Tips
Use “Min/Max width” on a frame to prevent it from becoming too narrow or wide on mobile. For truly responsive text, enable “Auto width” on the text layer and pair it with a fixed max width. Always keep spacing values consistent (e.g., multiples of 4) for a clean grid.
FAQ
Q: Can I convert an existing design to Auto Layout without rebuilding it?
A: Yes—select the parent frame (or multiple children), then press Shift + A. Figma will preserve your spacing and alignment as best it can, but you may need to adjust padding and gap values afterward.
Q: Why is my text getting cut off when I resize the frame?
A: Set the text layer’s resize mode to “Hug contents” and the parent frame’s height to “Hug contents” as well. If you need a fixed height, enable “Clip content” on the parent, or reduce the text’s font size using “Auto size” with min/max
Leave a Reply