Enables seamless integration between Cursor AI and Figma using Model Context Protocol to programmatically read, modify, annotate, and automate design elements with advanced document, selection, text, and styling tools.
Unlock the full potential of Cursor Talk to Figma MCP through LangDB's AI Gateway. Get enterprise-grade security, analytics, and seamless integration with zero configuration.
Free tier available • No credit card required
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
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 plugincurl -fsSL https://bun.sh/install | bash
bun setup
bun socket
bunx cursor-talk-to-figma-mcp
Bulk text content replacement
Thanks to @dusskapark for contributing the bulk text replacement feature. Here is the demo video.
Add the server to your Cursor MCP configuration in ~/.cursor/mcp.json
:
{ "mcpServers": { "TalkToFigma": { "command": "bunx", "args": ["cursor-talk-to-figma-mcp@latest"] } } }
Start the WebSocket server:
bun socket
src/cursor_mcp_plugin/manifest.json
filepowershell -c "irm bun.sh/install.ps1|iex"
0.0.0.0
in src/socket.ts
// uncomment this to allow connections in windows wsl hostname: "0.0.0.0",
bun socket
join_channel
The MCP server provides the following tools for interacting with Figma:
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 IDsget_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)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 propertiesscan_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 efficientlyset_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 controlmove_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 offsetget_styles
- Get information about local stylesget_local_components
- Get information about local componentscreate_component_instance
- Create an instance of a componentexport_node_as_image
- Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as textjoin_channel
- Join a specific channel to communicate with FigmaNavigate to the Figma plugin directory:
cd src/cursor_mcp_plugin
Edit code.js and ui.html
When working with the Figma MCP:
get_document_info
firstget_selection
before modificationscreate_frame
for containerscreate_rectangle
for basic shapescreate_text
for text elementsget_node_info
scan_text_nodes
scan_nodes_by_types
to find UI elements that annotations refer toget_annotations
set_multiple_annotations
in batchesMIT
Discover shared experiences
Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!