How to Use Auto Layout in Figma (Beginner Guide)

TL;DR: What You Will Learn

• What it is: A Figma feature that automatically handles spacing, padding, and resizing so your designs adapt to changing content.
• When to use it: For buttons, cards, lists, navigation bars, and anything that might grow, shrink, or repeat.
• What you will build: A flexible button and a responsive card, step by step, that stop breaking when content or screen size shifts.

Everything here is hands-on, and it points towards practising with real projects. If you are in Singapore, this guide funnels nicely into a SkillsFuture-supported Figma course where you can build these skills under guidance.

What Auto Layout Actually Does and Why It Matters

Figma Auto Layout is a frame property that automatically arranges, resizes, and spaces the elements inside it as content changes. Instead of manually nudging every element when text, images, or screen size shifts, you set spacing and sizing rules once and the frame handles the rest. For the full breakdown of every property straight from the source, see Figma’s own Guide to Auto Layout.

Without it, you are nudging every element by hand. With it, the frame does the arranging for you, like a smart container that reflows when the contents change.

Picture a simple button that says “Buy”. In a manual design, you draw a rectangle, drop the text on top, and eyeball the padding.

Now change the label to “Add to cart”. The text spills over the edge of your rectangle, so you go back and manually stretch the box and re-centre everything. Do that across enough buttons, and in my experience those small fixes eat up far more time than they should.

With Auto Layout on that same button, the frame simply grows to fit the longer label while keeping the padding identical on all sides. You change the words, the design fixes itself.

This isn’t just a beginner’s headache; it’s the exact problem Figma built the feature to solve. Sho Kuwamoto, Figma’s Vice President of Product, made the same point when he announced Auto Layout: even a small change like updating a button’s label used to set off a chain reaction of manual fixes, from editing text, resizing the button, moving an adjacent button, and so on. Auto Layout exists specifically to break that chain.

What Problems Auto Layout Solves

The core problem it solves is repetitive manual adjustment. Spacing stays even, elements stay aligned, and nothing breaks when content changes length.

This matters most when you are moving fast. If you are a startup applying for the IMDA SMEs Go Digital scheme and you need a working app prototype to show a vendor or an investor, you cannot afford to hand-align every screen twice.

In my experience, Auto Layout can help a lean team ship a polished flow noticeably faster, because the layout logic is baked into the frames rather than living in your memory.

Where You See it in Real Interfaces

Once you know what to look for, Auto Layout is everywhere in the products you use daily.

• Buttons that grow to fit their label, like the “Pay” or “Book” buttons in a food delivery or ride-hailing app
• Vertical lists such as a chat thread or a notification feed, where each new item slots in and pushes the rest down
• Cards in a grid, like property listings or course tiles, that keep the same internal spacing no matter how much text each one holds
• Navigation bars and toolbars where icons sit evenly spaced across the top

If you are brand new to the tool, work through a beginner-friendly Figma tutorial before you go deep, because Auto Layout builds on frames and constraints you will want to understand first: a beginner-friendly Figma tutorial.

How it Maps to How Developers Build

Here is the part your developers will love. Auto Layout mirrors Flexbox, the CSS system engineers use to arrange elements in a row or column.

When you set a direction, a gap between items, and padding around the edges in Figma, you are describing almost exactly what a developer will write in code. That shared language means fewer misunderstandings at handover and a design that behaves the way the final product actually will.

Enabling Auto Layout on Your First Frame

Let me walk you through the moment Figma Auto Layout stops being intimidating and starts feeling like magic. We will build a simple menu card for an imaginary Singapore F&B brand, say a kopitiam called Uncle’s Toast, so you have something concrete to picture as you follow along.

If you have never touched Figma before, spend a few minutes with the Figma design basics every beginner should master first, so terms like frame, layer, and property panel do not trip you up.

The Shift+A Shortcut and The Panel Controls

Here are the step-by-step instructions for our menu card.

