CodeRender — HTML to Figma: Convert Websites to Editable Layers

HTML to Figma in one click: convert any website or web page into an editable Figma design. CodeRender turns the page you're viewing into real Figma layers: editable text, auto-layout frames, images and vector icons. You get layers you can work with, not a screenshot, and you don't have to rebuild the page by hand. How it works 1. Sign in with your free coderender.app account (Google or email). 2. Open any http or https page and click the CodeRender icon, or press Ctrl+Shift+. (Cmd+Shift+. on Mac). 3. Press Capture page. The page is copied to your clipboard as Figma layers. 4. Paste into any Figma file with Ctrl+V (Cmd+V on Mac). What you get • Editable text layers that keep the page's text styles • Auto-layout frames that follow the page's structure • Images and SVG icons as real Figma layers • The page exactly as you see it, including pages you're signed in to, such as dashboards and web apps • Progress shown on the page, with a cancel button while it runs Common uses • Redesign a live website, starting from its current design • Import a production web page into Figma to build or audit a design system • Copy UI references from other websites into a Figma file • Bring pages built with AI tools such as Lovable, v0 or Bolt into Figma: open the preview URL in its own tab and capture it there Have HTML code instead of a live page? Paste it into the free web converter at https://coderender.app/convert, no extension needed. There is also a CodeRender plugin inside Figma. Plans The free plan includes 10 conversions a month, shared across the extension, the web converter and the Figma plugin. Paid plans add more conversions. Privacy CodeRender reads a page only when you press Capture page. It never runs in the background and does not collect browsing history. Password fields are masked before anything leaves your browser. The captured page is sent to CodeRender only to perform the conversion. Privacy policy: https://coderender.app/privacy