Skip to main content
This guide walks you through setting up Talk to Figma MCP with Cursor IDE, enabling AI-powered Figma design automation directly from your code editor.

Prerequisites

Before you begin, ensure you have:
  • Cursor IDE installed
  • Bun runtime installed
  • A Figma account with editor access
The fastest way to get started is using the automated setup script:
1

Install Bun

If you haven’t installed Bun yet, run:
curl -fsSL https://bun.sh/install | bash
2

Clone or download the repository

Get the Talk to Figma MCP repository:
git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
cd talk-to-figma-mcp
3

Run automated setup

Execute the setup script which will install dependencies and configure Cursor:
bun setup
This command will:
  • Install all required dependencies
  • Create .cursor/mcp.json with the MCP server configuration
  • Create .mcp.json for Claude Code compatibility
4

Start the WebSocket server

Launch the WebSocket relay server that connects Cursor to Figma:
bun socket
The server will start on port 3055. Keep this terminal window open.
5

Install the Figma plugin

See the Figma Plugin Setup guide for detailed instructions on installing and configuring the Figma plugin.
6

Restart Cursor

Restart Cursor IDE to load the new MCP configuration.

Manual Setup

If you prefer manual configuration or need to customize your setup:
1

Install dependencies

bun install
2

Create MCP configuration

Create or edit ~/.cursor/mcp.json (for global configuration) or .cursor/mcp.json in your project root:
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}
This configuration uses the published npm package for easy updates.
3

Start the WebSocket server

bun socket
4

Restart Cursor

Restart Cursor IDE to apply the MCP configuration.

Verification

To verify your setup is working:
1

Check MCP server status

In Cursor, you should see “TalkToFigma” listed in the MCP servers panel.
2

Test connection

With the WebSocket server running and Figma plugin active:
  1. Ask Cursor to “join channel test”
  2. Ask Cursor to “get document info”
If you receive Figma document information, the setup is successful!

Troubleshooting

MCP server not appearing

  • Ensure you’ve restarted Cursor after creating the configuration
  • Check that bunx is available in your PATH
  • Verify the .cursor/mcp.json file syntax is valid JSON

Connection timeouts

  • Confirm the WebSocket server is running (bun socket)
  • Check that port 3055 is not blocked by a firewall
  • Ensure the Figma plugin is active and connected to the channel

Commands not working

  • Always call join_channel before issuing Figma commands
  • Make sure you’re in the same channel in both Cursor and the Figma plugin
  • Verify the Figma plugin has the necessary permissions

Next Steps

Figma Plugin Setup

Install and configure the Figma plugin

Local Development

Set up a local development environment

Configuration Options

Using a specific version

To use a specific version instead of @latest:
{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["[email protected]"]
    }
  }
}

Environment variables

You can customize the WebSocket server port:
PORT=4000 bun socket
Remember to update the Figma plugin connection URL if you change the port.

Build docs developers (and LLMs) love