If you're still nudging elements around by hand every time a client asks for wider cards, Figma auto layout is the single feature that will change how you work. We've been designing and selling website templates for years, and the difference between designers who master auto layout and those who don't is stark: one group ships components in minutes, the other is still counting pixels at midnight.
This figma auto layout tutorial covers what actually matters for web design. Not every toggle and edge case. Just the practical patterns we use when building templates like SynthMind and Saify, so you can build buttons, cards, nav bars, and entire sections that resize correctly without manual adjustments.
By the end, you'll know how to structure auto layout frames, handle spacing and padding, nest components responsibly, and avoid the common traps that make Figma files a nightmare to maintain.
How does Figma auto layout actually work?
Auto layout is a property you apply to a frame that turns its children into a flexible, rule-based system. Instead of fixed X and Y coordinates, you define direction, spacing, and padding. When content changes, the frame resizes automatically. Think of it as CSS flexbox inside Figma.
The core controls are direction (vertical or horizontal), spacing between items, padding around the edges, alignment, and distribution. We design templates for SaaS and startup sites, and the pattern we keep seeing is that designers start auto layout too late. They draw a card, group it, then try to add auto layout after the fact. That's backwards. Start with an empty auto layout frame, then drop elements inside.
What's the correct way to set up your first auto layout frame?
Start small. Pick a button. Draw a text layer that says "Get Started," draw a rectangle behind it, select both, and press Shift + A. Figma wraps them in an auto layout frame. Set horizontal padding to 24, vertical padding to 12, move the background fill to the frame itself, and delete the separate rectangle. You now have a button that grows with its text.
The real power shows when you duplicate that button inside another auto layout frame. Build a row with 12px spacing, and watch them stay evenly spaced even when one label gets longer.
Here's a practical checklist we follow for every new component:
| Step | Action | Why It Matters |
| 1 | Start with an empty auto layout frame | Prevents manual positioning headaches |
| 2 | Add content as child layers | The frame will wrap and size correctly |
| 3 | Set padding before spacing | Defines the internal breathing room first |
| 4 | Use fill containers for stretchy areas | Lets sections adapt to different widths |
| 5 | Test with longer text | Catches overflow issues early |
| 6 | Name frames clearly | Makes handoff and maintenance easier |
This approach is how we build every button, card, and nav element in our Figma landing page templates. The time saved adds up fast when you're working with 20+ components per page.
How do you handle nested auto layout frames without creating a mess?
Nesting is where most designers get stuck. The rule is simple: every auto layout frame needs a clear job.
A card might have three nested frames. One handles the image area. One handles the text stack. One handles the footer row. The parent card frame wraps all three and controls the overall padding.
When a child frame sits inside a parent auto layout frame, its resizing behavior matters. A child set to "hug contents" shrinks to fit its own children. A child set to "fill container" stretches to match the parent. Mixing these intentionally is the key to responsive design in Figma.
For example, in a card component, the image frame fills the container width with a fixed height, the text stack hugs its contents, the button row hugs its contents and aligns left, and the card itself has 24px padding on all sides. We sell templates across multiple categories, from architecture to SaaS, and this nested structure scales whether the card is in a three-column grid or a single hero feature.
What are the best figma auto layout tips for responsive design?
Responsive design in Figma doesn't mean the same thing it does in a browser. You're not designing for breakpoints in real time. You're designing components that communicate responsive behavior to the developer, and you're building your own layouts so they adjust cleanly when you resize frames.
These are the figma auto layout tips we rely on every day:
Use constraints and auto layout together. Auto layout handles spacing within a frame. Constraints control how that frame behaves when its parent resizes. A card in a grid should have constraints set to "left and right" so it stretches with the column width.
Create separate components for different states. Don't try to build one mega-component that handles every variant through auto layout alone. A button with an icon and without an icon should often be separate components, or at least use Figma's component variants cleanly.
Set min and max widths when possible. Figma now supports minimum and maximum width on auto layout frames. Use them. A button shouldn't shrink below a readable width. A card shouldn't stretch so wide that the line length becomes unreadable.
Align text intentionally. Left-aligned text in an auto layout frame behaves predictably. Center-aligned text can cause unexpected shifts when labels change length. We default to left alignment for UI text and only center for short labels like buttons or badges.
Use spacing variables. If you're working on a design system, define your spacing scale as variables and apply them to auto layout frames. When you change the scale, everything updates. We use 4, 8, 12, 16, 24, 32, 48, and 64 as our base steps, which matches what you'll find in most of our templates.
If you're moving designs into production, our guide on the Figma to Framer workflow covers how auto layout structures translate into published sites without losing your spacing logic.
How do you build common web components with auto layout?
The fastest way to get comfortable with auto layout is to rebuild the components you use most often. Here are three patterns we use constantly in our template work.
Navigation bar: A horizontal auto layout frame with the logo hugging its contents on the left, nav links in a centered horizontal frame with 32px spacing, and a CTA button hugging its contents on the right. The parent frame uses "space between" distribution. Set the parent height to 72px with vertical center alignment.
Feature card: A vertical auto layout frame with 0px spacing between image and content area. The image fills the container width with a fixed 200px height and rounded top corners. The content area is another vertical auto layout frame with 24px padding, containing a heading, body text, and a link. The content frame hugs its contents. The card itself has a background fill and 8px corner radius.
Testimonial row: A horizontal auto layout frame with 24px spacing. Each testimonial is a vertical auto layout frame with 24px padding, a quote in large text, and an author row below it. The author row is horizontal with 12px spacing: avatar circle, then a vertical text stack for name and title. Each testimonial card fills the container equally.
These patterns appear in templates like Assistify and GrowiX. Once you build them once, you copy and adapt. That's where the speed comes from.
What are the most common auto layout mistakes to avoid?
We've reviewed thousands of Figma files from template submissions and client projects. The same problems show up repeatedly.
Using fixed widths everywhere. If every frame has a fixed width, you're not getting any benefit from auto layout. At least some frames should hug contents or fill containers.
Forgetting about text truncation. Auto layout will happily stretch a frame to fit long text. In a real website, that text might truncate or wrap. Design with realistic copy lengths, and consider adding a max width to text frames.
Over-nesting. Three levels of auto layout is usually enough. Beyond that, you're building complexity without benefit. If you find yourself with five or six nested frames, step back and see if the structure can be flatter.
Mixing auto layout and manual positioning. Once a frame has auto layout, resist the urge to drag individual children to custom positions. The whole point is that positions are rule-based. If you need a custom layout, auto layout might not be the right tool for that specific element.
Ignoring the layer order. In a vertical auto layout frame, layers stack from top to bottom in the order they appear in the layers panel. If your card image is below the text in the layers panel, it'll render below the text. This trips people up constantly.
A contrarian take: most designers spend too much time making their Figma files pixel-perfect at every width. That's not the job. The job is to communicate the design clearly and build components that resize predictably. Let the developer handle the exact breakpoint behavior.
Frequently asked questions
How is Figma auto layout different from CSS flexbox?
Auto layout is inspired by flexbox but isn't identical. The core concepts, direction, spacing, and alignment, are similar. However, Figma handles wrapping differently, and some CSS properties like gap behavior in wrapped layouts don't map directly. Use auto layout to model flexbox-like behavior, but don't expect a one-to-one translation for every edge case.
Can you use auto layout for entire page layouts?
Yes, but with limits. Auto layout works well for sections and component groups. For full-page grids with multiple breakpoints, many designers prefer standard frames with constraints, or they combine both approaches. We typically use auto layout for components and section internals, then standard frames for the overall page grid.
What's the fastest way to learn auto layout?
Build ten buttons, five cards, and three nav bars using only auto layout. Don't draw freely. Start with Shift + A every time. By the tenth component, the controls will feel automatic. For additional guidance, Figma's official documentation at help.figma.com covers every property in detail.
Start building components that actually scale
Figma auto layout isn't a niche feature for advanced users. It's the baseline for professional web design work in 2026. If you're still grouping layers and dragging them by hand, you're working harder than necessary.
Start with buttons. Move to cards. Then tackle nav bars and footer sections. Within a week of deliberate practice, your Figma files will be cleaner, your handoffs clearer, and your design iterations faster.
If you want to see auto layout used in production-ready files, browse our Figma dashboard UI kits or read our guide on how to use Figma templates effectively. Every template we sell includes fully structured auto layout components you can study, copy, and adapt.
And if you're deciding between tools, our breakdown of Framer vs Figma templates explains when to design in Figma and when to build directly in a site builder.
The best time to learn auto layout was last year. The second best time is the next project you open.
