Figma MCP Server: Design-to-Code in Claude and Cursor

The Figma MCP server connects design context to AI coding tools. Start with the official Figma listing, then choose the connection that fits your client and account rather than copying a personal-token npm example.

Docs reviewed October 17, 2026 from Figma's introduction, remote setup, and desktop setup. This guide is docs-derived; MCPFind did not connect to a file or validate generated code.

What Does the Figma MCP Server Actually Do?

The server supplies design context to an agent; the agent still needs to interpret it, match your codebase, and produce an implementation. Do not treat generated code as a visual acceptance check. Figma's current documentation also includes remote canvas workflows, so the old blanket claim that every connection is read-only is inaccurate.

How Do You Install the Figma MCP Server in Cursor or Claude Desktop?

Figma recommends its remote server. In a supported client's remote MCP configuration, use the HTTP endpoint below and complete the Figma OAuth sign-in. Follow the client-specific instructions for the exact configuration location and available plugin route.

json

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

The desktop alternative uses http://127.0.0.1:3845/mcp. It requires the Figma desktop app and a Dev or Full seat on a Professional, Education, Organization, Government, or Enterprise plan. Enable it through the desktop setup instructions. It does not support the remote server's canvas-writing workflows. Check current plan limits before choosing either route.

What Figma Data Can Claude Access Through the MCP Server?

For a first task, provide a link to one small frame and ask:

Read the design context for this frame. Identify the existing components and styling conventions in this repository, then propose an implementation plan. Do not change the Figma file or write application code yet.

The expected result is a plan tied to that frame and your existing components. Review it against the design, then approve a small implementation. Compare spacing, typography, layout, and assets in the rendered result before accepting it. This review catches mismatches that a successful connection alone cannot establish.

How Does Figma MCP Compare to Alternative Design Server Options?

The official server is the clearest starting point when the source design is in Figma. A community wrapper may expose a different API or authentication scheme; compare its exact repository and permissions rather than treating it as interchangeable. For a one-off handoff, exported assets and written specs may be sufficient without granting an agent continuing file access.

What Are the Current Limitations of the Figma MCP Server?

Client support, tool availability, plan limits, and the remote/desktop feature split can change. Use the linked documentation rather than a fixed tool or directory count. Keep requests to a frame or component, review account/file access, and explicitly approve any canvas mutation separately from a code-generation task.

Explore the automation category for adjacent integrations. For background, see what is MCP and DevOps and CI/CD servers.

Frequently Asked Questions

Does the Figma MCP server require a paid Figma plan?

Check the current plan and rate-limit documentation for the route you choose. The desktop route requires a Dev or Full seat on an eligible plan; the hosted route has its own access and usage limits.

Can the Figma MCP server write changes back to Figma files?

Do not assume every Figma MCP route is read-only. Current remote documentation includes canvas workflows, while the desktop server does not support writing to the canvas. Review the tools your client exposes before authorizing changes.

Does Figma MCP work with Windsurf and VS Code, or only Cursor?

Use a client supported by Figma's current MCP documentation. Remote HTTP and desktop HTTP setup differ; generic stdio support alone does not establish compatibility.

Do I need a personal access token or npm package for the official route?

No personal-token npm setup is required for the documented hosted OAuth route. Follow Figma's current remote or desktop installation instructions rather than substituting a community wrapper.