CodeRender — html to figma, Import websites to Figma designs (web,html,css)
by CodeRender
Turn HTML & CSS into real, editable Figma layers.
FreeFigma
Installs
8
Likes
1
Users
153
Views
356
Preview
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.
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
356.5K 39.4K
Figma to HTML
by Figma2HTML
Convert Figma design to HTML
206.9K 7K
TinyImage Compressor
Paidby Hypermatic
Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma
194.4K 4.7K
Pitchdeck Presentation Studio
Paidby Hypermatic
Turn your Figma designs into animated slide decks or export them to PowerPoint/PDF
176.2K 6.1K