Figma6 min read
From Flexbox to Figma: How Flexbox Inspired Auto Layout
Auto Layout didn't come from nowhere. Understanding its CSS roots makes you dramatically better at using it, and at talking to engineers.
Chukwuemeka IheonyeProduct Designer
I learned Flexbox before I learned Auto Layout, mostly out of stubbornness. I wanted to know why engineers kept saying my designs were “hard to build”. Then Figma shipped Auto Layout in late 2019 and I had the strangest feeling of déjà vu. The panel on the right was Flexbox, wearing a designer’s jacket.
That’s not a criticism. It’s the best thing about it. When your design tool thinks the way the browser thinks, the gap between what you draw and what ships gets very small.
Same idea, different names
Flexbox lays children out along one axis, with spacing and alignment rules, and lets items grow or shrink to fit. Auto Layout does exactly the same thing. Once you see the mapping, you can’t unsee it:
| Figma | CSS |
|---|---|
| Auto layout on | display: flex |
| Horizontal / Vertical | flex-direction: row / column |
| Spacing between items | gap |
| Padding | padding |
| Alignment | align-items + justify-content |
| Hug contents | width: fit-content (the item sizes to its content) |
| Fill container | flex: 1 (or align-self: stretch on the cross axis) |
| Fixed width | width: 240px; flex-shrink: 0 |
| Wrap | flex-wrap: wrap |
Play with it
Change the settings below. The preview is real CSS, and the panels show what you’d write in code and what you’d set in Figma. Same container, two vocabularies.
CSS
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
Figma
Auto layout: on
Direction: horizontal
Spacing between: 16
Alignment: center
Why this makes you a better designer
Your designs survive real content
A static frame looks perfect with the copy you typed. Auto Layout frames reflow when the button label is translated into German or the user’s name is 40 characters long. That’s the browser’s behaviour, and now your file has it too.
Handoff becomes a conversation, not a translation
When I say “this is a vertical stack, 16 gap, 24 padding, children fill the width”, an engineer can write it almost word for word:
card.css
.card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
}
.card > * {
align-self: stretch; /* Fill container */
}You stop fighting the tool
Most Auto Layout frustration comes from nesting. In CSS, nobody builds a page from one giant flex container; you nest small ones. Treat frames the same way: a row inside a column inside a card. Each one does one job.
Figma didn’t invent this way of thinking, and that’s exactly why it works. The best design tools borrow from the medium we’re designing for. Learn a little of the medium, and the tool starts to make a lot more sense.