How to Get Figma Screenshots with MCP

Direct answer: To let an AI agent inspect an existing Figma design, connect an MCP-compatible client to Figma’s MCP server and call get_screenshot with the target frame or layer context. The tool returns a PNG of the selection so the agent can reason about layout and visual details. If you need to bring a running website into Figma as editable design layers, use Figma’s documented remote capture workflow instead: ask the client to start your local app, follow its browser instructions, select pages or elements with the capture toolbar, and open the resulting Figma file.

These are different jobs. get_screenshot gives the agent a visual view of an existing Figma selection. Remote capture creates editable layers from a live UI. For files or image assets that must be saved, transferred, or exported in a particular format, use download_assets rather than get_screenshot.

1. Choose the workflow before you configure MCP

Goal	Use	What you receive
Let an agent inspect a Figma frame, component, or layer	get_screenshot	Rendered PNG for visual inspection
Get code or design context for a selected object	Frame or layer link, plus MCP prompt	Context about the linked node; desktop selection can also be used
Capture a running web app into Figma	Remote MCP capture workflow	New Figma file containing editable layers
Export or transfer assets	download_assets	Temporary download URLs for PNG, JPG, SVG, PDF, or original uploads

Figma supports Design, FigJam, and Figma Slides for get_screenshot. The tool is intended to help an agent preserve layout fidelity while generating or reviewing code. Asset export is a separate operation: download_assets supports multiple nodes, export settings, several formats, and original uploaded source images.

2. Set up the recommended remote Figma MCP server

Figma recommends its remote server for the general MCP workflow. In an MCP client such as a supported editor or agent, configure the HTTP server URL:

https://mcp.figma.com/mcp

Start the MCP connection and allow access when your client requests it. The remote option does not require the Figma desktop app. Client support and setup screens change, so check Figma’s current remote server installation guide and MCP introduction before standardizing a team setup.

Give the agent a frame or layer link

For remote MCP, provide a direct link to the Figma frame or layer you want the agent to understand. The client extracts the node ID from the link. A typical prompt is:

Inspect this Figma frame and describe its layout, spacing, typography, colors, and responsive behavior:
https://www.figma.com/design/FILE_KEY/FILE_NAME?node-id=123-456

Ask explicitly for a screenshot when visual inspection is the point:

Use get_screenshot on the linked frame before suggesting implementation changes. Report any visual details that are not obvious from the node metadata.

Remote MCP requires the link for design context. Selection-based prompting, where the agent uses the object currently selected in Figma, is a desktop-server capability.

3. Configure the desktop MCP server when you need selection-based work

The desktop path is useful when a designer has a file open and wants the agent to work from the current selection. Open or create a Figma Design file in the Figma desktop app, switch to Dev Mode, and enable the desktop MCP server from the inspect panel. Figma documents the local endpoint as:

http://127.0.0.1:3845/mcp

Configure that URL in your MCP client, then select a frame or layer in Figma and prompt the agent to inspect it. If the tools do not appear, Figma advises restarting both the desktop app and the MCP client. The desktop server requires the Figma desktop app and is documented for Dev or Full seats on paid plans. Remote MCP is documented as available on all seats and plans; verify current access rules because Figma’s availability terms can change.

Remote versus desktop at a glance

Question	Remote server	Desktop server
Must Figma desktop run?	No	Yes
How is the target selected?	Frame or layer link	Current desktop selection or link
Endpoint	https://mcp.figma.com/mcp	http://127.0.0.1:3845/mcp
Best fit	Remote agents and linked design review	Interactive work beside an open Figma file
Documented eligibility	All seats and plans	Dev or Full seat on paid plans

4. Capture an existing Figma design with get_screenshot

1. Open the target file and identify the exact frame, component, or layer.
2. Copy its frame or layer link if you are using remote MCP.
3. Confirm the MCP client is connected to the remote or desktop endpoint.
4. Ask the agent to call get_screenshot on that target.
5. Use the returned PNG as the visual reference for code generation, review, or accessibility discussion.

A precise prompt reduces ambiguity:

Take a screenshot of the linked selection with get_screenshot. Then list:
1. major layout regions and their order;
2. approximate spacing and alignment;
3. typography hierarchy;
4. visible states such as hover, disabled, or error;
5. details that should be verified from Figma metadata rather than inferred from pixels.

Use one selection per request when you need a focused visual explanation. For a page made of several independent sections, request screenshots of the relevant frames separately and ask the agent to compare them. A screenshot is a rendered view; it does not replace the underlying node data or component properties.

5. Capture a running app into a new Figma file

This workflow goes in the other direction: the source is a running website or local application, and the result is a Figma document with editable layers. Figma documents this for select MCP clients, so do not assume every MCP client exposes the capture controls.

1. Connect the client to Figma’s remote MCP server.
2. Start the application’s local development server when the client asks you to.
3. Prompt the client with a direct request such as:

Start a local server for my app and capture the UI of the homepage as frames in a new Figma file.

4. Follow the browser instructions from the client.
5. Use the capture toolbar to select pages, individual elements, and states.
6. Open the Figma file link returned by the client and inspect the generated layers.

Capture representative states deliberately: empty results, validation errors, loading screens, authenticated views, and responsive breakpoints often reveal more implementation issues than a single happy-path screenshot. Keep the local server reachable from the browser the client launches; a server bound only to an inaccessible interface can prevent capture.

