ScreenshotNeo
Sign in Get a free key

BlogAI agents

How to Connect Figma to an MCP Server

Connect Figma to an MCP server using Figma’s remote endpoint, Claude Code, Codex, Cursor, VS Code or the desktop server.

By the ScreenshotNeo team1 October 20267 min read

Direct answer: For most users, connect your MCP client to Figma’s hosted server at https://mcp.figma.com/mcp, complete Figma OAuth authorization, then give the agent a link to the specific Figma frame or layer you want it to inspect. Figma recommends the remote server because it has the broadest feature set and does not require the Figma desktop app.

1. Choose remote or desktop MCP

Remote server Desktop server
Endpoint https://mcp.figma.com/mcp http://127.0.0.1:3845/mcp
Host Figma Your Figma desktop application
Desktop app required No Yes, and it must remain open
Authentication Figma OAuth in the MCP client Enable MCP in Dev Mode, then connect locally
Best fit Most individual and team setups Organization-specific workflows or environments that require a local server

Figma strongly recommends the remote MCP server. Figma for Government supports desktop MCP; remote MCP is unavailable there.

2. Connect the remote Figma server

  1. Confirm that your client appears in Figma’s current MCP Catalog. Figma only allows listed clients to connect.
  2. Add the remote HTTP server using https://mcp.figma.com/mcp, either through the client’s Figma plugin or its MCP configuration.
  3. Start the server or open the client’s MCP panel.
  4. Follow the authorization prompt and allow the client to access Figma.
  5. Copy a link to the exact frame or layer you want the agent to use.
  6. Paste that link into your prompt and describe the output you need, such as “Build this frame in React using the existing components.”

The agent uses the node ID embedded in the Figma URL. It does not browse the link like a normal web page, so a specific frame or layer link is more useful than a file’s home URL.

3. Client setup examples

VS Code

Open the Command Palette and select MCP: Open User Configuration for a global server or MCP: Open Workspace Folder MCP Configuration for a workspace-only server. Add:

{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}

Save the file, start the server from VS Code’s MCP controls, and complete Figma authorization. Figma’s VS Code instructions require GitHub Copilot to be enabled for MCP use.

Codex CLI

codex mcp add figma --url https://mcp.figma.com/mcp

Authenticate when Codex opens the Figma authorization flow. In the Codex app, install the Figma plugin and follow its authorization prompt.

Claude Code

The documented plugin installation is:

claude plugin install figma@claude-plugins-official

To add the server manually instead:

claude mcp add --transport http figma https://mcp.figma.com/mcp

The manual command uses project-local scope by default. Add --scope user to make the server available across projects:

claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp

Start a fresh Claude Code session. Run /mcp, choose Authenticate, approve Figma access, and confirm that the server is connected.

Cursor

In Cursor’s agent chat, run /add-plugin figma, then connect and authorize the plugin in Cursor’s MCP settings. You can also add https://mcp.figma.com/mcp manually through the remote installation settings.

Gemini CLI, Xcode and other clients

Figma’s getting-started documentation lists Gemini CLI and provides client-specific installation instructions. Xcode support is identified in the current documentation as Xcode 27 beta. Menus and supported versions change, so use Figma’s live MCP Catalog and your client’s current MCP documentation before applying an older configuration.

4. Use the desktop MCP server

Choose desktop mode when your organization requires a local server or your environment cannot use Figma’s hosted endpoint.

  1. Open the Figma Design file in the Figma desktop app.
  2. Switch to Dev Mode.
  3. Open the Inspect panel and enable the MCP server.
  4. Configure your client with http://127.0.0.1:3845/mcp.
  5. Keep the Figma desktop app running while the client makes requests.
  6. Authorize the client if it asks, then send a frame or layer link in your prompt.

The desktop application is the server host. Closing it, changing networks, or blocking localhost traffic prevents the MCP client from connecting.

5. Give the agent useful Figma context

Use a link copied while the desired frame or layer is selected. Include the implementation target and constraints in the same prompt:

Use this Figma frame as the source of truth:
https://www.figma.com/file/FILE_ID/NAME?node-id=123%3A456