1. Create a frame and drop in three text layers: the dish name (Kaya Toast Set), a short description, and the price ($4.80).
2. Select all three layers by clicking the first, then Shift-clicking the others in the left-hand Layers panel.
3. Press Shift+A. Figma wraps your selection in a new frame with Auto Layout applied.
4. Look at the right-hand panel. A new Auto Layout section appears with controls for direction, spacing between items, and padding.

The panel on the right is now your command centre for spacing. Instead of nudging each text layer by hand, you type a spacing value once, and every item respects it.

Direction: Horizontal Versus Vertical

By default, Figma usually stacks your selection vertically, which suits a menu card where the dish, description, and price sit one above the other.

Toggle the direction control to horizontal and watch the three items snap into a single row instead. For our menu, vertical is what we want, but horizontal is perfect for a row of buttons or a price and add-to-cart pairing later on.

Change the spacing number, and the gaps update live. Change the padding, and the frame breathes around its contents. This is the visual feedback that makes Auto Layout click for first-timers.

Troubleshooting When Auto Layout Won't Apply

Sometimes you press Shift+A, and nothing seems to happen, or the panel does not appear. A few common culprits trip people up.

• You have nothing selected, so there is no layer for Figma to wrap.
• You selected a layer that is locked, which you will see as a small padlock in the Layers panel.
• You are already inside an Auto Layout frame and pressed the shortcut on the frame itself, which removes it instead.

If the layout looks squashed after applying it, do not panic. Set the resizing on your text layers to hug contents, and the card will size itself neatly around the Kaya Toast text every time you edit it.

Controlling Padding and Spacing Between Elements

Once you have wrapped elements in an auto layout frame, the two settings you will touch most are padding and item spacing. Get these right, and your designs suddenly look tidy and intentional.

Here is the quick distinction. Padding is the space inside the frame, between its edge and the content. Item spacing is the gap between the children sitting inside that frame.

Think of a product card for a Shopee or Lazada seller. Padding is the breathing room around the whole card, and item spacing is the gap between the product image, the title, the price, and the rating.

Setting Horizontal, Vertical, and Per-Side Padding

In the right-hand panel, you will see a padding field. Enter a single number to apply the same padding on all four sides, which is the fastest option when you want uniform spacing.

Click the small icon next to that field to switch to individual controls. Now you can set horizontal and vertical padding separately, useful when a card needs more room top and bottom than left and right.

Expand it further to set each side on its own. For that product card, you might want a little extra padding at the bottom so the price never touches the card edge, while keeping the top tighter.

Item Spacing and The Space-Between Option

Item spacing lives just above padding, marked with an icon showing a gap between shapes. Type a value, and every child in the frame spreads apart by exactly that amount.

There is also a clever option worth knowing. If you set the spacing to Auto (the space-between mode), Figma pushes the first and last items to the edges and distributes the remaining space evenly.

For a card footer with a price on the left and an add-to-cart button on the right, space-between does the alignment for you; no manual nudging required.

Using Spacing to Build a Consistent Design Rhythm

The real payoff comes when you commit to a spacing scale early. I always recommend beginners pick a simple set of values and stick to them, most commonly multiples of 4 and 8.

• 4 for tight gaps, like between an icon and its label
• 8 for spacing between a title and a price
• 16 for padding around the whole card

When every card across your listing uses the same 16 padding and 8 gaps, the storefront looks like it was designed by one professional hand rather than assembled piece by piece.

Before you apply a scale, a page of cards looks slightly off, with gaps that vary by a pixel or two. After, everything lines up and the whole shop feels trustworthy, which matters a great deal when a shopper is deciding whether to buy from you.

Understanding Resizing Behaviour: Fixed, Hug and Fill

Once you turn on Figma Auto Layout, every element gets three resizing options: Fixed, Hug contents, and Fill container. This is the part that trips up almost every beginner I have taught, so let me demystify it with a scenario you can picture.

Imagine you are designing a login screen for a Singapore banking app, something like a DBS or OCBC style flow. You have a “Log In” button, an input field, and a small “Verified” chip next to the user’s name. Each of these needs a different resizing behaviour, and getting them right is what separates a rigid mockup from a responsive design.

