The Figma Chrome extension lets you capture any web page or element on a page and bring it to Figma as design layers. Use the editable layers on the canvas in Figma Design to riff on your production websites, pull real-world inspiration into your design files, or jump-start a Figma Make prototype.
This article covers how to install the extension, capture content from the web, paste it into Figma Design, FigJam, and what to expect from the beta.
Install the extension
- Open the Figma extension listing in the Chrome Web Store.
- Click Add to Chrome, then confirm Add extension in the prompt.
- Pin the Figma icon to your toolbar for easy access.
- Click the Figma icon and sign in with the same account you use for Figma.
Tip: Optionally, you can configure a keyboard shortcut for the Figma extension at chrome://extensions/shortcuts. You can create shortcuts for launching the extension, capturing a whole page, or capturing individual elements.
If you already use the Figma Chrome extension for adding FigJam links to calendar events, you're set. Code to canvas is part of the same extension and turns on automatically once you're signed in to a paid plan.
Other extension features (such as the Google Calendar integration) remain available on all plans.
Capture a page or element
Step 1: Open the toolbar
Navigate to the web page you want to capture, then click in your Chrome toolbar or use the keyboard shortcut you configured. The capture toolbar appears, anchored to the page.
Step 2: Select what to capture
You have two options:
- To capture an element, click Select element, hover to highlight a region (a card, hero section, or button), then click to capture it.
- To capture the full page, click Capture page. The capture includes parts of the page that are scrolled out of view.
Each item you capture is added to the tray in the toolbar and automatically copied to your clipboard.
Step 3: Paste into Figma
Open a Figma Design file or FigJam board and paste with ⌘V (macOS) or Ctrl+V (Windows / Linux). The capture is placed on the canvas as Figma layers, such as frames, text, images, and shapes, which you can move, edit, and restyle like any other content.
Common workflows
Start designing from your production websites
Capture your own product's current state and use those frames as the foundation of a redesign exploration on the canvas.
Bring inspirational content onto the canvas
When you're researching patterns or building a moodboard, the extension lets you grab specific UI from real sites and assemble them in a Figma Design file or FigJam board. Because each capture lands as layers, you can isolate the parts you want to study, recolor them, or annotate them directly.
Kickstart a Figma Make prototype
Capture a page or section from your production website, paste it into Figma Design, then send it to Figma Make as the starting point for a prototype. To send the layers, right-click the frame that contains the layers and select Send to Figma Make.
Tips for better captures
- Scroll first on animated pages. For pages with dynamic scrolling effects (like marketing sites with reveal animations), scroll all the way to the bottom of the page before triggering a page capture. This activates the page's interactions so they're included in the capture.
- The most recent capture is on your clipboard. You don't need to click anything in the tray, just go to the canvas in Figma Design or FigJam and paste.
What's not currently supported
This is a beta release. In particular:
- No design system mapping yet. Captures come in as plain Figma layers. They are not automatically mapped to your library components or variables. Design system support is on the roadmap and expected later in the beta.
-
Complex scroll-driven or canvas-rendered sites may capture imperfectly. Pages that use heavy JavaScript animation,
<canvas>rendering, or virtualized lists may not translate cleanly. If a capture looks off, try element capture on the specific section instead of the whole page. -
chrome://and other privileged pages can't be captured. The extension button has no effect on internal Chrome pages.
Troubleshooting
Nothing happens when I click the Figma icon. The extension can't run on chrome:// URLs, the Chrome Web Store, or other privileged pages. Open a regular web page and try again.
I just updated the extension and the toolbar isn't showing up. Refresh the tab, and ensure you have a paid plan. Extension updates don't take effect on tabs that were already open.
Pasting into Figma doesn't add anything to the canvas. Make sure the Figma tab is focused (click into the canvas first), then paste. If it still doesn't work, try recapturing. The most recent capture is what gets pasted.
I'm on a Starter plan and capture doesn't work. Code to canvas is currently limited to paid plans during the beta. Other extension features remain available on all plans.
Share feedback
This feature is in active development. If you encounter a bug, capture something that comes out wrong, or have an idea for how it should work, please share it.