Auto layout that scales: a Figma deep dive

Most Figma files break the moment a real engineer or another designer opens them. Spacing is inconsistent. A button that looks fine in the mock falls apart when the label gets longer. A card that scales on one screen explodes on the next. The fix is the same in every case: auto layout, used the way Figma intended.

Treat every group like a component

The first rule is that you almost never want a plain group. The moment two or more elements sit next to each other in any meaningful way, wrap them in an auto layout frame. Headers and labels. Icon and text. Tags in a row. Auto layout is not a special tool for advanced users, it is the default container for serious work.

Decide the resize behaviour on day one

Every auto layout frame has three behaviours on each axis: hug contents, fixed, or fill container. Getting these right at the start saves you hours of cleanup later. The general pattern is:

• Buttons hug horizontally, fixed height. The label decides the width.
• Cards fill horizontally, hug vertically. Width comes from the parent, height from the content.
• Full page sections fill on both axes. They follow the viewport.

Spacing is a system, not a decision

Pick a spacing scale and stop making decisions about gaps. Four, eight, twelve, sixteen, twenty four, thirty two, forty eight. Every gap in your file should be one of those numbers. Save them as variables so an entire system can be reskinned in seconds.

Padding is the same. A card has the same internal padding everywhere. A button has the same internal padding everywhere. When everything follows the same scale, your designs look professional even before anyone notices why.

Variants do half the engineering for you

Combine auto layout with component variants and you can hand off a design system that an engineer can build with minimal interpretation. A button component with primary, secondary, and ghost variants, each with size and state properties, is a contract. The engineer reads it and ships it.

The 30 minute audit

Open your most recent file. Find a card or section that took you ages to align. Wrap it in auto layout. Set the directions. Apply the spacing scale. Convert it to a component. Now duplicate it and try to break it by editing the text inside. If it stays clean, you have arrived. If it breaks, you have learned something specific to fix. Repeat across one or two more components per week and your craft compounds.