Figma MCP server

The Figma MCP Server is an implementation that enables interaction with the Figma API using Model Context Protocol (MCP). It provides a WebSocket server for plugin communication and supports widget development with configurable environment settings.

Installation

Prerequisites

You'll need Bun installed on your system to run the Figma MCP Server.

Setup Steps

1. Clone the repository:

git clone <repository-url>
cd figma-mcp

2. Install dependencies:

bun install

3. Create a .env file with the following variables:

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

Configuration

Getting a Figma Access Token

To use the Figma API, you'll need a personal access token:

1. Log in to Figma
2. Navigate to Account Settings > Personal Access Tokens
3. Create a new access token
4. Copy the token to your .env file or use it in command line arguments

Running the Server

Build the Project

bun run build

Start the Development Server

bun run dev

Command Line Configuration

You can set environment variables directly via command line arguments:

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

For convenience, you can specify the token with a dedicated parameter:

bun --watch src/index.ts --token your_token

Or use the shorthand version:

bun --watch src/index.ts -t your_token

Configuring in Cursor

Add this configuration to your .cursor/mcp.json file:

{
  "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 Figma Operations

The MCP server provides tools for various Figma operations:

• File operations: Access files and file versions
• Node operations: Get and modify Figma nodes
• Comment operations: Create and manage comments
• Image operations: Export Figma elements as images
• Search functionality: Find content within Figma files
• Component operations: Work with Figma components
• Canvas operations: Create shapes, text, and other elements
• Widget operations: Manage Figma widgets

Figma Plugin Development

Plugin Testing

Build the plugin:

bun run build:plugin

Run in development mode:

bun run dev:plugin

Loading Your Plugin in Figma

1. In Figma, right-click to open the menu
2. Go to Plugins → Development → Import plugin from manifest...
3. Select your plugin's manifest.json file
4. The plugin will appear in Figma's plugin menu

Server Communication

Your plugin can communicate with the MCP server through WebSocket connections to:

• Process complex data
• Integrate with external APIs
• Store data across sessions
• Implement AI functionality

Widget Development

Build your widget:

bun run build:widget

Run widget in development mode:

bun run dev:widget

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.