Short description: Connect your AI coding assistant to Figma. Extract design context, generate code from frames, capture live UI as Figma layers, and write native content back to the canvas — all through natural language in VS Code, Cursor, Claude Code, and more.

---

What This Server Does

The Figma MCP server is Figma's official Model Context Protocol server. It bridges your AI agent directly to your Figma design files, giving it access to layout data, variables, components, styles, and Code Connect mappings — so the code your agent generates matches not just how a design looks, but how it's actually built.

Ask your AI agent things like:

• "Implement this Figma frame as a React component."
• "What color variables and spacing tokens are used in this design?"
• "Generate a flowchart for the user authentication flow."
• "Capture the live UI of my app and send it to my Figma file."
• "Create a new screen in Figma using my existing design system components."

No more copying screenshots or manually translating design specs into code. Your agent reads directly from Figma's structured design data.

---

Two Ways to Connect

Remote MCP Server (recommended)

Hosted by Figma at https://mcp.figma.com/mcp. No desktop app required. Broadest feature set including write-to-canvas. Requires Figma OAuth login.

Desktop MCP Server

Runs locally via the Figma desktop app at http://127.0.0.1:3845/mcp. Intended for specific organization and enterprise use cases. Selection-based prompting (no link needed). Narrower feature set.

Use the remote server unless you have a specific reason to use the desktop version.

---

Installation

VS Code

Use the command palette (⌘ Shift P) → search MCP: Add Server → select HTTP → paste the URL:

https://mcp.figma.com/mcp

Set the Server ID to figma. Choose global or workspace scope. Your mcp.json will contain:

