The Figma Dev Mode MCP server gives AI coding agents structured access to your Figma files (variables, components, auto layout, Code Connect mappings) instead of making them guess from a screenshot. The remote server at https://mcp.figma.com/mcp is available on every plan and seat type, but View and Collab seats on paid plans are capped at 6 tool calls per month, so in practice you need a Dev or Full seat to get the 200 to 600 calls per day that real work consumes. It is genuinely good at tokens, spacing, and component structure, and genuinely bad at state, routing, and business logic, so treat it as a high-fidelity context feed rather than a code generator.

What is the Figma Dev Mode MCP server?

It is a Model Context Protocol server published by Figma that exposes design files as callable tools for an AI agent. Rather than pasting a PNG into a chat window, your agent calls get_design_context on a selection and receives the underlying structure: layer hierarchy, auto layout constraints, the variables bound to each property, and, if you have configured Code Connect, a pointer to the real component in your repository.

The tool surface is broader than most write-ups suggest. Read tools include get_metadata (a sparse XML outline of a selection), get_variable_defs (variables and styles in use), get_screenshot, get_code_connect_map, search_design_system, and download_assets. Write tools include create_new_file, generate_diagram (FigJam from Mermaid), and generate_figma_design. Figma publishes the full list in its tools and prompts reference.

Figma's own positioning is refreshingly unhyped: "LLMs can create workable code. But if you ask a tool to write code with no other context beyond its training data, its output, while usable, likely won't match the patterns found in the rest of your codebase" (Figma blog). The server is a context-delivery mechanism. Everything downstream still depends on your agent, your prompt, and your codebase conventions.

Should you use the local or the remote Figma MCP server?

Use the remote server unless you have a concrete reason not to. Figma describes the desktop server as being for "specific use cases for organizations and enterprises," while the remote server carries the broader tool set, including remote-only tools such as search_design_system, get_libraries, and download_assets.

The practical difference is scope of control: the desktop server operates on whatever is selected in the running app, which suits an engineer working screen by screen and frustrates an agent iterating across a whole flow unattended.

Do you need a paid Figma seat, and what are the rate limits?

You do not need a paid seat to connect, but you need one to get past a token allowance. Figma's documented limits are the single most decision-relevant fact about this product, and most write-ups omit them.

Source: Figma developer docs, Rate limits and access. Education plans match Professional Dev/Full limits. Three tools are exempt from rate limiting: add_code_connect_map, create_new_file, and whoami.

Read that table twice. Six calls per month on a Collab seat is not a trial, it is a demo. A single agent pass over one non-trivial screen typically burns four to eight calls (get_metadata, then get_design_context, get_variable_defs, get_screenshot, often download_assets), so a Collab seat is exhausted before the first component is finished.

Seat cost is the real gate. Per Figma's pricing page, a Dev seat is $12/month on Professional, $25 on Organization, and $35 on Enterprise; Full seats are $16, $55, and $90 respectively. For a five-engineer front-end team on Professional that is $60/month for genuinely usable access, which is cheap against the handoff time it removes. Budget it alongside the rest of your agent tooling; we break down how those costs compound in our MCP server cost guide.

The per-minute ceiling bites harder than the daily one. An agent looping across a twelve-screen flow reaches 10 or 20 calls a minute quickly, and the failure mode is a mid-task error rather than a queue.

How do you connect the Figma MCP server to Claude Code, Cursor, VS Code, and other clients?

Figma now ships first-party plugin installers for the major clients, which handle both config and OAuth. Manual config still works and is what you want checked into a shared repo.

Claude Code

# Recommended: first-party plugin (includes agent skills)
claude plugin install figma@claude-plugins-official

# Or add the remote server manually, user scope (all projects)
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp

# Then in a new session: /mcp -> figma -> Authenticate -> Allow access

Cursor

Open the chat, enter /add-plugin figma, click Add Plugin, then go to Cursor Settings -> Tools & MCP -> Installed MCP Servers -> Connect to authenticate.

VS Code

Requires GitHub Copilot enabled. Run MCP: Open User Configuration from the command palette and add:

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

Codex (OpenAI)

Click Plugins, then + next to Figma, then Install Figma and Allow access. Manually: Settings -> MCP servers -> Add server, and change the server type from STDIO to Streamable HTTP.

Antigravity and other clients outside Figma's catalog

Antigravity is a common search but is not in Figma's MCP catalog, so point it at the desktop server. Antigravity also uses a non-standard key, serverUrl rather than url:

{
  "mcpServers": {
    "figma-desktop": {
      "serverUrl": "http://127.0.0.1:3845/mcp"
    }
  }
}

For the desktop server in Cursor, Claude Code, or Codex, use http://127.0.0.1:3845/mcp and enable it in the Figma desktop app: open a design file, switch to Dev Mode with nothing selected, and toggle the MCP server on in the right sidebar.

