What is the Figma MCP?

Allows you to directly access Figma designs and assets from within your code editor.

Getting Started

You will need:

• A Figma account (with designs)
• A code editor that supports MCP
• Node.js (maybe)

Set Up

Enable MCP in Figma

• Open Figma desktop app (it doesn’t work in the web version at the time of writing this)
• Figma menu > Preferences
• Look for Enable Dev Mode MCP Server and click on the toggle
• You should see the following message: “Server is enabled and running
• Serve will run locally on http://127.0.0.1:3845/sse

Figma Access Token

• Figma > Profile > Settings
• Navigate to Security
• Generate a new Personal Access Token

Windsurf

• Go to settings and look for MCP/plugin configuration
• Add the following config:

{
  "figma": {
    "serverUrl": "http://127.0.0.1:3845/sse",
    "accessToken": env.local.FIGMA_TOKEN
  }
}

Cursor

• Settings > MCP > Add new global MCP server
• Config:

{
  "figma": {
    "command": "npx",
    "args": ["@figma/dev-mode-mcp-server"],
    "env": {
      "FIGMA_ACCESS_TOKEN": env.local.FIGMA_TOKEN
    }
  }
}

VS Code

• Install the MCP extension from the marketplace
• Config:

{
  "mcp.servers": {
    "figma": {
      "command": "npx",
      "args": ["@figma/dev-mode-mcp-server"],
      "env": {
        "FIGMA_ACCESS_TOKEN": env.local.FIGMA_TOKEN
      }
    }
  }
}