6. Use download_assets for exports and transfers

Choose download_assets when the deliverable is an image file rather than agent visual context. It supports multiple nodes and export formats including PNG, JPG, SVG, and PDF. It can also retrieve original uploaded images. The tool returns temporary download URLs, so your script or workflow must fetch those URLs before they expire.

Request multiple selected nodes with the formats and scale needed for delivery.
Fetch every temporary URL immediately and store the files in your artifact directory.

Do not describe download_assets as a higher-quality version of get_screenshot. They solve different problems: one renders a selection for the agent, while the other exports or retrieves assets for use outside the conversation.

7. Prompts that produce useful screenshot analysis

Implementation handoff

Use get_screenshot on this frame. Convert the visual structure into semantic HTML and CSS. Preserve the spacing hierarchy, surface colors, border radii, and responsive intent. Call out any values you cannot know from the screenshot.

Visual regression review

Capture the selected Figma frame. Compare it with the current implementation at the same viewport. Group differences into layout, typography, color, content, and interaction-state issues. Do not infer a mismatch when the two views use different data.

Accessibility review

Inspect the screenshot and Figma context. Identify likely contrast, focus-order, target-size, and text-overflow risks. Mark each item as visible evidence or an implementation detail that requires code inspection.

Ask the agent to separate what is visible in pixels from what requires node metadata or source code. This prevents a screenshot-only review from turning guesses into requirements.

8. Troubleshooting common MCP screenshot failures

Symptom	Likely cause	Fix
No Figma tools appear	Server was not started, access was not allowed, or the client cached an old connection	Reconnect the MCP server; restart the client and Figma desktop app when using the desktop endpoint.
Remote request cannot identify the design	The prompt contains a file URL without a frame or layer target	Copy and provide the specific frame or layer link with its node ID.
Desktop endpoint refuses connection	Figma desktop is closed or the local server is disabled	Open the file in Figma desktop, enable the server in Dev Mode, and retry http://127.0.0.1:3845/mcp.
Screenshot is the wrong object	The link points to a page or parent frame, or the desktop selection changed	Re-copy the exact layer link or reselect the object immediately before prompting.
Agent describes pixels but misses variants	A screenshot does not contain component properties or hidden states	Ask for node context and inspect the component, variant, and interaction metadata separately.
Live capture creates an incomplete file	The local app was unavailable, a route required authentication, or only one state was captured	Keep the local server running, sign in through the instructed browser flow, and capture each required route and state.
Export URL no longer works	Temporary asset URLs expired	Call download_assets again and fetch the returned URLs immediately.

9. Performance, reliability, and access considerations

• Keep selections focused. Smaller frames make visual analysis easier and reduce irrelevant context. Capture a full page only when page-level relationships matter.
• Use stable links in automation. Store frame or layer links with the task so a later agent run does not depend on a changing desktop selection.
• Separate visual and asset jobs. Use get_screenshot for reasoning and download_assets for files; this makes retries and artifact handling predictable.
• Plan for changing availability. Figma documents remote and desktop access differently, and client support for live UI capture varies. Recheck the official setup and access pages before rollout.
• Capture states intentionally. A reliable design review includes responsive widths and important UI states rather than assuming one screenshot represents the entire product.

Figma says remote MCP may become usage-based paid functionality in the future. Do not build a cost assumption into a long-lived workflow without checking the current terms.

10. Or skip the browser setup

If your actual requirement is a clean screenshot of a live webpage rather than an editable Figma file, ScreenshotNeo provides a website screenshot API and MCP server. It is not a replacement for Figma’s editable-layer capture, but it removes browser automation from a screenshot pipeline.

One GET request returns PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for all options.

cURL

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}`);

ScreenshotNeo accepts 63 options, including full-page shots with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or custom viewports, retina scale, PDF paper and margin settings, custom CSS and JavaScript, clicks, selector or network-idle waits, ad and tracker blocking, custom headers and cookies, user agents, Authorization, timezone, geolocation, transparent backgrounds, resizing, configurable caching, signed links, asynchronous jobs with signed webhooks, bulk capture for 100 URLs per call, and usage reporting.

Its cleanup step accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers identify the page verdict and whether the request was billed with X-Page-Verdict and X-Billed. An MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients.

The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to start with 1,000 screenshots a month and no card.

11. FAQ

Does get_screenshot export a file I can deliver?

It returns a PNG for the agent’s visual inspection. Use download_assets when you need downloadable files, specific formats, multiple nodes, or original uploaded images.

Can remote MCP use my current Figma selection?

Remote MCP uses a frame or layer link. Selection-based prompting is documented for the desktop server.

Can every MCP client capture a live website into Figma?

No. Figma documents live UI capture for select MCP clients. Check the current client guidance before depending on that feature.

Do I need Figma desktop for screenshots?

No for the remote server. Yes for the desktop server, which runs locally at http://127.0.0.1:3845/mcp.

Can ScreenshotNeo make editable Figma layers?

No. ScreenshotNeo returns rendered webpage images or PDFs. Use Figma’s remote capture workflow when editable layers are the goal.

12. Source links

Primary references: Figma tools and prompts, remote server setup, desktop server setup, live UI capture guidance, and Figma MCP FAQs.