Figma MCP Server: How to Turn Designs into Code with AI (2026)

The short version: The Figma MCP server lets AI coding agents pull your actual design, its components, variables, layout, and tokens, straight into their context, so they write code that matches your design system instead of guessing from a screenshot. It is generally available and free for reading design context, with a still-in-beta write-back-to-canvas mode. Here is what it does, how to connect it to Cursor, Claude Code, or VS Code, and where it helps versus where it still falls short.

What the Figma MCP server actually is

MCP, the Model Context Protocol, is a standard way for AI tools to pull in outside context. The Figma MCP server (originally the Dev Mode MCP server) is Figma's implementation: it exposes a selected frame or component to an AI coding agent as structured data rather than a flat image.

Instead of pasting a screenshot and hoping the model infers your spacing and colors, the agent reads the component structure (names, variants, properties), the variables and styles (color, spacing, typography tokens), the layout and layer tree, rendered images of the node, and, if you set up Code Connect, the mapping from each Figma component to your real code component and its import path. The result is code that references your design tokens and reuses your existing components, not a one-off block of markup with hardcoded hex values.

From beta to generally available

• June 2025: Figma launched the MCP server in public beta, as a local server that required the Figma desktop app. It supported Cursor, VS Code with GitHub Copilot, Windsurf, and Claude Code from day one.
• September 2025: Figma added a remote hosted server (no desktop app needed), integration with Figma Make (so the agent can read the underlying code of a Make file), and an in-app way to set up Code Connect.
• Schema 2025: Figma declared the server generally available across all seats and plans.

One caveat worth knowing: the read side, pulling design context, is GA and free. The newer write-back-to-canvas capability is still labeled beta, and Figma has said it will eventually become a usage-based paid feature.

Remote vs desktop: which server to use

There are two servers, and the difference matters.

Remote server (the simpler default). Point your AI tool at https://mcp.figma.com/mcp, authenticate to Figma, and you are done. No desktop app, no toggle. It is available on all seats and plans, and it is link-based: right-click a layer in Figma, copy the link to the selection, and paste that URL into the agent.

Desktop or local server. Open the Figma desktop app, switch to Dev Mode, and enable the MCP server toggle in the right sidebar. The server runs at http://127.0.0.1:3845/mcp, which you add to your tool's MCP config. This path needs a Dev or Full seat on a paid plan, and it is the only one that exposes get_code_connect_map, the tool that maps Figma nodes directly to your repo components.

For most people the remote server is the right starting point. Reach for the desktop server if you need node-to-component mapping or work in an enterprise setup.

How to connect it (Cursor, Claude Code, VS Code)

The clients that support it include Cursor, VS Code with GitHub Copilot, Claude Code, Windsurf, Codex, Gemini CLI, Android Studio, and Xcode (beta). Only clients listed in Figma's MCP Catalog can connect. High level:

• Cursor: Settings, then MCP, then add a new MCP server and enter the server URL.
• VS Code: add the MCP server in settings. GitHub Copilot must be enabled on the account.
• Claude Code: add the local server with claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp, or point it at the remote URL instead.

Once connected, the agent can call four core tools: get_code (a React and Tailwind representation of the selection by default), get_variable_defs (your variables and styles, so code uses tokens not magic numbers), get_image (a render of the node), and get_code_connect_map (node to component mapping, desktop only).

What it is good at

• Token accuracy. Because it reads your real variables, generated code references your spacing and color tokens instead of guessing values.
• Component reuse. With Code Connect configured, the agent emits your actual components and import paths rather than regenerating markup.
• A living reference. The design stays queryable while the agent iterates, so it is a source of truth during coding, not a one-time export.

React and Tailwind is the default and best-supported output.

Where it still falls short

• Your file quality is the ceiling. Output is only as good as the file. Well-structured, auto-layout, variable-driven, properly named files produce clean code; loosely built files produce messy code.
• Framework skew. React and Tailwind are first class; other frameworks are weaker, and dedicated tools do better there.
• Context limits. Large or deeply nested selections flood the model's context window. Select specific frames, not whole pages.
• Code Connect is extra setup. The biggest accuracy gains require mapping your components to a repo, which is real work.
• Seat gate on desktop. The desktop server needs a Dev or Full seat on a paid plan, though the remote server relaxes this.

The alternatives

Figma's own MCP server is one of three design-to-code paths in 2026. Dedicated platforms come first: Builder.io Visual Copilot is the strongest for component mapping and multi-framework output (React, Vue, Svelte, Angular), while Locofy and Anima are Figma-plugin approaches with their own strengths, and Anima has moved toward MCP support too. The second path is general AI agents working from screenshots: any capable coding agent can turn an image into code, but without the structured context the Figma server provides, it guesses at tokens and components.

Pick the Figma MCP server when your team already lives in Figma and wants design context inside the same AI tools you code with. Pick a dedicated platform when multi-framework output or heavy component mapping is the priority.

Bottom line

The Figma MCP server closes the oldest gap in design-to-code: the AI no longer eyeballs a mockup, it reads the design. For token-accurate, component-aware output the payoff is real, especially for design-system teams willing to set up Code Connect. Start with the remote server and a single well-structured frame, connect it to the AI tool you already use, and expand from there. The quality of your output will track the quality of your Figma file more than anything else.