Hug Contents for Buttons and Tags

Hug contents means the frame shrinks to wrap tightly around whatever is inside it, respecting the padding you set.

Use it when the size of the element should depend on its content. That “Verified” chip is the perfect example: it should hug its label so it stays neat whether the text reads “Verified” or “Pending”.

The same applies to buttons that sit inline, tags, badges, and pills. My rule of thumb: if the content decides the size, choose Hug.

Fill Container for Full-Width Elements

Fill container does the opposite. The element stretches to take up all available space in its parent.

On that login screen, the primary “Log In” button almost always spans the full width of the form. Set its horizontal resizing to Fill, and it will stretch edge to edge, no matter how wide the frame becomes.

This is exactly what makes a layout responsive. When you resize the frame from a mobile width to a desktop width, a Fill button expands automatically instead of floating awkwardly on the left.

Input fields, cards in a list, and full-width banners all behave best with Fill.

Fixed Sizing and When to Avoid It

Fixed sizing locks an element to an exact pixel value. It will not grow or shrink when the frame changes.

Beginners reach for Fixed too often because it feels controllable, but it quietly breaks responsiveness. If your form container is Fixed at 375px, it will not adapt when you copy it into a tablet or desktop frame.

Reserve Fixed for things that genuinely must stay one size, like an icon, an avatar, or a logo. For most containers and layout structures, avoid it.

Here is a quick decision guide so you stop guessing:

• Content should define the size (chip, tag, inline button): Hug contents.
• Element should stretch to fill space (full-width button, input field): Fill container.
• Element must stay one exact size (icon, logo, avatar): Fixed.

Combine these thoughtfully, and one design will flex cleanly from a mobile frame to a desktop frame, which is a big part of what Figma is used for in real design projects across product teams here in Singapore.

Nesting Auto Layout Frames for Complex Screens

Once you are comfortable with a single Auto Layout frame, the real power shows up when you start putting them inside each other. Nesting Auto Layout frames is how you go from styling one component to building an entire screen that flexes together as one unit.

Let me walk you through a scenario I use when teaching. Imagine you are a UX designer assembling a feed screen for a transport or HDB services app, the kind of screen where residents scroll through a list of announcements or nearby amenities.

You start small. Build one card that holds an image, a heading, a line of body text, and a button. Wrap those four elements in a vertical Auto Layout frame with consistent padding. That is your child.

Now select that card and duplicate it several times. Wrap all the cards in another vertical Auto Layout frame, this time with spacing between each card. That outer frame is your parent list, and every card inside it now behaves as a neat, evenly spaced row.

Parent Versus Child Auto Layout

The parent frame controls how the cards sit in relation to each other. The child frame controls how the elements sit inside a single card.

They work independently, which is the point. You can change the gap between cards without touching the padding inside them, and vice versa.

How Spacing Cascades Through Nested Frames

When you add a longer announcement to one card, that card grows taller, and the parent list pushes every card below it down automatically. Nothing overlaps; nothing needs manual nudging.

This cascade is what makes nested Auto Layout feel like magic the first time you see it. Add a card, remove a card, or lengthen the text, and the whole screen reflows on its own.

Keeping The Layer Structure Clean and Named

Here is where messy files and professional files part ways. Rename your frames as you go: call the outer frame “Feed List” and each card “Announcement Card” rather than leaving them as Frame 47.

A developer receiving your file, or your future self coming back in three weeks, should be able to read the layers panel like a table of contents.

Watch out for the common nesting mistakes that cause elements to collapse:

• Setting a child frame to Hug when its parent needs it to Fill, so items shrink to nothing
• Nesting a frame inside the wrong parent, so spacing behaves unexpectedly
• Forgetting to set a fixed or fill width on text, so headings squash into a single-character column

Clean, well-named nesting is exactly what separates a chaotic working file from a handoff-ready one that a real Singapore product team can build from.

