HTML to Figma (Auto Layout)

Import HTML as real Figma layers with Auto Layout preserved. Free, with no import limits.Built for the AI workflow: ask Claude/ChatGPT for a design as a single HTML file, paste it into the plugin (or drop the .html file onto it), pick a viewport width, and get a fully layered, editable Figma frame.WHY LAYOUTS DON'T BREAKThe plugin renders your HTML in a real browser engine and measures every element's actual pixel position. Before any container becomes Auto Layout, the mapping is simulated and compared against the measured layout: if Figma's Auto Layout math wouldn't reproduce it exactly, that container falls back to pixel-perfect absolute positioning instead of guessing.WHAT'S SUPPORTED• Auto-detects the design's layout width, no need to know what viewport the HTML was made for• Flexbox → Auto Layout: direction, gap, padding, space-between, alignment, wrap• CSS Grid → Figma Grid Auto Layout (rows, columns, gaps, spans)• Plain block flow → inferred Auto Layout stacks (variable margins become spacer frames)• Text with mixed inline styles → styled ranges with working hyperlinks• Create color & text styles from the import, or bind to your existing local styles• Google Fonts matched to Figma's font library, weight-aware (fallback: Inter)• Gradients, shadows (incl. inset), per-corner radius, per-side borders, opacity, blend modes• Full-resolution images (webp/avif auto-converted), inline SVG → real vectors• Tailwind CDN, [removed] blocks, inline styles, all work• Three input modes: paste HTML, open/drop a local .html file, or fetch a URL (best effort)• Semantic or raw HTML layer names, your choiceTIPS• Paste the HTML exactly as the AI produced it. Full documents and fragments both work.• Keep "Run scripts" checked for Tailwind CDN pages.• Failed images/fonts are listed as warnings, never silently broken layout.LIMITATIONSCSS transforms are approximated by bounding box; ::before/::after pseudo-elements are skipped; conic gradients become linear; video/iframe become placeholders; "From URL" depends on the site allowing cross-origin access. For JS-heavy sites (Webflow, React apps) use the built-in "Render it in your browser" capture on the URL tab: it renders the page in your own browser with full JS fidelity and hands the result back to the plugin.NEED MORE THAN THE PLUGIN?If you'd rather not deal with the edge cases above, I convert websites to Figma as a service: an automated pass with this plugin, then the last stretch finished by hand (fonts, Auto Layout, layer naming, styles). Details: https://annandaislam.comNETWORK DISCLOSUREThe plugin collects no data and has no analytics. It fetches only the assets your HTML references (images, stylesheets, fonts). The optional From URL tab sends the URL you type to a small proxy run by the developer (a Cloudflare Worker that stores nothing), with public CORS proxies as fallbacks (corsproxy.io, cors.eu.org, api.allorigins.win, api.codetabs.com). wsrv.nl is used as an image proxy for CORS-blocked images. Pasted HTML itself never leaves your machine.NEED IT DONE FOR YOU?Landing pages, blog visual systems and site-to-Figma conversion, finished by hand, fixed prices: https://annandaislam.com/startFREE FOREVERIf this plugin saves you time, you can support development on Patreon: https://www.patreon.com/AnnandaMade by Annanda Islam · https://annandaislam.com