What Is the Figma MCP Server and How Does It Work?

The Figma MCP server exposes design context to coding agents through the Model Context Protocol (MCP). Figma maintains this server as a vendor-supported integration. Anthropic’s protocol lets tools like Claude Code, Cursor, and VS Code receive structured layout data instead of screenshots.

This guide covers what the Figma MCP server provides and what it costs. It compares the two server types, documents the tools each exposes, and explains rate limits per seat. It also covers the community alternative Framelink and gives practical setup steps. The information reflects mid-2026, including Config 2026 announcements.

The Figma MCP server replaces the old workflow of pasting screenshots into an AI tool. It sends the actual node tree, auto-layout rules, variables, spacing tokens, and component relationships. The AI generates code against real design structure, not a flat image. This bidirectional connection also lets agents write content back to the Figma canvas. No other design tool integration provides both read and write access through MCP.

What Is the Difference Between the Remote and Desktop Servers?

Figma provides two MCP server types: remote and desktop. The remote server connects through a hosted URL. The desktop server runs locally from the Figma desktop app. Both expose most of the same tools, but exclusive features differ.

The remote server lives at mcp.figma.com/mcp. It uses HTTP transport (streamable HTTP). Authentication runs through Figma’s OAuth flow in the browser. It is link-based: paste a Figma URL into the MCP client and the server extracts the node ID. The remote server is available on all seats and all plans.

The desktop server runs at http://127.0.0.1:3845/mcp. It requires the Figma desktop app with Dev Mode enabled (keyboard shortcut: Shift+D). It is selection-based: select a frame or layer in Figma, and the server reads the current selection. The desktop server requires a Dev or Full seat on a paid plan.

Figma recommends the remote server for most users. It needs no desktop app installation and supports exclusive features like write-to-canvas and Code to Canvas.

The remote server provides context through links. The desktop server provides context through live selection. This distinction mirrors the broader MCP pattern where remote HTTP servers and local stdio servers serve different workflows.

Which Clients Support the Figma MCP Server?

The Figma MCP Catalog lists all approved clients. Supported clients include Claude Code, Claude Desktop, Cursor, and VS Code (with GitHub Copilot). Windsurf, Codex, Xcode 27 beta, and Gemini CLI also connect. Only clients registered in the catalog can connect to the remote server. Figma maintains a waitlist for new client registrations.

Which Tools Does the Figma MCP Server Expose?

The server exposes tools for reading design context, extracting variables, and writing back to the Figma canvas. The core tool is get_design_context. It returns a structured React and Tailwind representation of the selected frame.

get_design_context returns the layout hierarchy, text content, component properties, and styling for a frame or layer. The default output format is React with Tailwind CSS. Prompts can customize the output for other frameworks.

get_variable_defs extracts the variables and styles used in a selection: color tokens, spacing values, typography scales, and border radii. This tool helps the AI reference design tokens directly in generated code.

get_metadata returns a sparse XML representation containing layer IDs, names, types, positions, and sizes. It provides a lightweight overview without full styling detail.

get_screenshot returns an image of the selected frame or layer. It supplements the structured data with a visual reference.

get_figjam converts FigJam diagrams to XML. It lets agents incorporate architecture maps, user flows, and brainstorming content into code generation. Early-stage ideas captured in FigJam feed directly into development workflows.

The server also surfaces content from Figma Make files. Make resources provide code context from prototypes. This helps agents bridge the gap between prototype and production application.

get_code_connect_map returns mappings between Figma instance node IDs and their corresponding Code Connect components. This tool is the bridge between design components and real codebase components. It returns the component name, import path, and prop interface for each mapped node.

generate_figma_design creates Figma layers from live running UI (Code to Canvas). It captures a browser page or localhost and converts it to editable Figma frames. This tool works with the remote server only and with select clients. The round-trip from code to canvas to code closes the design-development loop.

generate_diagram converts Mermaid syntax or natural language descriptions into interactive FigJam diagrams. Agents generate the Mermaid syntax automatically from a natural language prompt. This tool is exempt from standard rate limits.

What Is Code Connect and Why Does It Matter?

Code Connect maps Figma components to actual components in the codebase. Without Code Connect, the AI generates generic React output. With Code Connect, it generates code using real imports, real prop interfaces, and real component names.

Code Connect supports multiple frameworks. Teams can map the same Figma component to React, Vue, and SwiftUI simultaneously. The desktop server uses the Code Connect mapping selected in Dev Mode. The remote server accepts a clientFrameworks parameter to specify the target framework.

Code Connect is the single largest quality lever for design-to-code output. Setting it up requires linking each Figma Library component to its code counterpart. The effort pays back on every subsequent code generation request.

What Does Write to Canvas Do?

Write-to-canvas tools let MCP clients create and modify native Figma content directly. Agents can build frames, components, variables, auto-layout structures, and text layers. FigJam content is also writable: stickies, sections, connectors, and shapes.

Write-to-canvas requires the remote server and a Full seat. Figma currently offers this feature free during the beta period. It will become a usage-based paid feature. Figma has not announced pricing or a timeline for the transition.

What Are the Figma MCP Server Rate Limits and Pricing?

The MCP server itself is free. Rate limits depend on the Figma seat type. Starter plan and View or Collab seats allow 6 tool calls per month. Dev and Full seats on paid plans follow Figma REST API Tier 1 limits. These limits operate per minute, not per month.

