Free HTML to Figma
by Mark Do
Import any website as editable Figma layers, components and styles. Mobile, tablet, desktop.
Installs
62
Likes
17
Users
859
Views
230
Preview
About this plugin
Paste a URL — or drop a saved page, archive or email — and get the page back as real, editable Figma layers. Not a screenshot: text you can retype, vectors you can nudge, frames with auto layout, strokes, shadows and gradients.WHAT YOU GETEditable layers — text keeps per-word styling, weights and hyperlinks; inline SVG comes in as vector paths; borders become strokes and shadows become effects.A design system — repeated blocks are detected and built as components with instances, and the page's colours, type and shadows become Figma styles and variables, documented on a Foundations board.
Mobile, tablet and desktop — tick any combination. Media queries are evaluated against the target viewport (390 / 834 / 1440), so a mobile import is the layout that device actually sees, not a squashed desktop page.A greyscale UI wireframe — optional. Colour collapses onto a neutral ramp and images become crossed placeholder boxes, while every measured position and size stays put. Comes with a 23-part kit of wireframe components: buttons, inputs, cards, list rows, nav bars, heroes, card grids, forms and footers.A redesign — optional. Re-skins the import onto a coherent design system with one palette, one type scale and an 8-pt spacing grid. Four presets.
Automatic clean-up — cookie banners, chat widgets, ad slots, hidden and off-screen nodes and redundant wrappers are dropped, so you get the design and not the plumbing.SOURCES — A public URL, or a file you drop in: HTML, HTM, MHTML, MHT, EML, EMLX, ZIP. Archives and saved email carry their own CSS, images and fonts, so those imports are pixel-complete and work with no network at all.HOW TO USE IT — 1. Website URL tab, paste an address (or File tab, drop a saved page). 2. Pick your viewports. 3. Choose what to build. 4. Import to Figma.GOOD TO KNOW — Everything runs inside the plugin window: no account, no API key, nothing uploaded, nothing collected. The plugin fetches the page you ask for plus its assets, falling back to a public CORS proxy only when a site refuses a direct request. JavaScript is not executed locally, so a fully client-side site may import as its server-sent HTML — save it as .mhtml and use the File tab. Fonts are substituted with the closest installed face, and you're told which are missing before importing. Pages behind a login can't be fetched.
Free, and free of ads and upsells.
Author: Mark Do — https://markdo27.github.io
More import & export plugins plugins
View allhtml.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Paidby divRIOTS
Convert any website into fully editable Figma designs
Figma to HTML
by Figma2HTML
Convert Figma design to HTML
TinyImage Compressor
Paidby Hypermatic
Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma
Pitchdeck Presentation Studio
Paidby Hypermatic
Turn your Figma designs into animated slide decks or export them to PowerPoint/PDF