Figma to HTML: what actually survives the conversion
Every converter promises pixel-perfect. Ours does not, and says so in its own source code. Here is what genuinely comes through from a Figma frame — layout, type, fills, corners, shadows — what gets approximated, and why a screenshot can never become editable text.
There are a lot of tools that turn Figma into HTML, and they make the same promise in the same words: pixel-perfect. It is a strange thing to promise, and an easy one to check — paste a design in, then try to change the heading.
This is what our own Figma conversion does and does not do. It is worth reading even if you never use it, because the constraints are not ours; they are Figma's file format, and they apply to every tool in this category.
A picture is not data
The first fork is the one people get wrong, and it costs the most.
You can paste a screenshot of a Figma frame. That takes two seconds and gives you one image. It looks right and nothing in it can be edited — not the heading, not the colour, not a single word — because a picture of text is not text.
To get real elements, a tool needs Figma's data for that frame, and Figma only hands that out through its API.
So there are two real routes: paste a Figma API response you already have, or paste a Figma link and let the tool fetch it, which needs an access token. Both give you elements. Neither is magic, and both are limited by what the API actually describes.
And the honest third option: for a lot of work, paste the picture and build only the parts you need to edit on top of it. A hero you will never touch does not need to be forty editable nodes.
What survives
Layout, sizing, fills, text, corners, strokes and shadows come through. Type comes through properly — family, weight, size, line height, letter spacing, alignment, case — which matters more than it sounds, because typography is most of what makes a converted page feel wrong.
Two things are deliberately approximated. Image fills become a placeholder box you then fill with the real photograph, and vector paths are flattened to a solid fill. Those are the two places where Figma's description of a thing and a browser's idea of that thing genuinely diverge, and pretending otherwise produces markup that is technically faithful and practically unusable.
The one property that decides everything
Auto Layout.
A frame that uses Auto Layout converts to flexbox, which means it is responsive and it is editable — you can add an item and the row behaves. A free-form frame converts to absolute positions measured from its parent, which reproduces the design exactly and does not adapt to anything.
Both are correct conversions of what you drew. But if you are designing something that will become a website, the single highest-value thing you can do in Figma is use Auto Layout for anything that is a list, a row, a card grid or a stack. Nothing else in your file changes the output this much.
Why pixel-perfect is the wrong ask
Our converter's own source header calls itself "intentionally an approximation" — a faithful, fully-editable starting point rather than a clone. I would rather publish that than the other claim, for a practical reason.
A pixel-perfect conversion of a 1440-wide desktop frame gives you a page that is exactly right at 1440 pixels and wrong at every other width, held together by absolute positions that fight you the moment you edit a sentence. You did not want a copy of the picture. You wanted the website the picture was describing.
The useful question to ask any Figma-to-code tool is therefore not "how accurate is it" but "what can I change afterwards". Accuracy is easy to demo. Editability is what you live with.
Real frames, real text, real colours. Figma layout becomes elements you can change, not a picture of a design. Browse the Market.
What to check on the converted page
Whatever tool you use, these five take ten minutes and catch almost everything:
- Change a heading. If you cannot, you converted a picture.
- Resize the window. Auto Layout frames should reflow; absolutely positioned ones will not.
- Check the type against the design. Weight and line height are the two that drift.
- Replace one image. Placeholders are fine; placeholders you cannot replace are not.
- Read the markup. Nested wrappers ten deep are a sign the tool copied the Figma tree rather than describing the page.
The useful thing to take from this
Figma is a description of a design, not a description of a website — it has no idea what should happen at 375 pixels, because you never told it. No converter can invent that, and the ones promising to have simply picked an answer for you.
Treat the conversion as a fast, accurate first draft of the visual decisions, and expect to make the web decisions yourself. That is a couple of hours of work, and it is the same couple of hours whether you start from a converter or from an empty page — except one of them starts with your palette and your typefaces already in place.