Build it in the existing React app. Reuse the repository's components,
match spacing and typography, and list any assets or variables you could
not identify.

Good prompts identify one design target, the destination codebase, the required framework, and what to do when a design value is unavailable.

6. What Figma MCP can expose

  • Structured design context, including components, variables and layout data.
  • Code-oriented context from selected frames.
  • Make resources.
  • Creation or modification of native Design and FigJam content in supported workflows.
  • Capture of a live web interface into Figma in supported clients.

Capabilities are client-specific. A connected server does not mean every client exposes every action.

7. Seat, plan and beta limits

  • Figma documents remote MCP as available on all seats and plans.
  • Desktop MCP is available to Dev or Full seats on paid plans.
  • Write-to-canvas is currently available to Full and Dev seats on paid plans.
  • Dev seats have read-only access outside drafts.
  • Figma says MCP is free during the current beta. It has not published when the beta ends or what usage pricing will be.

Check the current Figma terms before promising editing, desktop access or future pricing for a team.

8. Troubleshooting

Symptom Likely cause Fix
Client says the server is unsupported The client is not in Figma’s MCP Catalog or its MCP support is disabled. Check the live catalog, update the client, and enable its MCP integration.
OAuth window never completes The authorization flow was cancelled, blocked by the browser, or attached to the wrong Figma account. Start authentication again, allow popups, and sign in to the account that owns the file.
Remote server connects but returns no design data The prompt contains a file URL without a selected node, or the account cannot access the file. Copy a frame or layer link and verify that the same account can open it in Figma.
Claude Code shows no Figma server The command was run with project scope and you are in another project. Run the command again with --scope user, or add it from the current project directory.
VS Code configuration is ignored The configuration was saved to the wrong scope or the JSON is invalid. Use the matching User or Workspace command, validate the JSON, then reload VS Code.
Desktop connection is refused Figma desktop is closed or MCP is not enabled in Dev Mode. Open the file in the desktop app, enable MCP in Inspect, and retry http://127.0.0.1:3845/mcp.
Agent can read but cannot edit Your seat, plan, file permissions or client does not support write actions. Check the seat and plan rules, request edit access, and confirm that the client supports the requested write capability.
Generated code does not match the design The agent received a broad file link or an ambiguous prompt. Send the exact node link, specify the target framework, and ask it to report missing variables, assets and components.

9. Reliability, security and performance

Reliability

Remote mode removes the requirement to keep a desktop process running. Desktop mode adds a local dependency: the Figma app, the selected file and localhost connectivity must all remain available. Keep a documented fallback configuration for the other mode if your team changes environments.

Security

Authorize only clients you trust. Use the least-permissive Figma account that can access the required files, and avoid pasting confidential design links into prompts sent to unapproved tools. Review a client’s data-handling policy before enabling write actions.

Performance

Use one precise node link per task instead of asking the agent to infer a target from an entire file. Smaller, well-scoped requests reduce irrelevant design context and make generated code easier to review. Reuse shared components and variables in your prompt when they are important to the implementation.

10. Or skip the browser setup

If your next step is turning a public web page into a visual reference, ScreenshotNeo can return a screenshot with one request. Its consent handling accepts cookie banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.

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://www.figma.com -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://www.figma.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://www.figma.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo includes full-page capture, element selection, dark mode, device presets, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, user agents, geolocation, caching, signed links, asynchronous jobs, bulk capture and PDF options. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

FAQ

What URL do I use for Figma MCP?

Use https://mcp.figma.com/mcp for the hosted server or http://127.0.0.1:3845/mcp for the desktop server.

Do I need Figma desktop for remote MCP?

No. Remote MCP is hosted by Figma and uses OAuth in the client.

Can the agent open any Figma URL?

Give it a link to a specific frame or layer. The client extracts the node ID from that link rather than browsing the URL.

Is Figma MCP free?

Figma currently describes MCP as free during its beta. Future usage pricing and an end date have not been published.

Why can my agent read a file but not change it?

Write access depends on your seat, plan, file permissions and client support. Dev seats also have read-only access outside drafts.

Keep reading