Cursor Talk to Figma MCP

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

Get Started

1. Install Bun if you haven't already:

1. Run setup, this will also install MCP in your Cursor's active project

1. Start the Websocket server

1. MCP server

1. Install Figma Plugin

Quick Video Tutorial

Design Automation Example

Manual Setup and Installation

MCP Server: Integration with Cursor

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

1. Uncomment the hostname 0.0.0.0 in src/socket.ts

1. 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

MCP Tools

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

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)

Creating Elements

• create_rectangle - Create a new rectangle with position, size, and optional name

• create_frame - Create a new frame with position, size, and optional name

• create_text - Create a new text node with customizable font properties

Modifying text content

• scan_text_nodes - Scan text nodes with intelligent chunking for large designs

• set_text_content - Set the text content of a single text node

• set_multiple_text_contents - Batch update multiple text nodes efficiently

Styling

• set_fill_color - Set the fill color of a node (RGBA)

• set_stroke_color - Set the stroke color and weight of a node

• set_corner_radius - Set the corner radius of a node with optional per-corner control

Layout & Organization

• move_node - Move a node to a new position

• resize_node - Resize a node with new dimensions

• delete_node - Delete a node

• delete_multiple_nodes - Delete multiple nodes at once efficiently

• clone_node - Create a copy of an existing node with optional position offset

Components & Styles

• get_styles - Get information about local styles

• get_local_components - Get information about local components

• create_component_instance - Create an instance of a component

Export & Advanced

• export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text

Connection Management

• join_channel - Join a specific channel to communicate with Figma

Development

Building the Figma Plugin

1. Navigate to the Figma plugin directory:

2. Edit code.js and ui.html

Best Practices

1. Always join a channel before sending commands

2. Get document overview using get_document_info first

3. Check current selection with get_selection before modifications

4. Use appropriate creation tools based on needs:

5. Verify changes using get_node_info

6. Use component instances when possible for consistency

7. Handle errors appropriately as all commands can throw exceptions

8. For large designs:

9. For text operations:

10. For converting legacy annotations:

License

Cursor Talk to Figma MCP

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

Get Started

1. Install Bun if you haven't already:

1. Run setup, this will also install MCP in your Cursor's active project

1. Start the Websocket server

1. MCP server

1. Install Figma Plugin

Quick Video Tutorial

Design Automation Example

Manual Setup and Installation

MCP Server: Integration with Cursor

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

1. Uncomment the hostname 0.0.0.0 in src/socket.ts

1. 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

MCP Tools

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

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)

Creating Elements

• create_rectangle - Create a new rectangle with position, size, and optional name

• create_frame - Create a new frame with position, size, and optional name

• create_text - Create a new text node with customizable font properties

Modifying text content

• scan_text_nodes - Scan text nodes with intelligent chunking for large designs

• set_text_content - Set the text content of a single text node

• set_multiple_text_contents - Batch update multiple text nodes efficiently

Styling

• set_fill_color - Set the fill color of a node (RGBA)

• set_stroke_color - Set the stroke color and weight of a node

• set_corner_radius - Set the corner radius of a node with optional per-corner control

Layout & Organization

• move_node - Move a node to a new position

• resize_node - Resize a node with new dimensions

• delete_node - Delete a node

• delete_multiple_nodes - Delete multiple nodes at once efficiently

• clone_node - Create a copy of an existing node with optional position offset

Components & Styles

• get_styles - Get information about local styles

• get_local_components - Get information about local components

• create_component_instance - Create an instance of a component

Export & Advanced

• export_node_as_image - Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text

Connection Management

• join_channel - Join a specific channel to communicate with Figma

Development

Building the Figma Plugin

1. Navigate to the Figma plugin directory:

2. Edit code.js and ui.html

Best Practices

1. Always join a channel before sending commands

2. Get document overview using get_document_info first

3. Check current selection with get_selection before modifications

4. Use appropriate creation tools based on needs:

5. Verify changes using get_node_info

6. Use component instances when possible for consistency

7. Handle errors appropriately as all commands can throw exceptions

8. For large designs:

9. For text operations:

10. For converting legacy annotations:

License