MCP service for reading and modifying Figma designs using Cursor.

General Introduction

Cursor Talk to Figma MCP is an open-source project that was developed through the Model Context Protocol (MCP) protocol connects the AI programming tool Cursor to the design software Figma. it was created by developer Sonny Lazuardi, is hosted on GitHub, and has a release date of March 17, 2025. The tool's core function is to allow Cursor to read Figma design files and generate code, or modify the design content directly. It is written in TypeScript and incorporates WebSocket technology for real-time communication. Whether it's quickly turning a design into code or manipulating a design file with AI, this free tool helps developers be more efficient. Anyone can download the code and participate in development.

bolt.new New feature that went live a few days ago:Convert Figma Designs to Full Stack Applications with One Click

Function List

• Connecting Cursor and Figma: Bi-directional communication is achieved through the MCP protocol and WebSocket.
• Read design information: Get a document overview of a Figma file, selected content, or node-specific details.
• Creating Design Elements: Add a rectangle, frame, or text node to Figma.
• Modifying styles and layouts: Adjust colors, borders, rounded corners, or move, resize, or delete nodes.
• Generate Code: Reduce manual writing time by turning Figma designs into usable code.
• Support for component management: Read local or team components to create component instances.
• export function: Export design nodes to PNG, JPG, SVG or PDF format.
• Open source and free: The code is publicly available and developers are free to modify or optimize it.

Using Help

Installation process

To use the Cursor Talk to Figma MCP, several parts need to be installed and configured. Below are the detailed steps:

1. Preparing the environment

• Installation Bun: Bun is a tool to run JavaScript quickly. If you don't have it installed, open a terminal and type it in:

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

• Installing Cursor: Download and install the Cursor AI programming tool from the official website (cursor.ai).
• Get Figma Token: Log in to Figma, generate a Personal Access Token in your account settings, and save it.

2. Downloading the project

• Run the following command in the terminal to download the project code:

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

• Go to the project catalog:

cd cursor-talk-to-figma-mcp

3. Installation of dependencies and setup

• Run in the project directory:

bun setup

• This installs all dependencies (including TypeScript and WebSocket libraries) and automatically configures the MCP server in Cursor.

4. Start the WebSocket server

• Enter it in the terminal:

bun start

• Or run it manually:

bun run src/socket.ts

• This will start the WebSocket server for connecting the Figma plugin to the MCP.

5. Installing the Figma plug-in

• Open the Figma desktop application.
• Click on the top menu "Plugins" > "Development" > "New Plugin".
• Select "Link Existing Plugins" and locate the src/cursor_mcp_plugin/manifest.json Documentation.
• After confirmation, the plugin will appear in Figma's list of development plugins.

6. Configuration of the Cursor MCP server (manual mode)

• in the event that bun setup Not automated, can be configured manually.
• show (a ticket) ~/.cursor/mcp.json file, add the following:

{
"mcpServers": {
"TalkToFigma": {
"command": "bun".
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]
}
}
}

• interchangeability /path/to/ The actual path for your project.

How to use the main features

After the installation is complete, follow the steps below:

starter kit

1. Running a WebSocket Server::
   • In the terminal, type bun start, ensure that the server is running.
2. Launching the Figma plug-in::
   • In Figma, right-click on the canvas and select "Plugins" > "Develop" > Run the plugin you just installed.
   • After the plugin starts, type join_channel Join the communications channel.
3. Connect Cursor::
   • Open Cursor and make sure the MCP server is configured and running.

Read design information

• Open a design file in Figma and select the section to be manipulated.
• Enter commands in the Cursor's "Composer" mode, for example:
  • "Get current document information": call the get_document_infoThe
  • "View Selected Content": call the get_selectionThe
• The Cursor returns design data, such as layouts, styles, etc., via the MCP.

Creating and modifying designs

• Enter specific commands in the Cursor:
  • Creates a rectangle:create_rectangle, specify the location and size.
  • Add text:create_text, set the content and font.
  • Modify the color:set_fill_colorThe RGBA value is entered.
• Changes are reflected in Figma files in real time.

Generate Code

• Paste a link to the Figma file in the Cursor (e.g. https://www.figma.com/file/xxx/yyy).
• Enter the command, "Generate this design of the React Code."
• Cursor will read the design and output the corresponding code.

Exporting the design

• Enter in Cursor:export_node_as_imageThe following is a list of the formats (PNG, JPG, etc.) that can be selected.
• The exported file is saved locally.

Handling Precautions

• connection sequence: Start WebSocket first, then run the plugin, and finally use Cursor to send commands.
• error handling: If the command fails, check the terminal logs to verify that the network and permissions are OK.
• Performance Tips: When dealing with large files, first use the get_document_info View the overview and then manipulate specific nodes.

The power of this tool is that it makes design and coding seamless. You can manipulate Figma directly with AI or generate code quickly, eliminating a lot of repetitive work.

application scenario

1. Rapid Prototyping
   Scenario Description: Product managers need to validate a design idea. They can use Cursor to create elements in Figma and then export the code to quickly generate an interactable prototype.
2. Synchronization of design and development
   Scenario Description: After the designer adjusts the Figma file, the developer reads the latest design through the Cursor and updates the code in real time, reducing communication costs.
3. Automated Style Adjustment
   Scenario Description: Teams need to modify design colors or layouts in bulk. Developers can enter commands using Cursor to automate the adjustments.

QA

1. Do I need to pay for this tool?
   Answer: no need. It is an open source project, free to use, and the code is publicly available on GitHub.
2. What programming languages are supported for output?
   Answer: Depend on the ability of Cursor, currently support React, HTML, CSS and other common front-end code, specific by the Cursor generation logic.
3. Can I work with more than one Figma file at the same time?
   Answer: Yes, but you need to add a different channel for each file (using the join_channel), make sure the command points to the correct file.