HTML to Figma — html2figma: import HTML, CSS & websites as editable layers (free, unlimited)
Drop an HTML file or paste code, get editable layers. Free, unlimited, your page stays local.
Plugin Preview
About this plugin
Free and unlimited — no account, no import quota.Turn any web page into fully editable Figma layers in seconds.Four ways in:• Drop an .html file• Drop an .mhtml file — Chrome and Edge save these with File → Save Page As → Webpage, Single File• Drop a .zip of a saved page folder — relative image and stylesheet paths resolve properly• Paste HTML/CSS straight from your editor, DevTools or an AI assistantWhat you get:• Frames with fills, linear & radial gradients, borders, corner radii, shadows and blur• Flex rows and columns rebuilt as native Auto Layout — editable gap, padding and alignment• Real text layers — font family, weight, size, line-height, letter-spacing, alignment. RTL and Arabic supported• Gradient headlines (background-clip: text) imported as gradient-filled text• Sections that fade in on scroll, which most importers silently drop• Images and inline SVG imported as editable vectors• Several viewports in one run — desktop, tablet and mobile side by side• A clean, semantically named layer tree — Buttons, Sections, content-based names, not div soupGreat for:• Migrating legacy pages into a design system• Redesigning production sites starting from real markup• Turning coded prototypes back into design files• QA-ing built pages against designPrivacy: your page is converted entirely inside the plugin — no HTML, CSS, text, images, layer names, file names or URLs ever leave your machine. The plugin does send anonymous usage counts (that it ran, and whether an import succeeded or failed) so it can be improved; switch that off any time with "Share anonymous usage data" in the plugin.Notes:• Pages that style themselves with JavaScript (e.g. the Tailwind CDN) import unstyled — the plugin warns you before importing• Fonts map to the closest installed Figma [email protected]
Plugin Details
| Version | 6 |
|---|---|
| Created | August 10, 2026 |
| Last Updated | August 31, 2026 |
| Category | Import & export plugins |
| Creator | Ahmed Dr |
| Stats | 12 installs, 4 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Network Access:
Fetches images and web fonts referenced by absolute URLs in the dropped HTML so they can be embedded into the design; the wildcard is required because those URLs belong to the page being imported and cannot be known in advance. Also sends anonymous usage counts (run started, conversion succeeded/failed, import completed) to html2figma.com/collect.php — no page content, URLs or file names are included, and it can be switched off in the plugin UI.
- Editor Types:figma
- Allowed Domains:
- *
- https://html2figma.com
More Like This
Discover other plugins in the Import & export plugins category.
Free Compressed PDF and Image Exporter (PDF, PNG, JPG, WebP and SVG)
Export compressed PNG, PDF, JPG, SVG, WebP & merge multiple frames into one PDF—fast & easy! 🚀
Color Import / Export
Help design and dev teams stay in sync by providing import and export tools for color palettes
Export/Import Variables
Export variables from one file and import them to another. Supports modes, references, and scopes.