Figma Auto-Layout to CSS Flexbox — Complete Mapping Reference
Every Figma auto-layout property maps directly to a CSS Flexbox property. CodeFlow Lab extracts and converts all of them automatically — gap, padding, direction, alignment, and sizing — into Tailwind CSS utilities.
Figma Auto-Layout Is a Flexbox Model
Figma auto-layout was designed to mirror CSS Flexbox's mental model. When you set a frame to auto-layout, you're making the same decisions a CSS developer makes: direction (row or column), gap between items, padding inside the container, how children should be aligned on the primary and cross axis, and whether children should grow to fill available space or shrink to fit their content.
This direct correspondence means that a high-fidelity conversion from Figma auto-layout to CSS Flexbox is possible without heuristics or approximation. Every auto-layout property maps to a specific CSS property with a specific value. CodeFlow Lab exploits this correspondence to produce generated layouts that are structurally correct, not just visually similar.
The challenge is not the mapping — it's the extraction: reading Figma's API correctly, handling nested auto-layout frames in the right order, resolving constraint conflicts (e.g., a child with fill-container inside a parent with hug-contents), and normalizing pixel values to Tailwind's 4px spacing scale without visual drift.
Direction → flex-direction
Horizontal auto-layout frames become flex-row; vertical frames become flex-col.
Gap → gap utility
Figma itemSpacing is normalized to the nearest Tailwind gap-* value.
Alignment → justify + align
Primary and cross-axis alignment map to justify-content and align-items utilities.
Figma Auto-Layout → CSS → Tailwind Mapping Reference
| Figma Auto-Layout | CSS | Tailwind |
|---|---|---|
| Direction: Horizontal | flex-direction: row | flex-row |
| Direction: Vertical | flex-direction: column | flex-col |
| Gap: 16px | gap: 1rem | gap-4 |
| Padding: 8px 16px | padding: 0.5rem 1rem | py-2 px-4 |
| Align: Start / Start | justify-content: flex-start; align-items: flex-start | justify-start items-start |
| Align: Center / Center | justify-content: center; align-items: center | justify-center items-center |
| Align: Space Between / Top | justify-content: space-between; align-items: flex-start | justify-between items-start |
| Width: Fill Container | flex: 1 1 0% | flex-1 |
| Width: Hug Contents | width: max-content | (no explicit width) |
| Width: Fixed 240px | width: 15rem | w-60 |
Handling Nested Auto-Layout Frames
Real Figma designs use deeply nested auto-layout frames — a card component might have a vertical outer frame containing a horizontal header frame and a vertical body frame, each with its own gap and padding values.
CodeFlow Lab maps each Figma frame in the component hierarchy to a corresponding div in the generated React component, preserving the nesting depth and applying the correct flex properties at each level. A three-level nested auto-layout becomes a three-level nested div structure with correct flex classes at each level.
The IR validation layer catches layout conflicts before code generation: a child frame marked 'fill container width' inside a parent with 'hug contents width' would collapse to zero width in CSS, so CodeFlow Lab reports this as a layout warning and applies a safe default (the child gets a defined min-width) rather than generating broken layout code.
Frequently Asked Questions
How does Figma auto-layout map to CSS?
Figma auto-layout is a flexbox model. An auto-layout frame with direction 'horizontal' maps to display: flex; flex-direction: row. A frame with direction 'vertical' maps to display: flex; flex-direction: column. Gap between children maps to CSS gap. Primary-axis alignment (Start, Center, End, Space Between) maps to justify-content. Counter-axis alignment (Top, Center, Bottom) maps to align-items. Padding maps to the corresponding CSS padding values.
What CSS properties correspond to Figma auto-layout settings?
Figma auto-layout → CSS: Direction (Horizontal/Vertical) → flex-direction (row/column). Gap → gap (or column-gap / row-gap). Padding → padding or individual padding sides. Primary axis alignment: Start → justify-content: flex-start; Center → justify-content: center; End → justify-content: flex-end; Space Between → justify-content: space-between. Counter axis alignment: Top → align-items: flex-start; Center → align-items: center; Bottom → align-items: flex-end. Hug contents → width/height: max-content or fit-content. Fill container → flex: 1 or width: 100%.
Does CodeFlow Lab generate Flexbox or CSS Grid from Figma?
CodeFlow Lab generates Flexbox (via Tailwind CSS flex utilities) for all auto-layout frames, which is the direct mapping from Figma's layout model. CSS Grid is generated when a frame is detected to have a multi-column structure with equal column widths — typically identified from Figma frames with grid layout applied or from frames with multiple children at equal horizontal spacing. Grid generation uses Tailwind's grid-cols-* utilities.
How are gap and padding values extracted from Figma?
Gap values are read from Figma's itemSpacing property on auto-layout frames. Padding is read from paddingTop, paddingRight, paddingBottom, and paddingLeft. These pixel values are normalized to the nearest Tailwind spacing value (gap-4 for 16px, p-6 for 24px, etc.). For values that don't have exact Tailwind equivalents (e.g., 14px), CodeFlow Lab generates the closest Tailwind class and flags the rounding in the generation report if the deviation is more than 2px.
What happens to nested auto-layout frames?
Nested auto-layout frames generate nested flex containers. Each Figma frame in the component hierarchy becomes a div with its own flex properties in the generated React component. The nesting depth follows the Figma layer structure exactly. CodeFlow Lab's IR validates that nested layouts don't produce conflicting alignment declarations (e.g., a child with fill-container inside a parent with hug-contents, which would result in zero size).
How are fixed-width and fixed-height elements handled?
Figma elements with fixed width/height constraints generate explicit width and height values in Tailwind (w-40 for 160px, h-12 for 48px, etc.). Elements with 'Fill container' width generate flex-1 or w-full depending on context. Elements with 'Hug contents' generate no explicit width/height (natural content sizing). Percentage-based sizing in Figma generates Tailwind percentage utilities (w-1/2, w-full, etc.).