Building Reusable Components With Auto Layout

Here is where Figma Auto Layout stops being a nice tidiness trick and starts saving your team real hours. When you combine Auto Layout with Figma components, you build UI elements that resize, stack, and adapt correctly no matter where they appear.

Picture a small design agency in Singapore juggling three client projects at once. Instead of rebuilding a button from scratch for every screen, you build it once as an Auto Layout component and reuse it everywhere.

Converting an Auto Layout Frame Into a Component

Start with a button you have already set up using Auto Layout, so the padding hugs the text and the frame grows or shrinks with the label.

Select that frame, then press Cmd or Ctrl plus Alt plus K, or right-click and choose Create Component. The frame is now your main component, marked with a small diamond icon.

Every copy you drag out is an instance. Change the label from “Submit” to “Confirm Booking,” and the Auto Layout keeps the padding perfect, so the button never looks squashed or stretched.

Using Variants For States Like Default, Hover and Disabled

Real buttons need more than one look. You want a default state, a hover state, and a disabled state, and variants let you group them under one component.

Select your button variations, right-click, and choose Combine as Variants. Figma bundles them into a single component set, and you can name a property something like “State” with values default, hover, and disabled.0

Now anyone on your team drops in one button and switches its state from a dropdown in the right panel. No hunting through the file for the correct greyed-out version.

Because each variant still uses Auto Layout, a longer label on the disabled state resizes just as cleanly as on the default one. That consistency is exactly what keeps a multi-client design system from drifting apart.

Updating The Main Component and Watching Instances Update

This is the payoff. Say your client asks for slightly rounder corners and a bolder font weight across every button.

You edit the main component once. Every instance across every screen and every project file updates automatically, whether there are five buttons or five hundred.

For teams maintaining design consistency at scale, this single behaviour is worth the entire learning curve. No more manually chasing down stray buttons before a handover.

If you would rather not build a full component library from zero, ready-made kits are a smart shortcut. Browse some of the best Figma templates to kickstart your designs and adapt their Auto Layout components to your own brand.

Buttons, input fields, and cards all follow the same pattern: build once with Auto Layout, componentise, add variants, then let updates ripple everywhere.

Speeding Up Auto Layout Work With Figma AI

Once you are comfortable with the basics, the newer AI tools inside Figma can genuinely shave time off your workflow. I treat them as a fast first draft, then I clean up with Auto Layout controls I actually trust.

Picture a solo founder in Singapore prepping a landing page for an investor pitch on Monday. You have a weekend, no designer, and a deck that still needs work.

Figma AI does not replace your Auto Layout skills; it just gets you to a starting point faster.

AI-Assisted Layer Cleanup for Nested Frames

If you have ever inherited a file with layers called “Frame 47” and “Group 12”, you know the pain. When Auto Layout is nested three or four levels deep, unnamed layers make it almost impossible to see what is padding, what is a wrapper, and what is content.

Figma AI can rename layers based on what they contain, so “Frame 47” becomes something like “Hero heading” or “CTA button row”. That small change makes your Auto Layout structure readable, which matters when you are moving fast before a pitch.

I still scan the renamed layers and correct anything odd, because AI sometimes guesses the intent wrong on custom components.

Generating First-Draft Components to Auto Layout

For that landing page, you can prompt Figma AI to generate a starter hero, a features section, or a pricing block. It gives you a rough structure with elements already grouped.

From there, the real work begins. You wrap sections in Auto Layout, set consistent spacing between items, switch a row to space between so the logo and nav sit at opposite ends, and apply fill container so buttons resize cleanly.

The AI drafts the arrangement, but you are the one who makes it responsive and tidy. If you want a fuller picture of what these tools can and cannot do, I have written more about the Figma AI features that speed up design work.

Where Human Judgement Still Wins

AI does not understand your pitch narrative, your brand voice, or the one message the investor needs to remember. Spacing that feels calm and confident is a judgement call, not a generated output.

