Figma plugin · Free & open source
Open HTML
to Figma
Turn a local HTML file into editable Figma layers that match what the browser renders.
Watch the 20-second demoGo on, click around and boop the mouse. Only the import is pretend.
Demo
From file to Figma in twenty seconds.
What you see is what you import
Same page, now editable in Figma.
No screenshot tracing. The browser does the layout, and the plugin rebuilds it layer by layer.
How it works
Pick, drop, import.
The mascot reacts to every step, so you always know where it's at.
Ready
Pick a viewport, then choose an .html file (with its CSS and images) or paste HTML.
Charging
Hit Import. It renders your page in an isolated window and measures every box.
Done
The page lands as Frames, text and vectors, selected and zoomed to fit.
Oops
Wrong file or a stuck import? The ears droop and it tells you what to do.
What you get
Real layers, not a screenshot.
Editable text
Paragraphs with bold, italic, links and inline code become one rich-text layer each, with the browser's line breaks.
Browser-matched layout
Flex, grid and absolute layouts land as nested Frames at the measured positions.
Gradients & color styles
Linear, radial and text gradients become native fills, and the page's colors become local styles.
Borders & effects
Per-side borders, per-corner radii, shadows, blur and backdrop blur, as real strokes and effects.
SVG to vectors
Inline SVG, sprites and SVG images import as editable vector layers.
Images & canvas
Images, CSS backgrounds and canvas charts become fills, cropped like object-fit.
The fiddly bits
::before and ::after, list markers, form controls and rotations become matching layers.
Frame or Component
Import as a Frame, or tick one box and get a Component instead.
Runs entirely inside Figma. No backend, no account, no analytics, nothing stored. The only network requests are the ones your page makes to load its own stylesheets, scripts, fonts and images.
Free forever. Open source.
Install it from the Figma Community, or build it from source.
git clone https://github.com/kevicebryan/open-htmltofigma.git
cd open-htmltofigma
npm install && npm run build© 2026 Kevin Bryan.
KEVIN
BRYAN