Learn auto-layout, ignore the rest of Figma

You do not need to learn Figma. You need to learn one feature of it, for one reason: it is the feature your designer uses to express layout, and Figma is actively rewriting it to behave like CSS.

That is not an analogy somebody in a blog post made. It is Figma’s own stated intent. Their documentation article is titled “Use auto layout with CSS Flexbox in mind”, and it opens: “This article covers changes coming to auto layout as part of an update that brings it closer in line with how CSS flexbox behaves.”

So the hour is worth spending, because you are not learning a design tool’s proprietary layout model. You are watching one converge on the one you already know.

What they actually changed, in their words

The convergence is specific and documented. A few of the changes, quoted:

On padding and sizing: “This matches how a border-box element works in CSS. An element with width: 50px and padding: 30px is automatically clamped to 60px.”

On strokes: “An inside stroke behaves like a border and is included in layout. A center or outside stroke behaves like an outline and is excluded from layout, even when configured on individual edges.”

And the one straight property mapping they publish: “The auto spacing options Between, Evenly, and Around match CSS property values space-between, space-evenly, and space-around respectively.”

Read that list as a translation table. Padding is border-box. Inside stroke is border, outside stroke is outline. Auto spacing is justify-content. You already know all of this.

FIGMA AUTO LAYOUT              WHAT IT IS

 direction, horizontal          flex-direction: row / column
   or vertical
 direction, grid                display: grid    <- not flexbox at all
 gap                            gap
 padding                        padding, with border-box clamping
 auto spacing: Between          justify-content: space-between
 auto spacing: Evenly           justify-content: space-evenly
 auto spacing: Around           justify-content: space-around
 inside stroke                  border, in layout
 outside / center stroke        outline, out of layout
 fill container                 flex: 1
 hug contents                   width: fit-content

Two corrections to the usual advice

Auto layout is three flows, not one. Figma’s documentation is explicit that you choose between vertical, horizontal and grid. So a third of the feature is CSS Grid, not flexbox, and the common shorthand auto layout is flexbox will mislead you on exactly the layouts that are hardest to hand back to a designer.

And the version matters, right now. Figma states: “Starting July 2026, the updated version of auto layout will become the default for newly created frames. You can switch between Layout versions from the Auto layout settings modal until January 2027.”

Which means legacy frames keep the old, non-CSS behaviour until somebody updates them. If a file does not behave the way this chapter describes, check its layout version before you conclude you have misunderstood it. And note the date: this is the single most perishable fact in this book, and that January deadline is a few months away.

The move

Learn auto layout as a dialect of the box model you already speak, and let a designer own everything else in the tool.

Everything else is genuinely not your job. Components, variants, prototyping links, plugins, the whole library system: these are a designer’s craft and you will be bad at them, slowly. Auto layout is the one place your existing knowledge transfers directly, and it is the one place a mismatch between the file and the build actually costs the team.

What it costs

Figma is not free for what you will want to do. Viewing and inspecting a file is available on a free seat, but editing needs a paid one, and that is a per-seat cost your team may not want to spend on a developer who edits three times a year. Check before you promise anyone you will fix the file yourself.

The mapping is a good approximation and not an isomorphism. Absolute positioning, constraints and min/max widths behave in ways that will surprise you, and a designer who has never written CSS can produce an auto layout that has no clean equivalent. When that happens the answer is a conversation, not a heroic reimplementation.

And this chapter will age faster than any other in the book. The convergence is mid-flight. Some of what is quoted above will be the default and unremarkable by the time you read it, and the version switch will be gone.

Try this week

Open the most recent file a designer handed you and select one frame. If it has auto layout, read its settings and write the equivalent CSS next to it, by hand, before you look at Dev Mode.

Direction, gap, padding, alignment. Four properties, two minutes.

You are checking one thing: whether the layout in the file is the layout you were about to build. In my experience it is not, roughly half the time, and finding that out in Figma costs two minutes instead of a review round.