ScreenshotNeo
Sign in Get a free key

BlogAI agents

How to Use Figma MCP in VS Code

Connect Figma MCP to VS Code, authorize the remote or desktop server, use design links effectively, and fix missing tools and access limits.

By the ScreenshotNeo team1 October 20268 min read

Use Figma’s hosted remote MCP server for the usual VS Code setup. Add https://mcp.figma.com/mcp to VS Code’s MCP configuration, start the server, authorize through Figma, then give your coding assistant a link to the exact Figma file, frame or layer. MCP supplies structured design context; the assistant still writes and adapts the implementation.

1. Choose the Figma MCP server

Figma documents two connection paths:

Choice Desktop app required? Endpoint Feature coverage Use it when
Remote server No https://mcp.figma.com/mcp Figma’s recommended option with the broadest feature set; some tools are remote-only You want the simplest setup or full remote capabilities
Desktop server Yes. Figma desktop must be open with an active file http://127.0.0.1:3845/mcp Local operation; not identical to remote and may omit remote-only tools Your organization requires local operation or you prefer a local connection

Only clients listed in Figma’s MCP Catalog can connect to the hosted server. Figma for Government supports the desktop route only. Check your plan, seat type and permissions before troubleshooting: the account can expose only files you already have permission to view or edit.

2. Configure the remote server in VS Code

  1. Open the VS Code Command Palette.
  2. Run MCP: Open User Configuration for a server available across your user profile, or MCP: Open Workspace Folder MCP Configuration to limit it to the current workspace.
  3. When VS Code asks, allow it to create mcp.json.
  4. Add this configuration:
{
  "inputs": [],
  "servers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp",
      "type": "http"
    }
  }
}
  1. Save the file.
  2. Use the Start control above the figma server entry.
  3. Complete Figma’s authorization prompt in the browser.
  4. Return to your AI coding assistant and confirm that Figma tools are listed.

Keep the configuration in user scope if several projects need Figma. Use workspace scope when a repository should declare its own MCP dependencies or when you want to avoid exposing the server to unrelated work.

Copy a link to the exact file, frame or layer that represents the work. Paste it into the prompt with a concrete implementation request. The MCP client extracts the needed node ID from the link; it does not browse to the URL as a human would.

Implement the checkout header from this Figma frame:
https://www.figma.com/design/FILE_ID/Checkout?node-id=123-456

Use the existing Header component, CSS variables and spacing tokens in this repository.
Keep the implementation responsive and add states for loading and validation errors.

A useful prompt includes:

  • The exact frame or layer link.
  • The target route, component or file in your codebase.
  • Framework and styling conventions already used by the repository.
  • Responsive breakpoints and interaction states that are not obvious from a static frame.
  • Existing components the assistant should reuse.

4. What Figma MCP provides—and what it does not

Figma describes MCP as a bridge that extracts structured design context such as frames, components, layouts, tokens and variables. The coding assistant uses that context to produce a code starting point.

The assistant remains responsible for generating final code, adapting layouts, wiring behavior and following repository conventions. Figma’s documentation states: “The MCP server is not a one-click ‘design to perfect code’ tool.” Output quality depends on the design context, model behavior and clarity of your prompt.

MCP does not automatically know your team’s design system when that information is absent from the file or prompt. Code Connect mappings, variables, a well-structured Figma file and explicit component guidance can help the assistant select real implementation components. Review the result against the design and run your normal checks.

5. Iterate in the repository

  1. Ask for a first implementation of one frame or component.
  2. Inspect the generated files and compare spacing, typography, colors and states with Figma.
  3. Tell the assistant which existing components or tokens it should use when it creates duplicates.
  4. Provide a second prompt with concrete corrections, such as “use the 8px spacing token,” “the mobile layout stacks these controls,” or “use the existing Modal component.”
  5. Run the project’s formatter, type checker and tests, then resolve integration issues yourself or through another focused assistant request.

6. Set up the desktop MCP server instead

Choose this path when local operation is required.

  1. Open the Figma desktop application.
  2. Open the design file you need.
  3. Switch to Dev Mode.
  4. Enable the MCP server from the inspect panel.
  5. In VS Code, open the Command Palette and run MCP: Add Server.
  6. Add an HTTP server with the URL http://127.0.0.1:3845/mcp.
  7. Give it an ID such as figma-desktop.
  8. Choose global or workspace scope.
  9. Keep the Figma app open with the target file active while you work.

Figma’s desktop guide says GitHub Copilot must be enabled for MCP use in VS Code. The desktop and remote servers do not expose exactly the same tools. If both are configured, a client can connect to desktop and then lack remote-only tools such as use_figma or generate_figma_design.