Six calls per month on the Starter plan is functionally unusable. A single design-to-code session consumes more than 6 calls. The Professional plan is the realistic entry point. A Full seat costs $16/month. A Dev seat costs $12/month.

Write-to-canvas tools are currently exempt from rate limits during the beta. This exemption will end when Figma introduces usage-based pricing. Budget for this transition when planning team adoption.

Dev seats provide read-only MCP access. Full seats provide both read and write capabilities. The distinction matters for teams deciding seat allocation.

Figma reserves the right to change rate limits at any time, consistent with its REST API terms.

How Do You Set Up the Figma MCP Server?

The remote server connects through a single URL. Add mcp.figma.com/mcp as an HTTP server in the MCP client. Authentication completes through Figma’s OAuth flow in the browser.

For Claude Code MCP setup:

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

For Cursor: open Settings, navigate to the MCP tab, and add https://mcp.figma.com/mcp as a new server.

For VS Code: open the command palette (Cmd+Shift+P) and select “MCP: Add Server.” Enter the Figma URL. GitHub Copilot must be enabled on the account for MCP tools to appear.

Figma also provides a plugin for supported clients. The plugin bundles MCP server settings and agent Skills for common workflows. Skills provide guidance on which tools to sequence and how to apply results. They reduce setup guesswork without adding new MCP capabilities.

Skills are distinct from MCP tools. Tools expose specific actions (get design context, extract variables). Skills teach the agent how to combine those actions for a workflow. A design-to-code skill instructs the agent to first call get_variable_defs, then get_design_context, then apply Code Connect mappings. Skills are available from Figma Community and from the community-resources repository on GitHub.

Two context-passing methods exist. The remote server accepts pasted Figma URLs. Right-click a frame in Figma and select “Copy link to selection.” Paste that URL into the prompt. The client extracts the node ID from the URL. The desktop server reads the currently selected frame directly.

How Do You Enable the Desktop Server?

Open the Figma desktop app. Create or open a Design file. Toggle to Dev Mode with Shift+D. In the inspect panel, find the MCP server section. Click “Enable desktop MCP server.” A confirmation message appears at the bottom of the screen.

The desktop server runs at http://127.0.0.1:3845/mcp. Add this URL as an HTTP server in the MCP client’s config file. No OAuth is needed for the local connection.

For Claude Desktop MCP setup, add this entry to the config:

{
  "mcpServers": {
    "figma-desktop": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

The desktop server settings include options for local images and asset downloads. Open the settings modal from the inspect panel to configure these preferences.

What Is Framelink and How Does It Compare to the Official Server?

Framelink (figma-developer-mcp) is an open-source community alternative. It connects via stdio transport using an npx package. Authentication uses a Figma API access token instead of OAuth. It works with any Figma account, including free plans.

Framelink provides two tools: get_figma_data (layout, styling, and component data) and download_figma_images (image asset export). It does not support Code Connect, write-to-canvas, or FigJam integration.

Community servers like Framelink fill gaps before vendors ship official support. Framelink launched before Figma’s official MCP server. It built a user base among developers who needed read-only design context without a paid seat.

Running both servers simultaneously can confuse the MCP client. Disable one before using the other.

How Do You Improve Design-to-Code Output Quality?

Code quality depends on the Figma file structure, not just the MCP server. The AI generates better code from well-organized files. Three practices produce the largest improvements.

Use components for reused elements. Buttons, cards, inputs, and navigation bars belong as Figma components. Link them through Code Connect so the AI uses real component imports instead of generating duplicates.

Name layers semantically. CardContainer produces better code than Group 45. PricingHeader produces better code than Frame 12. Semantic layer names translate directly into meaningful class names and component structures.

Use variables for design tokens. Color, spacing, border radius, and typography values stored as Figma variables appear in the get_variable_defs output. The AI references these tokens directly instead of hard-coding pixel values.

Auto layout communicates responsive intent. Resize frames in Figma to verify behavior before generating code. Annotations and dev resources convey design intent the node tree cannot capture. Examples include hover states, loading sequences, and conditional layouts.

Prompts also shape output quality. Specify the target framework and styling system. Vague prompts produce vague code. Naming React and Tailwind in the prompt generates more usable output. Adding a target file path narrows the result further. Think of prompts as briefs to a teammate.

Project-level guidance files reinforce consistency across sessions. Create a markdown file with rules for framework usage, naming conventions, and component patterns. Point the agent to this file in each session. The same pattern appears in GitHub’s MCP server where repository structure replaces design tokens as the context source.

What Did Config 2026 Add to the Figma MCP Server?

Config 2026 (June 24, 2026) introduced Figma Motion with MCP compatibility. Animated frames can now pass through the MCP server. Claude Code, Cursor, and other MCP clients receive structured animation context: timing values, easing curves, and keyframes. Dev Mode surfaces the full timeline for inspection. Figma supports copying animation output as CSS, JSON, or React.

Figma also expanded agent connectors and Skills across its platform. Code layers entered preview as an early-access feature. Code layers turn a design frame into an interactive code layer on the canvas. Teams can round-trip between design edits and code. Early access starts July 2026 via the Config betas waitlist.

The Figma MCP server provides the richest design context available through MCP. It works best when the Figma file is structured for AI consumption: components, variables, semantic names, and Code Connect mappings. The remote server suits most workflows. The desktop server suits teams that prefer selection-based context in Dev Mode.

For other server options organized by category, browse the MCP server directory. For the broader design category, see the design category MCP servers. For connecting servers to specific clients, see the MCP setup guides.