Open the page
Open the page you want to capture in Chrome, including pages behind a login, and size the window to the width you want captured.
open tab
sign in if needed
set window width Chrome extension workflow
Website to Figma extension
Capture the page you see
The CodeRender Chrome extension captures the page open in your current tab and copies it as editable Figma layers. The capture runs in your own tab, so it works on pages you are signed in to.
The extension is free to install and uses your CodeRender account. Prefer pasting code instead? The web converter works in any browser with no install.
How it works
Open the page.
Paste it in Figma.
The extension captures the live page in your tab, the CodeRender service converts it, and the result lands on your clipboard ready to paste.
Capture it
Click the CodeRender toolbar icon (or press Ctrl+Shift+Period), then Capture page. Sign in to your CodeRender account if prompted.
Capturing page
Converting
CopiedPaste into Figma
Switch to Figma and press Ctrl+V (Cmd+V on Mac). The page arrives as editable frames, text, and vectors.
Frame: page
Header
Content
Footer Good captures
Pages worth capturing
The extension works on what is rendered in your tab, so it fits pages that are hard to export as standalone HTML.
Signed-in app screens
Dashboards, settings pages, and admin views that only render after you log in.
Live websites
Marketing pages, docs, and product pages exactly as they render in Chrome.
Specific widths
Resize the window before capturing to get a desktop, tablet, or mobile-width frame.
Known limits
The extension captures the current window size. Content that only appears after scrolling may be missing, cross-origin iframes are not captured, and it needs Chrome 116 or newer. Password field values are replaced with bullets before anything leaves the tab.
Use Cases
When to use the extension
Use the extension when the page already exists in the browser. Use the web converter when you have HTML to paste.
Redesigns
Bring an existing live page into Figma as the starting point for a redesign.
QA review
Capture the shipped page and compare it with the design file.
Documentation
Collect real app screens as editable frames for specs and docs.
Same account
The extension, web converter, and Figma plugin all use one CodeRender account.
Captures only on click
Editable layers
Free to install
HTML to Figma Chrome extension FAQ
Is there a Chrome extension to convert a website to Figma?
Yes. The CodeRender — HTML to Figma extension on the Chrome Web Store captures the page you are viewing and copies it as editable Figma layers you paste with Ctrl+V.
Is the CodeRender Chrome extension free?
Yes. The extension is free to install and works with a free CodeRender account. It shares your account's monthly conversions with the web converter: free accounts get 10 per month in total, not 10 more for the extension.
Does it work on pages behind a login?
Yes. The capture runs in your own tab, so it sees the page as you do, including pages you are signed in to.
Do I need a CodeRender account?
Yes. If you are not signed in, the extension shows a Sign in to CodeRender button that opens coderender.app. Only a short-lived render token is shared with the extension; your account password and session stay on the site.
What does the extension access?
It acts only on the active tab after you click the extension. It does not capture pages in the background or collect browsing history. Password field values are replaced with bullets before capture.
Do I still need the web converter or Figma plugin?
No. They are separate ways to use CodeRender. Use the extension for pages open in Chrome, the web converter for pasted HTML, and the Figma plugin to convert from inside Figma.
Add the CodeRender extension to Chrome
Install it free from the Chrome Web Store, open a page, and paste it into Figma.
Add to Chrome