grab/cursor-talk-to-figma-mcp

This project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent to communicate with Figma for reading designs and modifying them programmatically.
https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c
Project Structure
- src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration
- src/cursor_mcp_plugin/ - Figma plugin for communicating with Cursor
- src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin
How to use
1. Install Bun if you haven't already:
2. Run setup, this will also install MCP in your Cursor's active project
3. Start the Websocket server
4. **NEW** Install Figma plugin from Figma community page or install locally
Quick Video Tutorial
Video Link
Design Automation Example
**Bulk text content replacement**
Thanks to @dusskapark for contributing the bulk text replacement feature. Here is the demo video.
**Instance Override Propagation**
Another contribution from @dusskapark
Propagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations. Check out our demo video.
Manual Setup and Installation
MCP Server: Integration with Cursor
Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:
WebSocket Server
Start the WebSocket server:
Figma Plugin
1. In Figma, go to Plugins > Development > New Plugin
2. Choose "Link existing plugin"
3. Select the src/cursor_mcp_plugin/manifest.json file
4. The plugin should now be available in your Figma development plugins
Windows + WSL Guide
1. Install bun via powershell
2. Uncomment the hostname 0.0.0.0 in src/socket.ts
3. Start the websocket
Usage
1. Start the WebSocket server
2. Install the MCP server in Cursor
3. Open Figma and run the Cursor MCP Plugin
4. Connect the plugin to the WebSocket server by joining a channel using join_channel
5. Use Cursor to communicate with Figma using the MCP tools
Local Development Setup
To develop, update your mcp config to direct to your local directory.
MCP Tools
The MCP server provides the following tools for interacting with Figma:
Document & Selection
- get_document_info - Get information about the current Figma document
- get_selection - Get information about the current selection
- read_my_design - Get detailed node information about the current selection without parameters
- get_node_info - Get detailed information about a specific node
- get_nodes_info - Get detailed information about multiple nodes by providing an array of node IDs
- set_focus - Set focus on a specific node by selecting it and scrolling viewport to it
- set_selections - Set selection to multiple nodes and scroll viewport to show them
Annotations
- get_annotations - Get all annotations in the current document or specific node
- set_annotation - Create or update an annotation with markdown support
- set_multiple_annotations - Batch create/update multiple annotations efficiently
- scan_nodes_by_types - Scan for nodes with specific types (useful for finding annotation targets)
Prototyping & Connections
- get_reactions - Get all prototype reactions from nodes with visual highlight animation
- set_default_connector - Set a copied FigJam connector as the default connector style for creating connections (must be set before creating connections)
- create_connections - Create FigJam connector lines between nodes, based on prototype flows or custom mapping