Figma MCP Server

The Figma MCP server is the official Model Context Protocol integration maintained by Figma. It connects AI coding agents (Claude Code, Cursor, VS Code, Codex) to Figma Design and FigJam files, allowing agents to read structured design context (frames, components, variables, styles, screenshots) and turn that context into production code. The server is offered in two flavors: a recommended remote server hosted at https://mcp.figma.com/mcp and a local desktop server that runs at http://127.0.0.1:3845/mcp via the Figma desktop app.

Beyond read-only design context, the remote server supports write-to-canvas workflows. Agents can create new design and FigJam files, generate FigJam diagrams from Mermaid syntax, upload image assets, search a team's design system, and use the general-purpose use_figma tool to create, edit, delete, or inspect frames, components, variants, variables, styles, text, and images. Code Connect tools tie generated code back to real codebase components for consistency.

The server is currently in beta and free to use; Figma has stated it will eventually become a usage-based paid feature. Authentication is handled through Figma OAuth, scoped to the user's Figma account and plan.

Tools

Prerequisites

• A Figma account (sign in via OAuth during setup)
• A supported MCP client: Claude Code, Cursor, VS Code, or Codex
• For the desktop server only: the latest Figma desktop app with Dev Mode enabled

Remote server (recommended)

The remote server is hosted at https://mcp.figma.com/mcp and offers the broadest set of tools (write-to-canvas, design system search, file creation).

Claude Code:

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

Use --scope user to make it available across all projects. Then run /mcp, select figma, and click Authenticate.

VS Code (mcp.json):

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

Cursor: In agent chat, type /add-plugin figma, or use the Figma MCP deep link from the Figma docs and click Install, then Allow Access.

Codex CLI:

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

Desktop server (alternative)

Open the Figma desktop app, open a Design file, toggle Dev Mode (Shift+D), and in the Inspect panel click "Enable desktop MCP server". The server runs locally at http://127.0.0.1:3845/mcp.

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

Verify

In your MCP client, type #get_design_context (or invoke any tool) to confirm the server is connected.

• Select a frame in Figma and ask an agent to generate a React + Tailwind component that matches the layout, variables, and styles.
• Capture live UI from a localhost or staging URL and write it back into a new Figma file as editable design layers for design review.
• Search a connected design system for the correct Button, Input, or Card component and have the agent use the canonical component instead of inventing one.
• Generate FigJam flowcharts, sequence diagrams, or Gantt charts from a Mermaid spec or a plain-English description.
• Use Code Connect to map Figma components to real code components so generated output stays consistent with the existing codebase.

• "Here is a Figma URL, get the design context and screenshot, then implement this screen as a React component using our Tailwind tokens."
• "Search our design system for a primary button and use it in the form I'm building."
• "Start my dev server on localhost:3000 and capture the current UI into a new Figma design file."
• "Generate a FigJam sequence diagram from this Mermaid block and put it in my drafts."
• "Inspect my current Figma selection and list all variables and styles it uses."

• Official, first-party server maintained by Figma with broad coverage of Dev Mode and write-to-canvas features.
• Remote-hosted option requires no local installation or Figma desktop app, and supports Claude Code, Cursor, VS Code, and Codex.
• Includes Code Connect tools so generated code can reuse the team's actual component library.
• get_design_context plus get_screenshot and get_variable_defs produce high-fidelity code generation context.

• Currently in beta; Figma has stated it will become a usage-based paid feature later.
• Several tools (write-to-canvas, design system search, file creation, asset upload) are remote-only and unavailable on the desktop server.
• Limited to supported MCP clients listed in Figma's MCP Catalog; other clients require waitlist access.

• Figma-Context-MCP (GLips), a popular community MCP server that exposes Figma layout information via the Figma REST API.
• figma-developer-mcp, another community implementation focused on read-only design context.
• The Figma REST API used directly via a generic HTTP MCP tool, if you only need read access and want to avoid OAuth setup.