Appearance

Figma PluginBeta

Read the docs Coming soon
HTML → Framesfor Figma
HTML → Frames

Drop in an HTML file, paste a URL, or capture any element straight from Chrome — and get real Figma frames, not a flat screenshot. Every layer arrives with true browser geometry: fills, gradients, shadows, border radii, editable text with matched fonts, vector icons, and optional Auto Layout. Redesign on top of what already exists instead of rebuilding it by hand.

FigmaWindowsmacOS
€50 lifetime or €10/mo Docs Coming soon

// See it in action

Design a dashboard with Google StitchVideo coming soon

Design a dashboard with Google Stitch

Generate a dashboard concept in Google Stitch, then bring it into Figma as fully editable frames with HTML → Frames — and finish the design on your own canvas.

Capture elements with the Chrome extensionVideo coming soon

Capture elements with the Chrome extension

Pick any element on a live page with the Chrome extension — logged in, animations finished, exactly as you see it — and import it straight to your canvas.

// FAQ

HTML → Frames is a Figma plugin that converts 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 with true layout geometry, editable text, matched fonts, vector icons, and optional Auto Layout. Full documentation is on this site.
Pixel-accurate conversion needs a real browser. The plugin ships with a small local server that renders your page in headless Chrome, waits for fonts, images, and lazy-loaded content, and measures every element exactly as the browser drew it. It runs entirely on your machine at localhost:3847 — one double-click on start-server.bat and you're set. See Requirements & installation.
No. Rendering and extraction happen locally in the bundled server, and the result goes straight from your machine into your Figma file. Nothing is sent to any third-party service.
Your choice of two licenses: a one-time lifetime license for €50, or a €10/month subscription. Both unlock the same plugin. The store page is on its way — until then, the documentation covers everything the plugin does.
HTML → Frames is made by Trinh — a designer building the tools they want to use in their own work, published under trinhlabs.
Reach out on LinkedIn — questions, bug reports, and feature requests are all welcome.

// About

Trinh Nguyen

Trinh Nguyen

Senior Level & UX Designer

Available for freelance The Netherlands, Europe

I have been designing experiences for a while — close to a decade, of which 7+ years professionally. During my career I have been part of many award-winning projects like Riders Republic, Assassin's Creed VR and Off The Grid, at Ubisoft Annecy, Ubisoft Reflections and Gunzilla Games.

You could describe me as a Y-shaped designer. Next to my specialization in level design, my extensive knowledge in other fields like UX design and tool programming allows me to rapidly prototype my ideas, understand the project constraints and apply them to my designs more efficiently.

During my time in the industry I have mentored and given several workshops to designers: "3D modeling for Level Designers in Blender", "Create client worthy presentations using Canva" and "Photogrammetry for Beginners".

Level DesignUX DesignTools & PrototypingMentoring