Workflow Direction Purpose
Design to code Figma to your repository Retrieve design context so an AI assistant can generate and adapt implementation code
Code to canvas Running UI to Figma Capture a running interface into editable Figma frames; support depends on the client
Write to canvas Agent to Figma Create or modify native Figma objects; seat and permission requirements may apply

Do not assume that configuring design-to-code enables the other workflows. Check Figma’s documentation for the supported client, account and permission requirements for each one.

8. Plans, seats, permissions and rate limits

Figma’s access matrix is account-dependent and can change. A user can reach only content they already have permission to view or edit. Recheck the live Figma access and rate limits documentation before designing an automated workflow.

Seat and plan Published allowance
View/Collab, Starter Up to 20 tool calls per month
View/Collab, Professional, Organization or Enterprise Up to 6 tool calls per month
Dev/Full, Starter Up to 200 calls per day and 10 per minute
Dev/Full, Professional Up to 200 calls per day and 15 per minute
Dev/Full, Organization or Enterprise Up to 600 calls per day and 20 per minute
Education Professional Dev/Full limits: up to 200 calls per day and 10 per minute

These figures are published limits, not permanent specifications. A limit error can be caused by the seat attached to the account, the plan, burst traffic or a changed policy.

9. Troubleshooting missing tools and failed connections

Tools do not appear after adding the server

  • Cause: The server was added but not started. Fix: Use the Start control above the server entry, then complete authorization.
  • Cause: VS Code is using a different scope. Fix: Check whether you edited user configuration or workspace configuration and inspect the active workspace’s MCP servers.
  • Cause: The client is not in Figma’s MCP Catalog. Fix: Use a supported client or consult the catalog before changing the JSON.

The desktop server has fewer tools than expected

Confirm that Figma desktop is open, the target file is active, Dev Mode is enabled and the MCP server is enabled in the inspect panel. If both remote and desktop servers are configured, disable the unintended one and reconnect. A desktop connection can omit remote-only tools.

Authorization succeeds but the file is unavailable

Verify that the signed-in Figma account can view or edit the file and that the link points to the intended file, frame or layer. Access is limited by Figma permissions and account plan.

The assistant reports a model error or timeout

Figma says the problem may be the assistant’s model connection or a timeout rather than MCP itself. Retry with a smaller, specific frame request, then check the model provider connection and server status.

Requests are rejected or throttled

Check the live rate-limit matrix for the account’s seat and plan. Reduce repeated calls, avoid sending several large exploratory requests at once and split a large page into focused frames.

The generated code does not match the design

Supply the exact node link, name the repository components and tokens to reuse, describe responsive behavior and ask for one component at a time. Add Code Connect mappings where available. MCP provides context; it cannot correct missing design-system information or guarantee pixel-perfect output.

10. Reliability, performance and workflow practices

  • Use narrow links: A focused frame or layer gives the assistant less irrelevant context and makes corrections easier.
  • Keep files structured: Clear component names, variables and layout hierarchy improve the extracted context.
  • Reuse Code Connect mappings: They expose implementation details and help the assistant select real components.
  • Respect limits: Cache design decisions in your task notes and avoid repeatedly requesting the same frame during a single iteration.
  • Separate design and behavior: Ask for visual structure first, then request interactions, data states and accessibility behavior.
  • Review generated code: Check semantics, keyboard behavior, responsive layouts, asset handling and project conventions before merging.

11. Or skip the browser setup

If your goal is to capture the implemented page for review, documentation or an AI workflow, ScreenshotNeo provides a website screenshot API and MCP server. A single request returns PNG, JPEG, WebP or PDF. Its capture flow accepts cookie banners and removes more than 60 known consent platforms, newsletter popups and chat widgets before the shot; each step can be turned off. Bot checks, blank pages, failed loads and cache hits are not billed, and response headers identify the verdict and billing result.

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 also has an MCP server for AI agents such as Claude, Cursor and other MCP clients; supports full-page, element, device, retina, PDF, custom CSS and JavaScript, waiting, blocking, headers, cookies, geolocation, caching, signed links, async jobs, bulk capture and usage APIs; and offers 1,000 screenshots per month free without a card. Paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

12. FAQ

Does Figma MCP write production-ready code automatically?

No. It supplies design context and a code starting point. Your coding assistant generates and adapts the implementation, which still needs review and integration.

No. The hosted remote server works without the desktop app. The desktop app is required only for the local server route.

Can I use a Figma URL without opening it in a browser?

Yes. Paste the link into the assistant prompt. The MCP client extracts the relevant node ID from the URL.

Is there a documented minimum VS Code version?

The referenced Figma setup documentation does not establish a minimum VS Code release or operating-system requirement.

Why does Code Connect help?

Code Connect can expose implementation details so the assistant can reuse real project components instead of inventing replacements. It improves context but does not guarantee an exact result.

Keep reading