Enables comprehensive interaction with Figma designs including reading document information, modifying elements, creating shapes and text, managing styles and components, handling annotations, batch text operations, and exporting designs as images.
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 integrationsrc/cursor_mcp_plugin/
- Figma plugin for communicating with Cursorsrc/socket.ts
- WebSocket server that facilitates communication between the MCP server and Figma plugin
Get Started
Install Bun if you haven't already:
Run setup, this will also install MCP in your Cursor's active project
Start the Websocket server
MCP server
Install Figma Plugin
Quick Video Tutorial
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
:
WebSocket Server
Start the WebSocket server:
Figma Plugin
In Figma, go to Plugins > Development > New Plugin
Choose "Link existing plugin"
Select the
src/cursor_mcp_plugin/manifest.json
fileThe plugin should now be available in your Figma development plugins
Windows + WSL Guide
Install bun via powershell
Uncomment the hostname
0.0.0.0
insrc/socket.ts
Start the websocket
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 documentget_selection
- Get information about the current selectionread_my_design
- Get detailed node information about the current selection without parametersget_node_info
- Get detailed information about a specific nodeget_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 nodeset_annotation
- Create or update an annotation with markdown supportset_multiple_annotations
- Batch create/update multiple annotations efficientlyscan_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 namecreate_frame
- Create a new frame with position, size, and optional namecreate_text
- Create a new text node with customizable font properties
Modifying text content
scan_text_nodes
- Scan text nodes with intelligent chunking for large designsset_text_content
- Set the text content of a single text nodeset_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 nodeset_corner_radius
- Set the corner radius of a node with optional per-corner control
Layout & Organization
move_node
- Move a node to a new positionresize_node
- Resize a node with new dimensionsdelete_node
- Delete a nodedelete_multiple_nodes
- Delete multiple nodes at once efficientlyclone_node
- Create a copy of an existing node with optional position offset
Components & Styles
get_styles
- Get information about local stylesget_local_components
- Get information about local componentsget_team_components
- Get information about team componentscreate_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)execute_figma_code
- Execute arbitrary JavaScript code in Figma (use with caution)
Connection Management
join_channel
- Join a specific channel to communicate with Figma
Development
Building the Figma Plugin
Navigate to the Figma plugin directory:
cd src/cursor_mcp_pluginEdit 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
firstCheck current selection with
get_selection
before modificationsUse appropriate creation tools based on needs:
create_frame
for containerscreate_rectangle
for basic shapescreate_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 toMatch markers with their target elements using path, name, or proximity
Categorize annotations appropriately with
get_annotations
Create native annotations with
set_multiple_annotations
in batchesVerify all annotations are properly linked to their targets
Delete legacy annotation nodes after successful conversion
License
MIT
This server cannot be installed
local-only server
The server can only run on the client's local machine because it depends on local resources.
Enables AI assistants like Cursor to interact with Figma designs programmatically. Supports reading design information, modifying elements, creating components, managing text content, and automating design workflows through natural language commands.