For lean teams and solo founders, this pairing is a real productivity lever, and it fits Singapore’s wider push toward digital upskilling through SkillsFuture. The point is not to design less; it is to spend your time on the decisions that matter. If you’d rather build that foundation with an instructor than piece it together solo, register for the WSQ What The Figma (WTF) course and get there faster.

So experiment freely, but review every AI output before you ship. A generated layout with sloppy Auto Layout underneath will fall apart the moment you resize it in front of an audience.

Common Auto Layout Mistakes and How to Fix Them

Everyone makes these mistakes when they start with Figma Auto Layout, so take a breath. I made every single one of them in my first month, and each one taught me something.

The trick is learning to spot the symptoms early, before your file reaches a developer and things fall apart.

Symptoms and Causes of Collapsing Layouts

Picture a marketing executive at a local fintech, let’s call her Priya, who builds a beautiful landing page mockup and hands it over.

The developer imports it, resizes the browser, and the whole hero section collapses into a squashed mess. What went wrong?

Usually it is one of a few classic traps:

• Setting everything to Fixed width so nothing responds when the frame changes size.
• Forgetting to set Fill on a full-width call-to-action button, so it stays stubbornly narrow.
• Over-nesting frames, wrapping a single button in three redundant Auto Layout containers.
• Leaving layers named Frame 47 and Group 12, which makes handoff a guessing game.

The fix for collapsing layouts is almost always about resizing behaviour. Select your text and content elements and switch them to Fill container or Hug contents rather than Fixed, so the design flexes instead of breaking.

Fixing Inconsistent Spacing Across a File

Messy spacing is the second thing I always catch in beginner files. One card uses 16 pixels of padding, the next uses 20, and the gaps between sections wander all over the place.

The cause is usually eyeballing numbers instead of committing to a scale. Pick a spacing system early, something like 4, 8, 16, 24, 32, and apply those values consistently in your Auto Layout gap and padding fields.

When you notice the same value repeating, save it as a variable or a style so future edits stay tidy. This single habit removes hours of cleanup later.

Naming and Organising For Clean Developer Handoff

Clean naming is where good design becomes buildable design, and it is a big part of understanding the difference between UI and UX in practice.

Name your layers as a developer would read them: PrimaryButton, HeroHeading, PricingCard. Group related elements logically and delete stray empty frames before you share.

Before you hand anything over, run through this quick pre-handoff checklist:

1. Every element uses Fill, Hug, or Fixed on purpose, not by accident.
2. Full-width buttons and inputs are set to Fill container.
3. Spacing follows one consistent scale across the file.
4. Layers and frames have clear, meaningful names.
5. Empty and duplicate frames are deleted.

None of this comes naturally at first. The habit forms through structured, repeated practice, so keep building small layouts and checking your work against this list until it becomes second nature.

Conclusion

When we started, you were probably nudging elements pixel by pixel, then redoing all that work the moment a button label got longer. That manual grind is exactly what Figma Auto Layout frees you from.

Along the way, you learned how padding and spacing keep your components breathing evenly, how resizing modes like hug and fill make frames respond to their content, and how nesting Auto Layout inside Auto Layout lets you build entire cards, navbars, and lists that flex on their own.

We also connected all of it to components, so a single change ripples cleanly across your design and lands in a tidy, handoff-ready state for your developer.

Here is the honest takeaway: Auto Layout is not a nice-to-have. It is one specific, high-demand skill that pays off on the very next real project you touch, whether that is a fintech dashboard or a hawker ordering app.

So do not just read about it. Open Figma right now, pick one screen you have already designed, and rebuild it from scratch using Auto Layout. Feel the difference when you resize the frame, and everything simply behaves.

If you want to go further with guided, hands-on practice, this is the natural next step. Deepen these skills through our WSQ What The Figma (WTF) Course, a practical, SkillsFuture-supported Figma training here in Singapore where you build real interfaces alongside an instructor.

You already have the fundamentals. Now go practise them, and let Auto Layout do the heavy lifting so you can design faster and with far less frustration.