CSS Grid to Figma is the process of converting CSS Grid and CSS Flexbox layout structures into native Figma Auto Layout frames — preserving spacing, alignment, and visual structure from your code without manual recreation. The html2design plugin reads computed CSS positions and sizes, producing accurately positioned frames that serve as a starting point for applying Figma Auto Layout.
Why CSS Layout Conversion Matters
Modern web UIs are built almost entirely on CSS Grid and Flexbox. When you need to bring those layouts into Figma — for documentation, redesign, or design-system alignment — you face a fundamental translation problem: CSS layout is dynamic and computed at runtime, while Figma frames are static objects that need explicit sizing.
The manual path requires recreating every container, gap, and alignment value by hand. For a card grid with 12 items and 3 breakpoints, that's dozens of measurements to get right. A single component can take 15–30 minutes to accurately translate.
html2design solves the first half of this problem: it reads the browser's computed layout values and creates a Figma frame that looks exactly like your CSS layout. The second half — converting fixed-position frames into true Figma Auto Layout — takes 2–5 minutes of manual work per component, versus recreating from scratch.
CSS Grid vs. Flexbox vs. Figma Auto Layout
Before diving into the workflow, it helps to understand how these layout systems map to each other:
| CSS Concept | Figma Equivalent | Notes |
|---|---|---|
display: flex; flex-direction: row |
Auto Layout → Horizontal | Direct mapping |
display: flex; flex-direction: column |
Auto Layout → Vertical | Direct mapping |
flex-wrap: wrap |
Auto Layout → Wrap | Figma 2023+ |
gap / row-gap / column-gap |
Auto Layout gap | Set manually after import |
justify-content |
Primary axis alignment | Space-between supported |
align-items |
Counter axis alignment | Direct mapping |
flex: 1 / flex-grow |
Fill container (width/height) | Set per child |
display: grid; grid-template-columns |
Auto Layout Wrap (approximation) | Partial; no grid tracks |
padding |
Auto Layout padding | Directly preserved |
Grid limitation: CSS Grid is 2-dimensional and has no direct Figma equivalent. html2design approximates Grid layouts with nested positioned frames. For simple equal-column grids, you can convert these to Auto Layout Wrap. For complex named areas or asymmetric tracks, the approximation will need manual work.
Prerequisites
- A Figma account (free or paid)
- The html2design plugin installed and active
- A Flexbox or Grid component accessible in your browser
- Your CSS values open in DevTools (for reference when applying Auto Layout)
Step-by-Step: CSS Grid & Flexbox to Figma Auto Layout
Inspect and note your layout values
Open DevTools and select the layout container. In the Computed panel (or Layout panel in Chrome), note:
- display — flex or grid
- flex-direction — row or column
- gap / row-gap / column-gap — spacing between items
- padding — inner spacing of the container
- align-items and justify-content — alignment values
Keep DevTools open — you'll reference these values when applying Auto Layout in Figma.
Copy the container's outerHTML
Right-click the layout container element → Copy → Copy outerHTML. Make sure to copy from the flex/grid container, not a child element — the plugin needs the full parent-children relationship to reconstruct the layout structure.
Paste into html2design and convert
Open html2design in Figma (Plugins → html2design). Paste your HTML and click Convert. The plugin places a frame on the canvas matching the computed layout — positions and sizes accurately reflect what you saw in the browser.
For Flexbox containers, children appear as adjacent frames. For CSS Grid, children appear as absolutely positioned frames within the container bounds.
Identify layout containers in the layers panel
In Figma's layers panel, expand the generated frame. The container frame is at the top level. Its direct children are the flex/grid items. Rename these for clarity before applying Auto Layout — it makes the next step much easier.
Example naming: Card Grid (container), Card / 01, Card / 02, Card / 03 (children).
Apply Figma Auto Layout to the container
Select the container frame. Press Shift+A to apply Auto Layout. In the Design panel, configure:
- Direction: Horizontal for
flex-direction: row; Vertical forflex-direction: column - Gap: Match the
gapvalue from your CSS (e.g., 24px) - Padding: Match all four padding values from your CSS
- Alignment: Match
align-items(counter axis) andjustify-content(primary axis) - Wrap: Enable if your layout used
flex-wrap: wrapor you want wrapping behavior
Set child sizing modes
Select each child frame inside the Auto Layout container. Set sizing to match the CSS behavior:
- Fill container — for
flex: 1orflex-grow: 1children - Hug contents — for
width: autoor content-sized elements - Fixed — for elements with explicit pixel widths (
width: 200px)
After setting child sizing, the Auto Layout container will resize correctly when you resize it or add/remove children.
Handling CSS Grid Specifically
CSS Grid is 2-dimensional — rows and columns are defined simultaneously using grid-template-columns and grid-template-rows. Figma has no native equivalent for two-dimensional grid tracks. Here's how to handle common grid patterns:
Equal-column grids (e.g., repeat(3, 1fr))
After importing with html2design, select the container and apply Auto Layout with Wrap enabled. Set the gap to match your CSS column-gap. Set each child to a fixed width matching the imported width. The result behaves like a responsive equal-column grid in Figma.
Asymmetric grids (e.g., sidebar + main content)
Import the full layout, then manually place the main and sidebar child frames side-by-side in an Auto Layout horizontal container. Set the sidebar to a fixed width and the main content to Fill container. This replicates grid-template-columns: 280px 1fr in Figma.
Named grid areas
html2design positions each grid area as a frame using computed top/left/width/height values. Named grid areas don't map directly to Figma concepts — treat the import as a visual reference and rebuild the layout using nested Auto Layout containers for true Figma responsiveness.
Pro tip: Use Figma's Layout Grid feature (separate from Auto Layout) to overlay a column grid on your frame for alignment reference while you work. This mimics the visual guide that CSS Grid provides during design.
Common Conversion Patterns
Navigation bar (Flexbox row with space-between)
Import the nav element. Apply horizontal Auto Layout with Space between primary axis alignment. This replicates justify-content: space-between. Set logo to Hug, nav links group to Hug, and CTA button to Hug.
Card grid (Flexbox wrap or CSS Grid)
Import the grid container. Apply horizontal Auto Layout with Wrap. Set each card to a fixed width matching the import. Enable wrap with the column gap from your CSS. Cards will wrap to the next row as the frame narrows.
Sidebar layout (CSS Grid two-column)
After import, create a parent horizontal Auto Layout frame. Place the sidebar child (fixed width) and main content child (Fill) inside it. Match the gap to your CSS column-gap.
Form stack (Flexbox column)
Import the form. Apply vertical Auto Layout to the form element. Set gap to match the CSS row-gap. Each form field should be set to Fill container width for full-width inputs.
Frequently Asked Questions
Does html2design convert CSS Grid to Figma Auto Layout automatically?
No — html2design imports CSS Grid as accurately positioned frames. Applying Figma Auto Layout is a manual step. This is intentional: automatic layout conversion would lose precision in complex grids. The import gives you a pixel-accurate reference to work from.
What's the difference between CSS Flexbox and Figma Auto Layout?
Conceptually very similar: both distribute space along one axis, support wrapping, gaps, alignment, and padding. The key differences are that Figma Auto Layout has three sizing modes per child (fill, hug, fixed) vs. CSS's flex-grow/shrink/basis model, and CSS Grid (2D) has no direct Figma equivalent.
Can I convert a full page grid layout to Figma?
Yes, but work section by section. Full-page imports with many nested grids produce complex layer trees. Import the top-level layout first, then import individual grid sections separately and assemble them in Figma for a cleaner file structure.
Does Figma Auto Layout support CSS Grid gap?
Figma Auto Layout has a single gap value. For CSS Grid with equal row-gap and column-gap, this maps directly. For different row/column gaps, enable Wrap mode and set both horizontal and vertical gap values — Figma supports separate row and column gaps in Wrap mode.
Key Takeaways
- ✓ html2design converts CSS Flexbox and CSS Grid into accurately positioned Figma frames — not Auto Layout (that step is manual)
- ✓ Applying Figma Auto Layout manually after import takes 2–5 minutes vs. 15–30 minutes recreating from scratch
- ✓ Flexbox maps cleanly to Figma Auto Layout (horizontal/vertical/wrap modes); CSS Grid requires more manual work
- ✓ Use Fill/Hug/Fixed sizing per child to replicate
flex-grow,width: auto, and fixed-width behavior - ✓ Work component by component (not full-page) for manageable layer trees and cleaner Figma files
Related Articles
The Complete Guide to HTML to Figma Conversion (2026) →
The pillar guide covering every framework, every method, and every use case — all in one place.
How to Convert HTML to Figma: A Developer's Guide →
Step-by-step walkthrough of the html2design plugin workflow from DevTools to editable Figma layers.
Responsive Design to Figma: Converting Breakpoints to Variants →
Capture mobile, tablet, and desktop layouts separately and build Figma Variants for each breakpoint.
Tailwind to Figma: Build a Design System from Your Tailwind Components →
Extract Tailwind design tokens as Figma Variables and convert your component library to native Figma layers.
Use Case: Developer Handoff →
Reverse engineer shipped layouts back into editable Figma files for design-dev alignment.
Design System Migration: From Code to Figma Components →
A complete workflow for extracting design tokens and layout components into a native Figma library.
Try it now
Import your first layout in 30 seconds
Paste any Flexbox or Grid component into html2design and get accurately positioned Figma frames instantly.
Install from Figma Community →$12/mo · $96/yr · Cancel anytime