Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To capture a live website as editable layers, use Figma’s Chrome extension: select a page or an individual element, then paste the capture into a Figma Design file or FigJam board. The result is a starting point for design work, not a guaranteed pixel-perfect copy or a recovered component library. If you need only a visual reference, you can instead import a screenshot as an image.
Capture a live website as editable layers
Figma’s Chrome extension is the most direct route for bringing a public or production webpage into a Figma canvas. It translates available code backing the page into design layers. You can capture a whole page, including parts below the current viewport, or choose a particular element. The steps below apply to the browser workflow; extension behavior and plan availability can change, so check Figma’s current help information if a control or entitlement differs in your account.
- Install and sign in. In Chrome, install the Figma extension from the Chrome Web Store. Sign in to the Figma account you intend to use. Pin the extension to Chrome’s toolbar if you want quicker access.
- Open the page. Navigate to the website in a regular Chrome tab. Internal Chrome pages and other privileged pages cannot be captured.
- Choose what to capture. Open the Figma extension from the toolbar. For one component or region, choose element selection, hover until the target is highlighted, and click it. For the whole page, choose Capture page; Figma says this includes content outside the currently visible viewport.
- Paste into Figma. The capture is added to the extension tray and copied to your clipboard. Open a Figma Design file or FigJam board, focus its canvas, and paste with Cmd+V on macOS or Ctrl+V on Windows or Linux.
- Inspect and refine. Review the layers and adjust the result for your design task. Captured content is not automatically mapped to your own components and styles, so expect to do design-system cleanup yourself.
Capture a region when a full page is unreliable
Whole-page capture is convenient for ordinary pages, but a long page can contain interactions and rendering behavior that do not translate cleanly. If animations, scroll-driven effects, canvas content, or a virtualized list look wrong, capture a particular element or section instead. This reduces the amount of complex page behavior that the capture needs to represent.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsBind matching Figma variables before you paste
If the page uses CSS variables and you want Figma to try matching them to variables in a Figma library, add that library to the destination file before pasting. Figma attempts to connect matching color, number, and string variables; matching is not guaranteed. Readable CSS variable names give the matching process a better chance. Production build systems sometimes shorten or scramble those names, while a development-server URL may preserve them more clearly.
#1 Best Overall
Variable matching is distinct from mapping a capture to your components and styles: the latter is not automatically supported. Even when some variables match, review the layers and bindings rather than assuming the capture has adopted your design system.
Choose the right input and output
| Method | Best for | What you get | Important limitation |
|---|---|---|---|
| Figma Chrome extension | A live webpage that you want to explore as editable layers | Code-derived layers pasted into Figma Design or FigJam | Complex page behavior may not translate accurately; it is not automatic component or style mapping. |
| Copy layers from a Figma Make preview | Code-backed screens already shown in a Figma Make preview | Design layers copied from that preview | This is for a Figma Make preview, not the general method for capturing a live production site. |
Figma MCP tool, generate_figma_design |
A code-to-canvas workflow using Figma’s MCP server | A route to bring code-backed screens into Figma | Use this when your workflow is based on the relevant code or agent integration; the Chrome extension is clearer for a live webpage in a browser. |
| Import a screenshot image | A fixed visual reference, annotation, or comparison | A flat image asset on the canvas | The image is not the extension’s code-derived editable-layer capture. |
Figma’s help material lists the Chrome extension, copying layers from a Figma Make preview, and generate_figma_design through the Figma MCP server as ways to bring code-backed screens into Figma. Use the extension for a live browser page; choose an image import when fidelity as a fixed visual reference matters more than editability.
Import a screenshot as an image
If all you need is a visual record, capture a screenshot using a method appropriate to your browser or operating system, then add the resulting image to the Figma canvas. Figma supports common formats including JPG, PNG, HEIC, WebP, and GIF. Its current help page says TIFF support is limited to Safari. An imported screenshot remains an image: you can position, crop, or annotate it, but it does not become the page’s individual text, controls, and layout layers.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Do not confuse capture with publishing a site
Figma also documents copying a frame from Figma Design into Figma Sites and adjusting it for a target breakpoint. That is a follow-on website-building workflow. It does not capture an existing website into Figma.
Or skip the browser setup: get a screenshot through an API
If your goal is a screenshot file rather than editable webpage layers, ScreenshotNeo can return a website screenshot in PNG, JPEG, or WebP, or a PDF, from one GET request. This is an image/PDF capture route—not a replacement for Figma’s code-derived editable layers. The API can also return HTML/CSS-to-image output. See the ScreenshotNeo API documentation for request options and response details.
Here is a runnable cURL example that saves a WebP capture of a page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace YOUR_API_KEY with your API key and change the target URL as needed. The saved image can then be imported into Figma if a flat reference is sufficient. For example, the same request in Python is:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)And in Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie or consent banners, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server gives AI agents—including Claude, Cursor, and other MCP clients—the tools take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. The features described are available on every plan.
Sign up free for 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshoot a missing or imperfect capture
The extension does nothing
- Confirm the tab is an ordinary website, not a Chrome internal page or another privileged page.
- Check that the extension is installed and that you are signed in to the Figma account you intend to use.
- Try capturing a specific element instead of the entire page, particularly if the page relies on complex scrolling or dynamic rendering.
Paste adds nothing to the canvas
- Click or otherwise focus the Figma Design or FigJam canvas before using the paste shortcut.
- Recapture the page, then paste the latest capture. Figma identifies the latest capture as the one pasted.
- If you expected layers in a particular file, verify that the correct canvas is open before pasting.
Variables did not bind
- Add the source library to the destination file before capturing and pasting.
- Check whether the page’s CSS variable names are readable in the production build; shortened or scrambled names can make matching harder.
- Try a development-server version of the page if it preserves clearer variable names, then inspect any bindings rather than assuming every variable matched.
The result differs from the webpage
- Use a section-level capture for scroll-driven effects, canvas-rendered content, or virtualized lists that do not reproduce well as a whole page.
- For a page that only needs to be shown as it appeared at capture time, use a static screenshot image instead of expecting code-derived layers to preserve every visual behavior.
- Plan to adjust the output: a capture is not an automatic reconstruction of the original design system.
What to check before using the capture
- Purpose: choose editable layers for exploration or a static image for a visual record.
- Scope: capture a whole page for broad context, or one element or section when the page’s rendering is complex.
- Variables: add the relevant Figma library before pasting if variable binding matters.
- Review: verify the visual result, layer structure, and any variable matches before using it as a design reference.
Frequently Asked Questions
Can I capture a website into FigJam instead of Figma Design?
Yes. Figma’s extension workflow supports pasting a capture into a FigJam board as well as a Figma Design file.
Can I capture a page that requires signing in?
The documented workflow starts from a webpage open in Chrome. Whether a particular signed-in page captures as intended depends on what the browser renders and what the extension can access; check the result before relying on it.
Recommended Free Tools
Does importing a screenshot create editable text and buttons?
No. An imported screenshot is a flat image asset. Use the extension’s code-derived capture when you need layers to edit.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
