Prepare HTML
Copy static page markup, an exported section, or the rendered HTML from your site build.
copy page HTML
include needed CSS
pick viewport Website to Figma workflow
Website HTML to Figma
From code to canvas
Convert website HTML into editable Figma layers by pasting static or exported markup. Use it for site sections, page redesigns, responsive review, and visual cleanup.
CodeRender does not crawl a live URL from this page. Paste the HTML/CSS you want to convert, then copy the Figma-ready result into your design file.
Website Capture
Export markup.
Paste to Figma.
Use static website markup as the source of truth, then convert the visible layout into editable Figma frames.
Convert the page
CodeRender renders the provided HTML and captures the layout for the current viewport.
render website HTML
capture computed styles
copy Figma dataRefine the design
Paste into Figma and edit text, sections, spacing, and responsive variants as design objects.
Frame: page
Header
Hero
Sections Website Inputs
Use static site markup
Website conversion works best when the HTML and CSS needed for the visible page are available to the renderer.
Marketing pages
Product pages, SEO pages, comparison pages, homepages, and signup flows exported as static HTML.
Page sections
Headers, heroes, feature sections, pricing tables, FAQs, footers, and content bands.
Responsive frames
Convert the same page at desktop and mobile widths to create review frames in Figma.
Best website input pattern
Use exported or copied HTML with its CSS. If the site depends on live JavaScript state, capture the rendered/static state you want before converting.
Use Cases
When a website should become editable
Use website-to-Figma conversion when an existing page needs redesign, documentation, or visual review.
Redesign starts
Bring an existing coded page into Figma before redesigning it.
Pattern capture
Capture recurring site sections as editable reference frames.
QA review
Compare actual coded output against design expectations inside Figma.
Content cleanup
Edit copy and layout visually after a page has already been built.
Sandboxed processing
Editable layers
Free to use
Website to Figma FAQ
Can I paste a live website URL?
Not in this workflow. Paste static or exported HTML/CSS into CodeRender, then convert that markup into Figma layers.
Can I convert pages from my own app?
Yes. Use the rendered/static HTML for the page or section you want to convert.
What if the website uses JavaScript?
Convert a static rendered state. Content that appears only after app state changes should be captured as the visible HTML for that state.
Can I convert multiple breakpoints?
Yes. Run separate conversions for the desktop, tablet, or mobile widths you need in Figma.
Convert website markup into Figma
Paste static HTML, capture the page, and continue the redesign in Figma.
Start converting free