Figma's catalog also covers Claude Desktop, Copilot CLI, Gemini CLI, Warp, Kiro, Replit, Android Studio, Augment Code, Factory, Firebender, OpenHands, and Xcode (beta). Only catalogued clients can connect to the remote server. Once Figma is your third or fourth MCP server, per-client JSON stops scaling, and our comparison of MCP gateways, AI gateways, and registries covers what replaces it.

What does Figma design-to-code actually produce?

Honest answer: excellent primitives, unreliable applications.

Where the output is genuinely good

• Design tokens. get_variable_defs returns real variable names, so you get spacing.md and color.surface.subtle instead of 16px and #F5F5F5. This alone justifies the setup for most design-system teams.
• Spacing and layout. Auto layout maps cleanly onto flexbox and grid. Padding, gap, and alignment come through accurately.
• Component structure and variants. Variant names and properties survive the trip, so agents scaffold prop signatures that match design intent.
• Code Connect mappings. The highest-leverage piece. With Code Connect configured, the agent reuses your existing Button instead of inventing a new one. Without it, expect duplicates.

Where it is not good, and will not be soon

• State. A frame is a static snapshot. Loading, empty, error, and disabled states exist only if a designer drew them, and nothing describes how they relate.
• Routing and data. Nothing in a Figma file encodes an API contract, a cache strategy, or a route hierarchy. Generated fetch calls are plausible and wrong.
• Business logic and validation. Entirely out of scope.
• Accessibility beyond the obvious. Focus order, ARIA relationships, and keyboard interaction are not in most files.

Output quality tracks file hygiene almost linearly. Detached instances, absolute positioning, and hardcoded hex values produce code you will delete. That asymmetry fits the wider picture: DORA's 2025 State of AI-assisted Software Development report, based on responses from nearly 5,000 technology professionals, found 90% use AI at work while 30% report little or no trust in AI-generated code (Google Cloud). The MCP server narrows that trust gap for presentational code specifically and does nothing for the rest. If you are wiring this into a React front end, the same plumbing has uses beyond handoff, which we cover in MCP in React applications.

When does the Figma MCP server pay off, and when does it not?

It pays off when you have a mature design system: published libraries, variables used consistently instead of raw values, auto layout everywhere, named component variants, and Code Connect mapped to real repository paths. In that setup the agent is doing lookup and translation, which is the work it does reliably, and you can plausibly remove hours of token-matching and spacing archaeology per screen.

It does not pay off when the file is a pile of detached, absolutely positioned frames, when your codebase has no component library for Code Connect to point at, or when the screens in question are mostly logic with thin UI. It also does not pay off if you expect it to replace a front-end engineer. The correct mental model is that it removes transcription work and leaves judgement work, which is roughly where AI-assisted delivery sits generally, as we argue in our take on where AI-generated code belongs in a delivery process.

A reasonable pilot: one squad on Dev seats, one well-maintained feature area, two weeks, measured against the time previously spent on design QA rounds. If Code Connect coverage is below roughly half your components, fix that first. The MCP server amplifies design-system maturity; it does not substitute for it.

FAQ

Is the Figma MCP server free? There is no separate add-on fee, and the remote server is available on all plans including Starter. Free access is functionally capped, though: 20 tool calls per month on Starter, and 6 per month on View or Collab seats on paid plans. Usable access requires a Dev or Full seat.

What is the Figma MCP server URL? The remote server is https://mcp.figma.com/mcp. The desktop server runs at http://127.0.0.1:3845/mcp and requires the Figma desktop app with the MCP server toggled on from Dev Mode.

Does the Figma MCP server work without the desktop app? Yes. The remote server connects directly to Figma's hosted endpoint with no desktop app required, and it carries the broader tool set, including remote-only tools like search_design_system and download_assets. The desktop app is only needed for the local server.

Why am I rate limited when I have a paid Dev seat? Usually the client is authenticated against the wrong identity, often a personal Starter workspace rather than the org where your Dev seat lives. Run the whoami tool, which is exempt from rate limits, to see which account and plan the server recognises, then re-authenticate.

Does it generate React and Tailwind code? It can return React and Tailwind representations of a selection, and that output is a solid starting point for presentational markup. It will not produce your data layer, routing, or state management, and it will duplicate existing components unless Code Connect is mapped.

Do designers need a Dev seat too? No. Rate limits apply to whoever calls the tools, which is the engineer or their agent. Designers need whatever seat their own work requires; what matters for MCP is that the person running the client holds a Dev or Full seat.

We build and maintain design systems and the front-ends that consume them, Code Connect coverage and agent tooling included. If you are trying to work out whether your Figma library is actually ready for design-to-code, or you want a front-end architecture that makes it worth doing, talk to us.