HTML to Figma with Auto Layout: measured, not assumed
Most HTML importers either wrap everything in Auto Layout or nothing at all. html2figma adds it only where it can prove the result matches the page the browser drew.
html2figma turns HTML into Figma Auto Layout only where a frame's children genuinely form a uniform stack. It proposes the Auto Layout, replays it, and keeps it only if every child lands within 1px of where the browser actually rendered it. Anything that fails the check keeps its real, measured coordinates, so the import never drifts from the page.
Why not just turn every flex box into Auto Layout?
Because CSS and Figma Auto Layout aren't the same model. A converter that reads display: flex and guesses the Figma equivalent will be right on simple rows and quietly wrong on the rest. The import looks fine at a glance, and then a card is 3px lower than on the live site and nobody knows why.
html2figma starts from the other end. It renders the page in a real browser engine and reads every element's rendered bounding box and computed style. Every element is first placed by that rendered geometry, which is why flex, grid, floats and absolute positioning all survive the import: whatever the browser computed is what you get. Auto Layout is then an upgrade applied on top, only where it changes nothing visually.
How the replay check works
- Propose. For each frame whose children genuinely form a uniform stack, the plugin proposes an Auto Layout version of it.
- Replay. The proposed layout is laid out again, so the plugin can see where each child would end up.
- Compare. Each child's replayed position is compared with its measured, rendered position. If every child lands within 1px, Auto Layout stays. If any child misses, the frame keeps the exact coordinates the browser produced.
The result is a mixed tree: Auto Layout where your page really is a stack, fixed positions where it isn't. That's deliberate. A frame that has Auto Layout in Figma is one you can trust to behave like the page when you add or remove an item.
Layers that stay put on screen, such as a fixed header, become Figma "fix position when scrolling" layers. They don't count towards Auto Layout: the page still stacks, and they float above it.
Auto Layout across breakpoints
When you tick several viewports, each one is rendered separately with the page's media queries applied to that width, and the check runs on each result. A flex row that stacks on mobile imports as a vertical Auto Layout frame there and a horizontal one on desktop. The responsive website guide covers that workflow end to end.
Getting more Auto Layout out of an import
- Import the real, styled page. If styles are generated at runtime, as with the Tailwind CDN build, the page imports unstyled and its stacks disappear with them. The AI HTML guide explains the fix.
- Save the page after it has finished loading. Content that loads late changes the geometry the check measures. Follow the save steps in the website import guide.
- Read a frame without Auto Layout as information. It means the page's children don't form a uniform stack, or the replay missed by more than 1px. The layers are still where the browser put them.
On top of Auto Layout, repeated blocks such as cards and list rows are rebuilt as one component with instances, and colours used more than once become Variables in a new collection named after the import. Nothing already in your file is read, reused or modified.
Where it falls short today
As of November 2026:
- The page's JavaScript never runs. Pages that generate their CSS at runtime, such as the Tailwind CDN build, import unstyled. The plugin warns before importing; save the page after it has rendered, or use a build with compiled CSS.
- Direct URL import isn't available yet. Save the page as a file first, then drop it.
- Hover states and transitions aren't imported yet. Each frame is a static, editable snapshot.
- The conversion currently runs one way. Editing the Figma file doesn't change the HTML.
HTML to Figma Auto Layout: common questions
Does html2figma convert flexbox to Auto Layout?
Where the children genuinely form a uniform stack, yes. The plugin proposes Auto Layout, replays it and keeps it only if every child lands within 1px of its rendered position. Otherwise the layers keep their measured coordinates.
Why did some of my frames import without Auto Layout?
Either the children don't form a uniform stack, or the replayed Auto Layout put at least one child more than 1px away from where the browser rendered it. Keeping the real coordinates means the import still matches the page exactly.
Will grid, floats and absolute positioning break the import?
No. Every element is placed by the geometry the browser rendered, so flex, grid, floats and absolute positioning all survive. Auto Layout is only added on top where it reproduces that geometry.
Do fixed headers affect Auto Layout?
No. Layers that stay put on screen become Figma "fix position when scrolling" layers and don't count towards Auto Layout. The page still stacks underneath them.
Does mobile get different Auto Layout from desktop?
Yes, when the page's CSS says so. Each ticked viewport is rendered with its own media queries, so a row that stacks on mobile becomes a vertical Auto Layout frame there and a horizontal one on desktop.
Is it free?
Importing is free and unlimited today, with no account. Features that don't exist yet, such as direct URL import and batch import, are earmarked for a future paid tier.
html2figma is a free Figma plugin that converts HTML and CSS into editable Figma layers. If a page you expected to stack imports without Auto Layout, send it to me. Those cases are what I look at first.