TL;DR: Auto Layout turns static frames into flexible, responsive containers that automatically adjust spacing, size, and alignment when content changes. In 10 minutes, you’ll learn to build buttons, cards, and full page sections that reflow perfectly across desktop, tablet, and mobile breakpoints.
Step 1: Create Your Base Frame
Select any frame or shape (e.g., a 200×50 rectangle). In the right sidebar, click the “+” icon next to “Auto layout” (or press Shift + A). Your element now has a purple dashed border—this is your container. Set the direction to Horizontal for buttons or Vertical for stacked lists.
If you want to dig deeper, check out our guide on Data Sovereignty Laws: How They Impact Global Cloud Storage.
Step 2: Set Padding and Gap
Inside the Auto Layout panel, adjust Padding (top, right, bottom, left) to create breathing room. For a standard button, use 8px vertical and 16px horizontal. Set Gap to 8px if you have multiple children. Tip: Click the chain-link icon to edit all sides at once, then unlink to fine-tune individual sides.
Step 3: Align and Distribute
Use the Alignment icons to position children—left, center, right, or stretch. For vertical layouts, choose “Space between” to push items apart. Tip: Enable “Absolute position” on a child (e.g., an icon) to pull it out of the flow while keeping it inside the container—perfect for badges or close buttons.
Step 4: Make It Responsive with Resizing
Select any child and choose its resizing mode from the dropdown: Fixed (keeps size), Fill container (stretches to match parent width), or Hug contents (shrinks to fit its own text). For a responsive card, set the text block to “Fill container” and the image to “Fixed.” Then set the parent container’s width to “Fill container” and height to “Hug contents.”
Step 5: Test with Breakpoints
Duplicate your completed component (e.g., a nav bar). Create three frames: 1440px (desktop), 768px (tablet), and 375px (mobile). Paste the same component into each. Adjust the Auto Layout properties per frame—for mobile, change direction to Vertical and reduce padding. Tip: Use Constraints inside the container to pin elements to edges, but remember that Auto Layout overrides constraints—so use “Absolute position” for true edge-pinning.
Step 6: Nest for Complex Layouts
Select two Auto Layout frames, then press Shift + A again to wrap them in a parent container. This creates nested rows/columns—essential for dashboards. Tip: Double-click any layer to jump into its own Auto Layout context, and use the “Outline” toggle to see all nested purple boxes at once.
Pro Tips for Speed
• Use Alt + drag to duplicate a component while keeping its Auto Layout settings.
• Save reusable layouts as Components—changes propagate everywhere.
• Press Cmd/Ctrl + Shift + A to remove Auto Layout instantly without losing children.
• For text, set “Hug contents” on width and “Fixed” on height to prevent line-height issues.
FAQ
Q: Why does my text get cut off when I change the frame size?
A: Your text layer is likely set to “Fixed” width. Change it to “Hug contents” (for single-line) or “Fill container” (for wrapping text), and ensure the parent’s height is “Hug contents” so it
Leave a Reply