home / mcp / figma mcp server

Figma MCP Server

A Figma API server implementation based on Model Context Protocol (MCP), supporting Figma plugin and widget integration.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "sichang824-mcp-figma": {
      "command": "bun",
      "args": [
        "--watch",
        "/path/to/figma-mcp/src/index.ts",
        "-e",
        "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
        "-e",
        "PORT=6000"
      ],
      "env": {
        "PORT": "6000",
        "FIGMA_PERSONAL_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

You work with the Figma MCP Server to interact with the Figma API through a structured MCP interface. It enables plugin and widget development, WebSocket communication, and a flexible environment-driven configuration to fit your development workflow.

How to use

Connect your MCP client to the Figma MCP server to perform coordinated operations against Figma. You can run the local server with your environment variables, then use the MCP client to trigger Figma actions such as file queries, node manipulations, image exports, component and widget management, and widget/plugin interactions. The server is designed to support development workflows for plugins and widgets, provide WebSocket-based communication for plugin development, and expose a rich set of Figma operation tools.

How to install

Prerequisites you need before installing the server are Node.js or Bun (the original setup uses Bun for running and building). Ensure you have a working shell environment and internet access to install dependencies.

# Step 1: Clone the project
# Note: replace <repository-url> with the actual repository URL you received for the project
git clone <repository-url>
cd figma-mcp

# Step 2: Install dependencies using Bun
bun install

# Step 3: Build the project
bun run build

# Step 4: Run the development server
bun run dev

Configuration and runtime notes

The server reads configuration from environment variables. Create a .env file or pass variables on the command line to set the Figma token and the port for the server.

# Example .env content
FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

Using command line arguments and MCP integration

You can set environment variables at runtime or via dedicated token parameters. The following shows how you can run the server with watch mode and token settings, enabling rapid development and testing.

# Pass environment variables via -e flags
bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

# Or use dedicated token parameter
bun --watch src/index.ts --token your_token

# Short form
bun --watch src/index.ts -t your_token

MCP configuration example

Add an MCP configuration entry to your cursor configuration as shown. This example uses a local runtime command to start the server with the necessary environment variables.

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

Available tools

File operations

Get files, versions, and related metadata within Figma files.

Node operations

Query and manipulate Figma nodes, including traversals and updates.

Comment operations

Create, read, update, and delete comments on Figma files.

Image operations

Export Figma elements as images or image assets.

Search functionality

Search content across Figma files to locate elements or text.

Component operations

Manage Figma components and component sets.

Canvas operations

Create and modify basic canvas shapes like rectangles, circles, and text.

Widget operations

Manage Figma widgets within files and projects.

Plugin development support

Develop and test Figma plugins via MCP integration and WebSocket communication.

Widget development support

Develop and test Figma widgets via MCP integration and WebSocket communication.