jsonCOPY
{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Requires GitHub Copilot enabled on your account.

Cursor

Recommended: Install the Figma plugin inside Cursor's agent chat:

/figma-plugin install

Or add manually via Settings → Cursor Settings → MCP → Add new global MCP server:

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

Claude Code

Recommended: Install via the official Figma plugin (includes Agent Skills):

bashCOPY
claude plugin install figma@claude-plugins-official

Or add the server directly:

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

To make it available across all projects (not just the current one):

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

Codex

bashCOPY
codex mcp add figma --url https://mcp.figma.com/mcp

Windsurf / Zed / Gemini CLI / Other clients

Any MCP client supporting Streamable HTTP can connect. Add the server URL:

https://mcp.figma.com/mcp

Check your client's documentation for the exact configuration format.

---

Desktop MCP Server (alternative)

If you need the desktop server, enable it from within the Figma desktop app:

1. Open the Figma desktop app and open a Design file
2. Switch to Dev Mode (Shift + D)
3. In the MCP server section of the inspect panel, click Enable desktop MCP server
4. Copy the server URL (http://127.0.0.1:3845/mcp)

Configure your IDE to point to this local URL:

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

VS Code (mcp.json):

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

---

Authentication

The remote server uses OAuth. On first connect, your MCP client will open a browser window where you log in to Figma and grant access. No personal access token or API key required.

---

Available Tools

Design Context (Read)

Code Connect

Diagrams (FigJam)

Write to Canvas (Remote server only — free during beta, paid after)

Design System

---

Tools JSON

jsonCOPY
[
  {"name": "get_design_context", "description": "Extract design context and code from a Figma frame or layer by URL. Returns layout, styling, components, and variables. Default output is React + Tailwind, customizable via prompt. Enhanced with Code Connect for design-system-accurate component output."},
  {"name": "get_variables", "description": "Return all variables and styles used in a Figma selection — colors, spacing, typography, and other design tokens."},
  {"name": "get_metadata", "description": "Return a sparse XML outline of the current Figma selection with layer IDs, names, types, positions, and sizes. Useful for large designs to avoid overloading the context window before calling get_design_context."},
  {"name": "get_figjam_metadata", "description": "Return metadata for FigJam diagram nodes in XML format, including layer properties and node screenshots."},
  {"name": "get_code_connect_suggestions", "description": "Detect and suggest mappings between selected Figma component instances and code components in the codebase using Code Connect."},
  {"name": "confirm_code_connect", "description": "Confirm Code Connect mappings after reviewing suggestions returned by get_code_connect_suggestions."},
  {"name": "generate_diagram", "description": "Generate FigJam diagrams from Mermaid syntax or natural language descriptions. Supports flowcharts, Gantt charts, state diagrams, and sequence diagrams. Creates in a new FigJam file or adds to an existing one."},
  {"name": "generate_figma_design", "description": "Capture the live UI of a web app or site as design layers in a new or existing Figma file. Also enables writing native Figma content (frames, components, variables, auto layout, FigJam boards) directly from an MCP client. Remote server only. Free during beta."},
  {"name": "create_design_rule", "description": "Create a rules file that gives the AI agent the right context to translate Figma designs into high-quality, codebase-aware frontend code aligned with the design system and tech stack."}
]

---

How to Use: Getting Design Context

The remote Figma MCP server is link-based. You provide a Figma URL, and the agent extracts the node ID and fetches design data.

Steps:

1. In Figma Design, select the layer or frame you want
2. Right-click → Copy link to selection (or copy the URL from your browser's address bar)
3. Paste the URL into your MCP client and prompt:

Implement the design at this URL: https://www.figma.com/file/...

The agent will call get_design_context automatically and generate code based on the design.

Example prompts:

Implement the card component at <figma-link> as a React component using Tailwind.

What color tokens and spacing variables are used in <figma-link>?

Generate a flowchart for the checkout user flow using the Figma MCP generate_diagram tool.

Capture the UI of my app at localhost:3000 and create frames in <figma-file-link>.

---

Code Connect Integration

For the best code output, set up Code Connect to map your Figma library components to your actual codebase components.

With Code Connect active, get_design_context returns your real component code (not generic React), making generated output consistent with how your team actually builds.

Code Connect supports multiple frameworks per component — React, SwiftUI, Jetpack Compose, and more.

---

Rate Limits

Write-to-canvas tools are currently exempt from rate limits during the beta period.

---

Tips for Best Results

• Break designs into smaller parts — implement individual components (Card, Header, Sidebar) rather than entire screens. Large selections slow down tool calls and reduce accuracy.
• Use Code Connect — without it, the agent generates generic React. With it, it reuses your actual components.
• Be specific in your prompts — specify framework, styling system, and any constraints up front.
• Use get_metadata first for large files — get the outline, then call get_design_context only on the sections you need.
• Install Agent Skills — Figma's official skills teach your agent the right tool sequences for common workflows (implement design, connect components, create design rules).

---

Supported IDEs

• VS Code (with GitHub Copilot)
• Cursor
• Claude Code
• Codex
• Windsurf
• Zed
• Gemini CLI
• Any client supporting Streamable HTTP MCP

---

FAQ

Do I need a paid Figma plan?
The remote server is available on all plans. However, write-to-canvas features require a Full or Dev seat on a paid plan. Starter plan and View/Collab seat users are limited to 6 tool calls per month.

Do I need the Figma desktop app?
Not for the remote server. The desktop server requires the Figma desktop app, but the remote server connects via https://mcp.figma.com/mcp without it.

Why does my agent keep generating React + Tailwind?
That is the default output of get_design_context. Specify your framework in the prompt (e.g. "use Vue 3 with CSS Modules") or set up Code Connect to map components to your codebase.

What is the difference between tools and skills?
Tools are individual actions the server can perform. Skills are higher-level instructions that tell your agent which tools to use, in what order, and how to apply the results — like a workflow playbook built on top of the tools.

Is write-to-canvas free?
Currently free during the beta period. Figma has stated it will become a usage-based paid feature in the future.

Can I use this with a FigJam file?
Yes. get_figjam_metadata and generate_diagram work with FigJam. You can also reference FigJam diagrams as context when asking your agent to generate application logic.

---

Related Resources

• Figma MCP Developer Docs
• Remote Server Installation Guide
• Desktop Server Installation Guide
• Tools and Prompts Reference
• Code Connect Documentation
• GitHub: Figma MCP Server Guide
• Figma MCP Catalog (supported clients)