Figma MCP Server

What is Figma MCP Server?

The Figma MCP Server is an implementation of the Model Context Protocol (MCP) that integrates with the Figma API. It provides a WebSocket server for Figma plugin and widget communication, enabling automation, data processing, and external service integration. This server is targeted at developers building or extending Figma plugins and widgets.

How to use Figma MCP Server?

Clone the repository, install dependencies with bun install, and set FIGMA_PERSONAL_ACCESS_TOKEN either in a .env file, via command-line arguments (-e or --token), or by configuring the token in an MCP client like Cursor. Run the development server with bun run dev and use its built‑in tools to perform Figma operations. For Cursor, add the server to .cursor/mcp.json with the appropriate command and arguments.

Key features of Figma MCP Server

• Interact with Figma API through MCP
• WebSocket server for Figma plugin communication
• Support for Figma widget development
• Environment variable configuration via command line arguments
• Rich set of Figma operation tools
• Plugin and widget building and development modes

Use cases of Figma MCP Server

• Automate Figma workflow tasks (file, node, comment operations)
• Export Figma elements as images programmatically
• Integrate AI or external services with Figma plugins via WebSocket
• Develop, test, and deploy custom Figma plugins and widgets
• Search and manage Figma components and canvases

FAQ from Figma MCP Server

What does the Figma MCP Server do?

It acts as a bridge between Figma’s API and MCP clients, allowing you to perform Figma operations (file, node, comment, image, component, canvas, and widget actions) programmatically. It also supports real‑time communication with Figma plugins via WebSocket.

How do I get a Figma personal access token?

Log in to Figma, go to Account Settings > Personal Access Tokens, create a new token, and copy it to your .env file or pass it via command line arguments using -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token or --token your_token.

How do I configure the server in Cursor?

Add the following to .cursor/mcp.json:

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token",
      "-e",
      "PORT=6000"
    ]
  }
}

What tools are available?

Tools include file operations, node manipulation, comment management, image export, search, component management, canvas object creation (rectangles, circles, text), and widget operations.

How do I load a plugin in Figma?

In Figma, right‑click to open the menu, go to Plugins > Development > Import plugin from manifest..., and select the plugin’s manifest.json file. The plugin will then appear in Figma’s plugin menu.