HTML → Frames

A Figma plugin that turns HTML into real, editable Figma frames — not screenshots. Point it at a local .html file, a live website URL, or an element captured with its Chrome extension, and it rebuilds the page on your canvas layer by layer.

.html file / URL / Chrome capture  →  local render server  →  editable frames

The conversion runs through a small local server that renders your page in a real headless browser, waits for fonts, images, and lazy-loaded content, and measures every element exactly as the browser drew it. That measured geometry — not guessed CSS — is what lands on your canvas.

Everything stays on your machine

Rendering and extraction happen locally at localhost:3847. Nothing you import is uploaded anywhere — the result goes straight from the server into your Figma file. See Requirements & installation.

What you get

• Three ways in. Drop a local .html file, paste a website URL, or capture a single element from a logged-in page with the Chrome extension.
• Real layers with real styles. Fills, linear and radial gradients, per-corner radii, per-side borders, multiple shadows, blurs, blend modes, opacity, and CSS transforms — see What gets converted.
• Editable text with matched fonts. Text arrives as text nodes with size, weight, line height, letter spacing, and decorations intact, matched against the fonts available in Figma (Inter as the fallback).
• Vector icons. Material Icons, Material Symbols, and Font Awesome are detected and inserted as true vectors, and inline SVG comes across as SVG.
• Optional Auto Layout. Flex containers can convert to Auto Layout — direction, alignment, gap, padding, grow, wrap — with a drift guard that falls back to measured positions when the layout would visibly shift.
• Local styles & a style sheet. The import can create Figma paint styles for every color it finds, reuse the ones your file already has, and build a style-sheet frame with colors, typography specimens, and assets — see Settings.
• Any viewport. Import at 320 px mobile through 3840 px desktop and get the layout the browser actually produces at that width.

How accurate is it?

Position and size come from the browser's own measurements (getBoundingClientRect), text runs are measured with the Range API, and a post-import pass nudges text baselines to match where the browser drew the glyphs. Pages with flex-based layouts convert very closely; CSS Grid and a few Figma API gaps are the main exceptions — see Known limitations.

Start here

Getting started	Your first import in five steps
Requirements & installation	The server, the plugin, the extension
Import a local file	Drag & drop .html files
Import a website URL	Live sites and Chrome-extension captures
What gets converted	Elements, styles, text, icons, Auto Layout
Settings	Every option and its default
Troubleshooting & support	When the import doesn't look right