Cursor Talk to Figma MCP

This project implements a Model Context Protocol (MCP) integration between Cursor AI and Figma, allowing Cursor to communicate with Figma for reading designs and modifying them programmatically.

cursorfigmavideo.mp4

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

Install Bun if you haven't already:

curl -fsSL https://bun.sh/install | bash

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

bun setup

Start the Websocket server

bun socket

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.

Development Setup

To develop, update your mcp config to direct to your local directory.

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
    }
  }
}

Manual Setup and Installation

MCP Server: Integration with Cursor

Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

WebSocket Server

Start the WebSocket server:

bun socket

Figma Plugin

In Figma, go to Plugins > Development > New Plugin
Choose "Link existing plugin"
Select the src/cursor_mcp_plugin/manifest.json file
The plugin should now be available in your Figma development plugins

Windows + WSL Guide

Install bun via powershell

powershell -c "irm bun.sh/install.ps1|iex"

Uncomment the hostname 0.0.0.0 in src/socket.ts

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

Start the websocket

bun socket

Usage

Start the WebSocket server
Install the MCP server in Cursor
Open Figma and run the Cursor MCP Plugin
Connect the plugin to the WebSocket server by joining a channel using join_channel
Use Cursor to communicate with Figma using the MCP tools

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

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

Auto Layout & Spacing

set_layout_mode - Set the layout mode and wrap behavior of a frame (NONE, HORIZONTAL, VERTICAL)
set_padding - Set padding values for an auto-layout frame (top, right, bottom, left)
set_axis_align - Set primary and counter axis alignment for auto-layout frames
set_layout_sizing - Set horizontal and vertical sizing modes for auto-layout frames (FIXED, HUG, FILL)
set_item_spacing - Set distance between children in an auto-layout frame

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
get_instance_overrides - Extract override properties from a selected component instance
set_instance_overrides - Apply extracted overrides to target instances

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

MCP Prompts

The MCP server includes several helper prompts to guide you through complex design tasks:

design_strategy - Best practices for working with Figma designs
read_design_strategy - Best practices for reading Figma designs
text_replacement_strategy - Systematic approach for replacing text in Figma designs
annotation_conversion_strategy - Strategy for converting manual annotations to Figma's native annotations
swap_overrides_instances - Strategy for transferring overrides between component instances in Figma
reaction_to_connector_strategy - Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions', and guiding the use 'create_connections' in sequence

Development

Building the Figma Plugin

Navigate to the Figma plugin directory:
```
cd src/cursor_mcp_plugin
```
Edit code.js and ui.html

Best Practices

When working with the Figma MCP:

Always join a channel before sending commands
Get document overview using get_document_info first
Check current selection with get_selection before modifications
Use appropriate creation tools based on needs:
- create_frame for containers
- create_rectangle for basic shapes
- create_text for text elements
Verify changes using get_node_info
Use component instances when possible for consistency
Handle errors appropriately as all commands can throw exceptions
For large designs:
- Use chunking parameters in scan_text_nodes
- Monitor progress through WebSocket updates
- Implement appropriate error handling
For text operations:
- Use batch operations when possible
- Consider structural relationships
- Verify changes with targeted exports
For converting legacy annotations:
- Scan text nodes to identify numbered markers and descriptions
- Use scan_nodes_by_types to find UI elements that annotations refer to
- Match markers with their target elements using path, name, or proximity
- Categorize annotations appropriately with get_annotations
- Create native annotations with set_multiple_annotations in batches
- Verify all annotations are properly linked to their targets
- Delete legacy annotation nodes after successful conversion
Visualize prototype noodles as FigJam connectors:

Use get_reactions to extract prototype flows,
set a default connector with set_default_connector,
and generate connector lines with create_connections for clear visual flow mapping.

License

MIT

Features

Rate this server

Features

Rate this server