How to Screenshot a Website Into Figma

To capture a website as editable Figma layers, use Figma’s Chrome extension: open the page, capture the whole page or a selected element, then focus a Figma Design canvas or FigJam board and paste. For a static visual reference, take a normal browser screenshot and paste or import the image instead. The extension can create frames, text, images, and shapes from the webpage, though complex pages may not translate perfectly. See Figma’s Chrome extension instructions.

1. Capture a webpage as editable Figma layers

1. Install the Figma Chrome extension from the Chrome Web Store and sign in with the same Figma account you use in Figma. Figma describes the extension as available on all plans.
2. Open the webpage you want to capture. Launch the extension from Chrome’s toolbar, or use the keyboard shortcut if you have configured one.
3. Choose the capture scope:
   • Capture page captures the whole page, including content outside the current viewport.
   • Select element lets you hover over and click a particular region or component.
4. Open a Figma Design file or FigJam board, click into the canvas, then paste with Command+V on macOS or Ctrl+V on Windows or Linux.
5. Inspect and refine the resulting layers. The extension translates available webpage code into design layers; some auto layout, font properties, and variables may carry over.

If you want existing Figma variables to bind during paste, add the relevant library to the file first. Figma attempts to match variables according to its binding rules; matching is not guaranteed for every variable.

2. Import a static screenshot instead

A normal browser screenshot is the simpler choice when you need to preserve the page’s visible appearance as one image. The result is a raster image layer or fill, not separate editable webpage text and layout layers.

1. Capture the page or region using your browser or operating system’s screenshot feature.
2. In Figma, click the canvas and paste the image from the clipboard, drag the image file onto the canvas, or use the file’s upload or import flow.
3. Resize and position the image as needed. Figma supports common image formats including JPG, PNG, HEIC, WebP, and GIF; TIFF support is noted for Safari.

Figma’s file browser can import PNG and JPG files, and its help material also describes importing static image formats into a Design file. An imported image is treated as a fill on a layer.

3. Choose the right capture method

Method	Best for	Result	Trade-off
Figma Chrome extension	Editable starting layers, a selected page region, or a full-page capture	Frames, text, images, shapes, and other design layers	Complex scripts, canvas content, animations, and virtualized lists may not translate cleanly
Browser screenshot imported as an image	A quick visual reference or faithful static snapshot	A raster image layer or fill	Text and layout are not decomposed into editable layers

The extension is the most directly documented no-code path for an ordinary webpage. Figma also documents copying design layers from a Figma Make preview and using the Code to canvas tool generate_figma_design through the Figma MCP server. Those are separate workflows; the Chrome extension is usually the straightforward option when starting from a live website.

4. What affects the result

Think of the extension output as editable starting material rather than a guaranteed pixel-perfect reconstruction. It works from code available behind webpage elements, and some layout and font properties can carry over. A visual mismatch can come from how a site renders its content, rather than from the paste step.

• Complex scroll-driven pages: A full-page capture can be incomplete or visually wrong. Capture the needed section as an element instead.
• Heavy JavaScript animation: The captured state may not represent all animation states or the intended settled appearance.
• Canvas-rendered content: Text and shapes drawn into a canvas may not become individual editable Figma layers.
• Virtualized lists: Pages that render only the visible list items may not expose the entire list for a full-page translation.
• Variables: Add the relevant library to the Figma file before pasting if you want Figma to attempt variable binding.

For documented limitations and guidance, see Figma’s coded-screen conversion help.

5. Troubleshooting

Problem	Likely cause	What to try
Clicking the extension does nothing	The page is a privileged Chrome page, such as chrome://, or the Chrome Web Store, where extensions cannot run like they do on ordinary websites.	Open the target site in a regular webpage tab and launch the extension there.
Paste adds nothing to Figma	The canvas may not have focus, or the clipboard may not contain the latest capture.	Click the Figma canvas, return to the webpage, capture again, then paste. Figma says the most recent capture is the one pasted.
The full-page result is incomplete or distorted	The page may rely on scroll-driven behavior, animation, canvas rendering, or virtualized content.	Use Select element to capture the specific region you need.
A variable did not bind	The relevant library may not be available in the destination file, or the variable may not meet Figma’s matching rules.	Add the library before pasting and check the resulting layers and variable bindings.
The result is a picture rather than editable text and layout	You used a regular screenshot or imported an image.	Use the Figma Chrome extension when you want the webpage translated into editable layers.

6. Practical workflow, reliability, and cost

• Capture only what you need: Use element capture for a component or section. Use full-page capture when content outside the viewport matters and the page’s rendering permits it.
• Keep a static reference when fidelity matters: For a record of the exact visible appearance, save a browser screenshot as an image. Editable conversion and pixel-faithful capture are different goals.
• Re-capture after changing the page: The extension pastes the latest capture, so capture again after adjusting the page or choosing another region.
• Plan for cleanup: Review fonts, spacing, layout, and missing content after conversion, especially on dynamic sites.
• Cost and access: Figma describes the Chrome extension as available on all plans. Figma plugins are third-party scripts or applications, and access depends on plan or seat. A plugin is not required for this workflow, and Figma says only one plugin can run at a time.

7. Or skip the browser setup

If you need a clean website image for a design reference, handoff, or asset, ScreenshotNeo returns a screenshot or PDF from one API request. It can remove cookie and consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed; responses identify the page verdict and billing status. Its MCP server gives AI agents tools to take screenshots, inspect page information, and capture PDFs.

For editable Figma layers, use the extension workflow above; an API screenshot is a static image you can import into Figma.

See the ScreenshotNeo API documentation. Example request:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python:

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)

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}`);
const bytes = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

There are 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000 screenshots. Every feature is on every plan. Start with 1,000 free screenshots a month, no card required.

8. FAQ

Can I edit the captured website text in Figma?

With the extension, text may become editable layers when the webpage’s underlying code exposes it in a form the extension can translate. A normal screenshot remains a static image.

Does full-page capture include content below the fold?

Figma says its extension’s Capture page option includes parts of the page that are scrolled out of view. Dynamic or virtualized content can still limit the result.

Do I need a Figma plugin?

No. The Chrome extension supports this workflow without a plugin.

Can I use this to recreate a site exactly?

It can provide editable starting layers, but the result depends on how the page is built and rendered. Plan to review and refine the conversion.