Cursor Talk to Figma MCP

Overview

Cursor Talk to Figma MCP implements a Model Context Protocol (MCP) bridge between Cursor (an agentic AI environment) and Figma. The project enables Cursor-based agents to inspect Figma documents, read selections, and perform programmatic edits—ranging from single-node text changes to batch operations, component instance override propagation, annotation conversions, and creation of FigJam connectors representing prototype flows.

Key Components / Architecture

• src/talk_to_figma_mcp/ — TypeScript MCP server that exposes tools to Cursor for interacting with Figma.
• src/cursor_mcp_plugin/ — Figma plugin (development-mode) that connects the Figma document to the WebSocket bridge and MCP server.
• src/socket.ts — WebSocket server that facilitates real-time messaging between the MCP server and the Figma plugin, including channel join/management.

The integration uses a WebSocket channel as the runtime conduit. Cursor communicates with the MCP server tools; the MCP server forwards commands/events through the socket to the Figma plugin which executes actions inside the Figma document.

Main Features / Tools

The MCP server exposes a broad set of tools for reading, creating, and modifying Figma documents, including (but not limited to):

• Document & selection: get_document_info, get_selection, get_node_info, get_nodes_info, read_my_design, set_focus, set_selections.
• Annotations: get_annotations, set_annotation, set_multiple_annotations, scan_nodes_by_types.
• Prototyping & connections: get_reactions, set_default_connector, create_connections.
• Creating & editing elements: create_rectangle, create_frame, create_text, move_node, resize_node, delete_node, clone_node.
• Text operations: scan_text_nodes, set_text_content, set_multiple_text_contents (supports chunking for large designs).
• Auto-layout & spacing: set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing.
• Styling: set_fill_color, set_stroke_color, set_corner_radius.
• Components & overrides: get_styles, get_local_components, create_component_instance, get_instance_overrides, set_instance_overrides (supports propagation of overrides across instances).
• Export & advanced: export_node_as_image (returns base64 text for supported formats).
• Connection mgmt: join_channel and WebSocket-based progress/error updates.

The repo also includes helper MCP prompts (e.g., design_strategy, text_replacement_strategy, annotation_conversion_strategy) to guide more complex automated design tasks when used from Cursor.

Quickstart / Usage

1. Install Bun (used by the project):

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

2. Run setup (this installs MCP into your Cursor active project):

bun setup

3. Start the WebSocket server:

bun socket

4. Install or load the Figma plugin (via Figma Community plugin link or by linking the local src/cursor_mcp_plugin/manifest.json in Figma dev plugins).

5. In Figma, run the Cursor MCP plugin, connect to the WebSocket channel with join_channel, then use Cursor to call MCP tools.

Notes: Windows/WSL users should adjust src/socket.ts hostname and use the provided PowerShell bun install command in the README.

Example Use Cases

• Bulk text replacement across large designs (demo contributions/videos available).
• Propagating instance overrides from a source component instance to many targets to reduce repetitive edits.
• Converting legacy manual annotations into structured Figma annotations in batch.
• Visualizing prototype flows as FigJam connector lines for design reviews.
• Automating creation of frames, layout adjustments, styling changes, and exports controlled by an AI agent.

Development & Contribution

• To develop locally, update your Cursor MCP configuration to point to the local server entry (e.g., server.ts) or reference the package in ~/.cursor/mcp.json.
• The project is TypeScript-based; the Figma plugin UI and code are in src/cursor_mcp_plugin.
• Contributions include new MCP tools, robustness improvements, and additional helper prompts.

License

MIT

References

• Figma Community plugin (install link provided in README)
• Project README and demo videos linked from repository homepage/README