Figma

The Figma MCP Server integrates Figma design data directly into your AI-assisted code generation workflow, letting you fetch design context, variables, and assets to drive faster, more accurate frontend implementations from your design files.

How to use

Connect your MCP client to either the remote Figma MCP server or the local desktop MCP server to access design context and tooling. Once connected, you can request design context for your current Figma selection, pull variable definitions, map design nodes to code components, capture screenshots, and apply design-system rules to guide code generation. You can prompt your AI to generate framework-specific code (for example React with Tailwind) or adapt outputs to your project structure using Code Connect mappings and variables.

How to install

Prerequisites you need before installing the Figma MCP server include a modern operating system with the ability to run network requests and local servers, plus a supported MCP client. You will set up either the remote hosted MCP server or the local desktop MCP server from Figma. Follow the concrete steps below to enable the desktop server and connect a client like VS Code.

Additional setup steps for desktop server and clients

Enable the desktop MCP server in Figma and take note of the local endpoint URL. The server runs locally at the address below. You will use this URL in your MCP client configuration.

http://127.0.0.1:3845/mcp

Configure your MCP client (examples)

Add the Figma MCP server to your MCP client. The following examples show how to configure the remote server and the desktop server in VS Code and Cursor. Use the appropriate URL for your setup.

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

VS Code example configuration

In VS Code, add the Figma MCP server via the command palette and provide the server URL and an identifier.

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

Cursor example configuration

In Cursor, add a new global MCP server using the local desktop URL or the remote URL.

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

Claude Code and other editors

You can connect Claude Code to the MCP server by adding the remote or desktop server using the appropriate transport and URL. You can also install the Claude Code plugin to streamline this setup.

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

## Verification

After configuring, verify connectivity by prompting your client to retrieve the design context or to list available MCP tools. If tools are not listed, restart the Figma desktop app and your MCP client to ensure the connection is active.

## Available tools

### get\_design\_context

Fetches a structured representation of the current Figma selection to guide code generation. The default output represents React + Tailwind but can be adapted via prompts to other frameworks.

### get\_variable\_defs

Extracts variables and styles used in the selection, such as colors, spacing, and typography tokens.

### get\_code\_connect\_map

Retrieves a mapping from Figma node IDs to code components in your project, enabling reuse of existing components.

### get\_screenshot

Captures a screenshot of the current selection to preserve visual context during implementation.

### create\_design\_system\_rules

Creates a rule file to guide agents in generating code that aligns with a design system and tech stack.

### get\_metadata

Returns an XML outline of the selected nodes with basic properties for large designs or multiple selections.

### get\_figjam

Returns metadata for FigJam diagrams in XML, including node properties and screenshots.

### whoami

Remote only. Returns the authenticated Figma user identity, plans, and seat types.