HTML.to.Editable.Design – Convert HTML, CSS, or live websites into editable Figma designs

HTML to Editable DesignConvert HTML, CSS, or any live website into a fully editable Figma design — frames, text, images, auto-layout, and styles, all in seconds. Skip the tedious work of recreating layouts by hand; paste your code, drop a file, or capture a page from Chrome and have it on your canvas instantly.‣ Chrome Extension‣ DocumentationWHY USE THIS PLUGINRecreating a website inside Figma can take hours — measuring spacing, matching colors, retyping every label, rebuilding every component. This plugin turns that process into a few clicks. The output is a real Figma frame with real layers: text you can retype, frames you can rearrange with auto-layout, fills and styles you can edit. It's not a flat image. It's your design.FOUR WAYS TO IMPORT1. CODE — Paste your HTML and CSS directly into the plugin. Standalone HTML files with [removed] blocks also work.2. WEB — Enter a website URL and the plugin will fetch the page, inline its stylesheets, and convert. Works best on static and server-rendered sites.3. FILE — Drag and drop .hted, .html, or .zip files. Import up to 3 files at once and they'll be placed side by side on the canvas.4. EXTENSION — Install our companion Chrome extension to capture any webpage straight from your browser with higher accuracy. Especially useful for dynamic, JavaScript-heavy, or logged-in pages.WHAT YOU GET ON THE FIGMA CANVAS• Real Figma frames with auto-layout that mirrors the source CSS flexbox• Real text nodes — fonts, sizes, weights, colors, line heights, letter spacing• Inlined images and SVGs as Figma fills and shapes• Background colors, borders, gradients, and shadows• Multiple viewport presets — 1920px, 1440px, 1024px, 768px, and 390px• Pixel-accurate spacing and positioningCOMMON USE CASES• Convert an existing website you want to redesign in Figma• Bring a developer-built component into Figma for designer review• Extract design tokens, colors, and type from a live page• Create wireframe-to-design references in seconds• Bridge code-first and design-first workflows for hybrid teamsPRIVACYThe Plugin uses a hosted backend to enforce per-user export limits and prevent abuse. Limited account information from Figma (your user ID, display name, profile photo URL) and anonymous usage events (when you open the Plugin, how many exports you've run) are stored on our backend. The actual HTML, CSS, file contents, and rendered designs you import are processed locally in your browser and sent only to your Figma canvas — never to our servers.Find Privacy Policy here.GET THE COMPANION CHROME EXTENSIONSome pages render entirely with JavaScript and can't be captured by the Web tab. Our Chrome extension waits until the page is fully rendered in your browser, then saves it as a .hted file you can drop into the File tab. Install it from the Chrome Web Store: Chrome ExtensionSUPPORT & FEEDBACKFound a bug or want to suggest a feature? Email hted.support@gmail.com. We read every message.DOCUMENTATIONFull documentation, including how-to guides and FAQs, is available here Documentation