Why html2figma
Everything imports as it renders.
Everything stays editable.
html2figma reads the browser's rendered geometry and computed styles — so what you see on the web is exactly what lands on your canvas.
Pixel-faithful geometry
Positions come from the rendered page, not guessed from CSS. Flex, grid, floats, absolute — every layout imports exactly.
Real, editable everything
Native text layers with full typography, linear & radial gradients, multi-shadow stacks, per-corner radii, and inline SVG as vectors.
Clean, named layers
Sections, Buttons and content-based names with useless wrappers collapsed — a tree you can actually work in, not div soup.
RTL & Arabic ready
Right-to-left pages import with correct layout and real Arabic text — a first-class feature, not an afterthought.
Private by design
Your HTML never leaves the plugin. No uploads, no account, no tracking — everything runs locally in Figma.
Auto Layout — when it's real
Rows and columns with provably uniform spacing become resizable Auto Layout frames (opt-in). Everything else stays pixel-exact, so nothing ever shifts.
How it works
From markup to canvas in three steps
Save your page as HTML
Use any local .html file, or grab a live site with the free SingleFile browser extension — one click, fully self-contained.
Drop it on the plugin
Run html2figma in any file, drag the .html onto the drop zone and choose a viewport width — desktop, tablet or mobile.
Edit native layers
The page lands centered on your canvas as an organized frame — select any text, recolor any fill, reuse any component.
The difference
Importers give you div soup.
html2figma gives you a design file.
Wrapper divs with no visual meaning are collapsed, and every layer is named from its role or content — so the tree reads like a designer built it.
- div
- div
- div
- div
- span
- div
- div
- div
- div
- Section · hero
- Ship faster
- Design from real code
- Button
- Get started
- Nav
- Logo · SVG
- Link · Pricing
- Footer
FAQ
Questions, answered
How do I import an HTML file into Figma?
Install html2figma from the Figma Community, run it inside any design file, drag your .html file onto the drop zone, pick a viewport width, and click Import. The page is rebuilt as native Figma frames, text, images and vectors.
Can I convert a live website to Figma?
Save the page as a self-contained HTML file first — the free SingleFile browser extension does this in one click — then drop that file into html2figma. Direct URL import is on the roadmap.
Can I import a Pencil (.pen) design?
Yes. Export the node from your .pen file as HTML and CSS with Pencil's export_html tool, then drop that file into html2figma. Full walkthrough: pen.dev to Figma.
Are the imported layers actually editable?
Yes. Every element becomes a native Figma node: real text layers with font, weight and spacing; frames with fills, gradients, borders, shadows and corner radii; inline SVG becomes editable vectors. Nothing is flattened into a screenshot.
Does it support Arabic and right-to-left pages?
Yes. Layout is read from the browser's rendered geometry, so RTL pages import with correct positions, and Arabic text imports as real, editable text layers.
Does it create Auto Layout frames?
Yes — turn on the Auto Layout toggle before importing. Rows and columns whose rendered spacing is provably uniform become native Auto Layout frames with the right direction, gap and padding; anything ambiguous stays absolutely positioned so the import never guesses and nothing shifts.
Is my HTML uploaded anywhere?
No. Your file is processed locally inside the plugin. The only network requests are for images or fonts your page references by absolute URL.
How much does it cost?
html2figma is free. Pro features like direct URL import and batch import are planned for later.
Your next design file is already written in HTML
Install free, drop a page in, and get editable layers in seconds.
Install html2figma — free