Skip to main content
Glama
paragdesai1

Cursor Talk to Figma MCP

by paragdesai1
OverviewSchemaSourceRelated ServersDiscussionsAdmin
JavaScript
Hybrid

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.

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

Related MCP server: Figma MCP Server

Get Started

  1. Install Bun if you haven't already:

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

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

bun setup

  1. Start the Websocket server

bun socket

  1. MCP server

bunx cursor-talk-to-figma-mcp

  1. Install Figma Plugin

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.

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

  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

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

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

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

  1. Start the websocket

bun socket

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

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

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:

    cd src/cursor_mcp_plugin

  2. Edit code.js and ui.html

Best Practices

When working with the Figma MCP:

  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:

    • create_frame for containers

    • create_rectangle for basic shapes

    • create_text for text elements

  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:

    • Use chunking parameters in scan_text_nodes

    • Monitor progress through WebSocket updates

    • Implement appropriate error handling

  9. For text operations:

    • Use batch operations when possible

    • Consider structural relationships

    • Verify changes with targeted exports

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

License

MIT

Available Tools

33 tools
clone_nodeB

Clone an existing node in Figma

ParametersJSON Schema
NameRequiredDescriptionDefault
nodeIdYesThe ID of the node to clone
xNoNew X position for the clone
yNoNew Y position for the clone

TDQS

B3.3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations available, the description bears full responsibility for behavioral disclosure. It only states the basic action, omitting details like whether children are copied, if the clone gets a new ID, or any side effects.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence that conveys the core purpose without any wasteful words. It is appropriately concise for a simple tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple clone operation with only three parameters and no output schema, the description is minimally adequate. However, it lacks information about return values or default behavior (e.g., what happens if x/y are omitted), which would make it more complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so parameters are already fully documented. The description adds no additional parameter-level context beyond what the schema provides, earning the baseline score.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb 'Clone' with the resource 'an existing node in Figma', clearly distinguishing it from sibling tools like move_node or resize_node. There is no ambiguity about the tool's primary action.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, such as create_rectangle or create_component_instance. No exclusions or preferred contexts are mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

create_component_instanceC

Create an instance of a component in Figma

ParametersJSON Schema
NameRequiredDescriptionDefault
componentKeyYesKey of the component to instantiate
xYesX position
yYesY position

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description bears the full burden for behavioral disclosure. It only says 'Create an instance' without stating that this mutates the document, whether a loaded file is required, what the return value is, or any coordinate system assumptions. This is a significant gap for a creation tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is seven words long and wastes no words. However, it is essentially a restatement of the tool name with 'in Figma' appended, adding minimal new information. Still, its brevity is appropriate and it is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with 3 required parameters, no annotations, and no output schema, the description is too sparse. It omits crucial operational context such as return value, coordinate space, and how to obtain a componentKey, and it does not position the tool among the many sibling editing operations.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema descriptions cover 100% of parameters ('X position', 'Y position', 'Key of the component to instantiate'), so the description need not repeat them. The baseline of 3 applies because the description adds no additional semantic depth such as coordinate units or instructions on sourcing the componentKey.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb+resource ('Create an instance of a component') and mentions the context 'in Figma', which clearly conveys the tool's function. However, it does not distinguish from sibling creation tools like create_frame or create_text beyond the component-instance target, so it falls short of a 5.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, no prerequisites for obtaining a componentKey, and no mention of how to position the instance. There is no contrast with siblings like create_frame or clone_node, so the agent gets no decision support.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

create_frameC

Create a new frame in Figma

ParametersJSON Schema
NameRequiredDescriptionDefault
xYesX position
yYesY position
widthYesWidth of the frame
heightYesHeight of the frame
nameNoOptional name for the frame
parentIdNoOptional parent node ID to append the frame to
fillColor