Figma MCP Server Setup for Cursor IDE (2026 Guide)

If you're building UI with Cursor IDE and designing in Figma, there's now a direct bridge between the two. The Figma MCP server lets you connect your Figma files to Cursor's AI agents, enabling design-to-code workflows where Cursor can read your Figma components, inspect styles, and generate code that actually matches your design — without constant copying and pasting between tools.

This guide walks through exactly how to set it up, what it can and can't do, and how to get the most out of it.

What Is the Figma MCP Server?

The Figma MCP server is a Model Context Protocol (MCP) server that exposes your Figma file data — components, frames, styles, layout properties, and text — as structured context that AI agents like Cursor can consume directly.

Instead of describing your UI to the AI or pasting screenshots, the MCP server gives Cursor programmatic access to your actual design data. The AI can then:

This closes one of the most frustrating gaps in AI-assisted development: the mismatch between what you designed and what the AI generates.

Prerequisites

Before you begin, you'll need:

Step 1: Generate a Figma Personal Access Token

1. Log into Figma and click your profile icon in the top-left
2. Go to Settings → Account → Personal access tokens
3. Click Generate new token
4. Give it a descriptive name (e.g., "Cursor MCP")
5. Set the expiration (90 days or no expiration)
6. Copy the token — you'll only see it once

Keep this token secure. It grants read access to any Figma file your account can access.

Step 2: Get Your Figma File Key

Open your Figma file in the browser. The URL looks like:

https://www.figma.com/file/ABC123XYZ456/My-Design-File

The file key is the alphanumeric string after /file/ — in this case, ABC123XYZ456. You'll need this when configuring the MCP server.

Step 3: Install the Figma MCP Server

The most widely used Figma MCP server is the community-maintained figma-mcp package. Install it globally:

npm install -g @miladkhanlou/figma-mcp

Alternatively, if you prefer to keep it local to your project:

npm install --save-dev @miladkhanlou/figma-mcp

There are also other Figma MCP server implementations — search npm for figma mcp to compare options. Some offer additional features like component-level filtering or Tailwind CSS output.

Step 4: Configure Cursor to Use the Figma MCP Server

Open your Cursor MCP configuration file. On macOS/Linux, this is typically located at:

~/.cursor/mcp.json

On Windows:

%APPDATA%\Cursor\mcp.json

Add the Figma MCP server configuration:

{
  "mcpServers": {
    "figma": {
      "command": "figma-mcp",
      "args": [],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-pat-here",
        "FIGMA_FILE_KEY": "your-file-key-here"
      }
    }
  }
}

If you installed locally (not globally), use the full path:

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["./node_modules/.bin/figma-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-pat-here",
        "FIGMA_FILE_KEY": "your-file-key-here"
      }
    }
  }
}

Save the file and restart Cursor.

Step 5: Verify the Connection

After restarting Cursor, open the MCP panel (bottom status bar or via Settings → MCP Servers). You should see figma listed with a green status indicator.

To test it, open Cursor Chat or Agent mode and try:

What components are available in the Figma file?

or

List the main frames in the Figma file.

If the server is connected correctly, you'll get a structured response based on your actual Figma file content.

Step 6: Using Figma MCP in Your Workflow

Once connected, the real power comes from combining Figma access with code generation. Here are practical prompts to try in Cursor Agent mode:

Generate a component from a Figma frame

Look at the "Card" component in the Figma file and generate a React TypeScript component that matches it exactly. Use Tailwind CSS for styling.

Inspect a design token

What are the primary color values defined in the Figma file's styles? Create a constants file with these as TypeScript variables.

Build a page from a Figma frame

Read the "Dashboard Home" frame in Figma and create a Next.js page component that matches the layout. Use placeholder data for now.

Check spacing consistency

What padding and gap values are used most commonly in the Figma file? Are they consistent with a 4px or 8px grid?

Connecting Multiple Figma Files

If your project uses multiple Figma files (e.g., a design system file and a product file), you can register multiple server instances:

{
  "mcpServers": {
    "figma-design-system": {
      "command": "figma-mcp",
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-token",
        "FIGMA_FILE_KEY": "design-system-file-key"
      }
    },
    "figma-product": {
      "command": "figma-mcp",
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-token",
        "FIGMA_FILE_KEY": "product-file-key"
      }
    }
  }
}

In your prompts, you can then reference which file you want by the server name.

What the Figma MCP Server Can and Can't Do

What it can do

Current limitations

For design-to-code accuracy, it helps to have well-named Figma layers and a clean component structure. The better organized your Figma file, the more accurately Cursor can interpret it.

Troubleshooting Common Issues

Server shows as disconnected

Cursor can't find components

Output doesn't match the design

Combining Figma MCP with Other MCP Servers

Figma MCP really shines when combined with other servers in your stack. For example:

This kind of multi-server chaining is where Cursor's agent mode becomes genuinely powerful for full-stack feature development.

Frequently Asked Questions

Does the Figma MCP server work with Figma Dev Mode?
You don't need Dev Mode — the MCP server uses the Figma REST API directly. However, Dev Mode annotations and redlines won't add extra data to what the MCP can access.

Is my Figma data sent to Cursor/Anthropic?
The MCP server runs locally and pulls data from Figma's API to your machine. That data is then passed as context to the AI model in Cursor. Review your AI provider's data handling policy if this is a concern for sensitive designs.

Can I use this with Claude Desktop instead of Cursor?
Yes — the same MCP server configuration works with Claude Desktop. The connection setup is nearly identical.

What's the difference between Figma MCP and Figma's own AI features?
Figma's native AI is designed for design tasks (auto-layout, content generation within Figma). The MCP server is specifically for exporting design context into your development environment — a different use case.

Does it support Figma variables (design tokens)?
Support for Figma Variables varies by MCP server implementation. Check the specific package's README for current support status, as this is an actively evolving area.

The Figma MCP server is one of the most practical integrations you can add to a design-to-code workflow right now. Once it's connected, the days of re-describing your UI to an AI or manually eyeballing spacing values are largely over.