CodeRender — html to figma, Import websites to Figma designs (web,html,css)

About this plugin

CodeRender turns HTML and CSS into native Figma layers — real text, real frames, real auto-layout structure you can edit. No flattened images, no iframe embeds, no manual tracing.How it works1. Paste HTML in the plugin UI, or choose a local .html / .htm file.2. Pick a viewport preset — Desktop, Tablet, or Phone.3. Click Render to Figma CodeRender captures the rendered DOM, reconstructs it as Figma nodes, and places them on your canvas.What's supported- Text with typography, line height, and wrapping preserved- Images (inline and referenced sources, when the Images toggle is on)- Auto-layout reconstructed from flex, block, and table structures- CSS gradients, shadows, strokes, and background-image fills- SVG and web-font handling with best-effort font mappingDesign with AIDescribe the interface you want in a prompt and CodeRender generates a design, then places it in your Figma document as editable layers — the same native frames, text, and auto-layout you get from a conversion.AccessThe plugin requires an access key from coderender.app/dashboard. Free accounts include a fair-use conversion limit shown on the dashboard. Your access key is stored via Figma's plugin storage; before each render, the plugin exchanges it over HTTPS for a short-lived bearer token, and subsequent render requests carry that token, not the raw access key.Data & privacyWhen you convert, CodeRender sends a snapshot of how your page looks once it's rendered — the text, styles, fonts, sizes, and positions of the elements (and images, if the Images toggle is on) — to our servers, which rebuild it as Figma layers and send them back. Your original HTML/CSS code isn't sent, and we don't read anything from your Figma files. When you use Design with AI, the prompt you type is sent to our servers, which use Fireworks AI to generate the design; Fireworks does not store your prompt or the result, or use them to train AI. Full detail in the plugin's Privacy document at coderender.app/privacy.