By Mehdi HassanWhat is Figma auto layout and why does it matter for code?
Figma auto layout is a property you add to a frame so its children arrange themselves by rules instead of fixed coordinates. Add a child and the frame grows. Change a label and the button resizes. That behavior is the same idea as CSS flexbox and grid, which is why auto layout is the single most useful habit for designs that will be built.
Most tutorials stop at how to click the buttons. The gap they leave is the translation: what each setting becomes in CSS, and which settings have no clean equivalent. That translation is where a design-to-development handoff gains or loses detail, because a developer who reads a frame of absolute positions has to guess the rules you had in mind.
How does Figma auto layout map to CSS flexbox?
A horizontal or vertical auto layout frame maps to a flex container, and its settings map almost one to one. Here's the translation we use when we build from our own files.
Figma auto layout setting | CSS equivalent | Tailwind equivalent |
|---|---|---|
Direction: horizontal | display: flex; flex-direction: row | flex flex-row |
Direction: vertical | display: flex; flex-direction: column | flex flex-col |
Wrap | flex-wrap: wrap, plus row-gap for vertical spacing | flex-wrap gap-y-4 |
Gap between items | gap | gap-4 |
Spacing mode: auto | justify-content: space-between | justify-between |
Padding | padding (per side when values differ) | p-6, px-6, py-4 |
Alignment (9-point grid) | justify-content on the main axis, align-items on the cross axis | justify-start, items-center and similar |
Text baseline alignment | align-items: baseline | items-baseline |
Absolute position on a child | position: absolute inside a position: relative parent | absolute inside relative |
Strokes included in layout | box-sizing: border-box | the default in Tailwind |
Alignment is the setting that trips people most. Figma shows one nine-point control, but CSS splits it across two properties that swap meaning when direction changes. In a horizontal frame, left-to-right is justify-content. In a vertical frame, top-to-bottom is. Developers who know this read your alignment correctly first time.
What do hug, fill and fixed mean in CSS terms?
Hug, fill and fixed are resizing rules, and each one has a direct CSS meaning. Hug sizes a layer to its content, fill makes it take the remaining space, and fixed gives it an exact size. Set them deliberately on every layer, on both axes, because the defaults are often wrong for responsive work.
Figma resizing | On the main axis | On the cross axis |
|---|---|---|
Hug contents | width: fit-content or flex: none | Sized to content, align-self as set |
Fill container | flex: 1 1 0, so it grows and shrinks | align-self: stretch |
Fixed width or height | width or height in px, flex-shrink: 0 | An exact size |
Min and max width | min-width and max-width | min-width and max-width |
Two children set to fill split the space evenly, exactly like two flex: 1 items. A text layer set to fill wraps when the container narrows, while a text layer set to hug never wraps, which is why long button labels sometimes break layouts in the build but not in Figma. Choose fill for paragraphs and hug for labels.
When should you use grid auto layout instead of flexbox?
Use grid auto layout when items must line up in two directions at once, such as card grids, pricing tables and dashboard tiles. Figma's grid flow arranges children into rows and columns with column and row gaps, which maps to CSS display: grid with grid-template-columns. Flex-style auto layout only controls one direction, so rows of cards drift out of line when content heights differ.
A practical rule: if you would describe the layout as "three columns on desktop", it's a grid. If you'd describe it as "icon, label, then push the arrow to the right", it's flex. Grid features in Figma are newer than flex-style auto layout and still change, so check Figma's current help docs for which grid options your plan and file support before you build a library on them.
How do you make Figma responsive design match the build?
Figma responsive design comes from resizing rules, not from drawing every breakpoint. Build each component with fill and min or max widths, test it by dragging the frame narrower and wider, and only draw separate breakpoint frames where the layout genuinely changes, such as a sidebar that becomes a drawer.
Build from the inside out
Wrap the smallest groups first (icon plus label), then the card, then the section. Each level gets its own auto layout frame.
Set resizing on both axes
For every layer, decide hug, fill or fixed horizontally and vertically. Leave nothing on a default you didn't choose.
Add min and max widths
Give cards a minimum width and text blocks a maximum width, so the component behaves at sizes you didn't draw.
Stress-test with real content
Paste in the longest real label, a missing image and a translated string. Fix what breaks before handoff.
Resize the parent frame
Drag it from phone to desktop width. Anything that overlaps or overflows will do the same in the browser.
For breakpoint changes that resizing can't express, write them as rules instead of duplicating frames, using the same note format we describe in annotating designs for developers. It keeps the file small and the intent explicit.
What about constraints and frames without auto layout?
Constraints are the older system, and they still matter for children of frames that don't use auto layout. Left, right, center and scale constraints map roughly to absolute positioning with left, right or percentage values. They're fine for illustrations and decorative layers, but a page built mostly on constraints gives developers coordinates instead of rules.
Hypothetical example: translating a pricing card
For example, suppose a pricing card is a vertical auto layout frame with 24 px padding and a 16 px gap, set to fill width with a minimum width of 280 px. Inside it, the header row is horizontal with spacing mode auto, holding the plan name (hug) and a badge (hug). The feature list is vertical with an 8 px gap, and the button is set to fill width.
In code, that reads as a flex column with padding and gap, flex: 1 and min-width on the card, justify-content: space-between on the header, and width: 100% on the button. Three cards in a grid auto layout parent become a CSS grid with three columns that drops to one on small screens. Nothing in the build needs a guess.
How does auto layout fit into a component library?
Auto layout is what makes components reusable. A button whose padding and gap are rules can take any label, icon or size variant without manual nudging, and its properties can map to the same props in code. Pair it with variables for spacing and color, and the jump from Figma to Tailwind gets shorter.
Next, read how to structure a component library in Figma, how to sync Figma variables with Tailwind, and what Figma Dev Mode shows developers about your auto layout settings. If you'd rather start from files built this way, our $3,000 brand and design sprint delivers Figma components laid out with the same rules we build with.
