Figma Plugin Setup

Auto-generate your docs

The Figma plugin is a crucial component that enables communication between your AI agent (Cursor or Claude Code) and Figma. This guide covers both the published plugin and local development setup.

Installation Methods

You can install the plugin in two ways:

From Figma Community (Recommended for most users)
Local Development Plugin (For contributors or customization)

Installing from Figma Community

Open the plugin page

Visit the Cursor Talk to Figma MCP Plugin on Figma Community.

Install the plugin

Click the “Install” button on the plugin page.

Open Figma

Open any Figma or FigJam file where you want to use the plugin.

Run the plugin

Right-click on the canvas or use the menu
Go to Plugins → Cursor MCP Plugin
The plugin UI will appear

Installing for Local Development

For plugin development or customization:

Clone the repository

git clone https://github.com/grab/cursor-talk-to-figma-mcp.git
cd talk-to-figma-mcp

Open Figma plugin development

In Figma Desktop:

Go to Plugins → Development → New Plugin
Choose “Link existing plugin”

Link the plugin manifest

Navigate to and select:

src/cursor_mcp_plugin/manifest.json

The plugin will now appear in your development plugins list.

Run the development plugin

Go to Plugins → Development → Cursor MCP Plugin
The plugin UI will open

Plugin Configuration

The plugin requires a WebSocket connection to communicate with your MCP server.

Plugin Manifest

The plugin is configured via manifest.json:

{
  "name": "Cursor MCP Plugin",
  "id": "1485687494525374295",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": [
    "figma",
    "figjam"
  ],
  "permissions": [],
  "networkAccess": {
    "allowedDomains": [
      "ws://localhost:3055"
    ],
    "reasoning": "This is a plugin for Cursor that allows you to connect to a local server",
    "devAllowedDomains": [
      "http://localhost:3055",
      "ws://localhost:3055"
    ]
  },
  "documentAccess": "dynamic-page"
}

Key configuration:

editorType: Works in both Figma and FigJam
networkAccess: Connects to localhost WebSocket server on port 3055
documentAccess: dynamic-page allows access to the current page

Using the Plugin

Start the WebSocket server

Before using the plugin, ensure the WebSocket server is running:

bun socket

You should see:

WebSocket server running on port 3055

Open the plugin in Figma

Run the Cursor MCP Plugin from the Plugins menu.

Connect to WebSocket

In the plugin UI:

The default WebSocket URL is ws://localhost:3055
Click “Connect” to establish the connection
Enter a channel name (e.g., “test” or “my-project”)
Click “Join Channel”

Verify connection

You should see a success message indicating you’ve joined the channel. The WebSocket server logs will also show the connection.

Join the same channel in your AI agent

In Cursor or Claude Code, use the join_channel tool with the same channel name.

Channel-Based Communication

The plugin uses channels to isolate communication between different sessions:

Each channel is independent
Multiple users can use different channels simultaneously
Only clients in the same channel can communicate
Use descriptive channel names for different projects

Example workflow:

Plugin joins channel "design-system"
Cursor/Claude joins channel "design-system"
Commands from Cursor → WebSocket → Plugin (same channel)
Results from Plugin → WebSocket → Cursor (same channel)

Plugin Architecture

The plugin consists of three main files:

code.js (Main Thread)

Handles all Figma API operations:

Reads and modifies Figma nodes
Executes 30+ commands (create, update, delete, export)
Manages chunking for large operations
Sends results back through WebSocket

ui.html (Plugin UI)

Provides the user interface:

WebSocket connection management
Channel selection
Connection status display
Real-time message logging

manifest.json (Configuration)

Defines plugin metadata and permissions:

Network access configuration
Editor compatibility (Figma/FigJam)
Document access permissions

Troubleshooting

Plugin won’t connect

WebSocket server not running

Ensure bun socket is running before launching the plugin.Check the terminal for:

WebSocket server running on port 3055

Port 3055 blocked

If port 3055 is in use, you can specify a different port:

PORT=4000 bun socket

Update the plugin UI to connect to the new port.

Firewall blocking connection

Ensure your firewall allows localhost connections on port 3055.

Commands not executing

Not in the same channel

Verify both the plugin and your AI agent are in the same channel.

Plugin not responding

Try:

Closing and reopening the plugin
Restarting the WebSocket server
Rejoining the channel

Permission errors

Some operations require:

Selected nodes (for modification commands)
Edit access to the file
Proper node types (e.g., can’t set text on rectangles)

Windows + WSL specific issues

See the Windows + WSL Setup Guide for platform-specific troubleshooting.

Development Notes

Plugin is not built/bundled

The plugin files are used directly:

code.js is vanilla JavaScript (no build step)
ui.html is plain HTML with inline JavaScript
No transpilation or bundling required

Making changes

When developing the plugin locally:

Edit the files

Modify code.js or ui.html in src/cursor_mcp_plugin/

Reload the plugin

In Figma:

Close the plugin if it’s running
Go to Plugins → Development → Cursor MCP Plugin
The changes will be reflected immediately

No rebuild or restart required - Figma loads the files directly.

Next Steps

Available Tools

Explore all 50+ MCP tools available

Best Practices

Learn effective design automation patterns

Advanced Configuration

Custom WebSocket URL

For non-standard setups, you can modify the WebSocket URL in the plugin UI:

Different port: ws://localhost:4000
Remote server: ws://your-server.com:3055
Secure connection: wss://your-server.com:3055

Multiple simultaneous connections

You can run multiple instances of the plugin in different Figma files, each connected to different channels for parallel work.

⌘I

Get Started

Core Concepts

Guides

Best Practices

Installation Methods

Installing from Figma Community

Installing for Local Development

Plugin Configuration

Plugin Manifest

Using the Plugin

Channel-Based Communication

Example workflow:

Plugin Architecture

code.js (Main Thread)

ui.html (Plugin UI)

manifest.json (Configuration)

Troubleshooting

Plugin won’t connect

Commands not executing

Windows + WSL specific issues

Development Notes

Plugin is not built/bundled

Making changes

Next Steps

Available Tools

Best Practices

Advanced Configuration

Custom WebSocket URL

Multiple simultaneous connections

​Installation Methods

​Installing from Figma Community

​Installing for Local Development

​Plugin Configuration

​Plugin Manifest

​Using the Plugin

​Channel-Based Communication

​Example workflow:

​Plugin Architecture

​code.js (Main Thread)

​ui.html (Plugin UI)

​manifest.json (Configuration)

​Troubleshooting

​Plugin won’t connect

​Commands not executing

​Windows + WSL specific issues

​Development Notes

​Plugin is not built/bundled

​Making changes

​Next Steps

Available Tools

Best Practices

​Advanced Configuration

​Custom WebSocket URL

​Multiple simultaneous connections

Installation Methods

Installing from Figma Community

Installing for Local Development

Plugin Configuration

Plugin Manifest

Using the Plugin

Channel-Based Communication

Example workflow:

Plugin Architecture

code.js (Main Thread)

ui.html (Plugin UI)

manifest.json (Configuration)

Troubleshooting

Plugin won’t connect

Commands not executing

Windows + WSL specific issues

Development Notes

Plugin is not built/bundled

Making changes

Next Steps

Advanced Configuration

Custom WebSocket URL

Multiple simultaneous connections