Draw and Design in Figma from VS Code or Cursor with MCP

📅

loading..🐩🐩🐩🐩

Before We Begin 🔗

To set up MCP in VS Code, see the earlier guide on using MCP in VS Code.

Today we'll install and use cursor-talk-to-figma-mcp, which connects AI-powered code editors to

Figma

. The project provides an MCP server that works with Cursor and VS Code, so you can automate design tasks in Figma from either editor.

We'll look at what cursor-talk-to-figma-mcp does, how to set it up, and what you can do with it.

cursor-talk-to-figma-mcp on GitHub↗

cursor-talk-to-figma-mcp

Environment Setup 🔗

The steps below are for

macOS and Linux

. Windows users should follow the Windows + WSL guide↗.

First, clone the project from GitHub.

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

1. Install Bun 🔗

Bun is a fast JavaScript runtime, bundler, and package manager. It gives you tools to run JavaScript and manage packages.

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

This command installs Bun by downloading and running a script from the web.

2. Run the Project Setup 🔗

Once Bun is installed, run this command in your terminal to set up the project.

bun setup

The setup also adds MCP to your active Cursor project.

To issue commands through Copilot in VS Code, add the following to settings.json.

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

3. Start the WebSocket Server 🔗

Start the WebSocket server so the MCP server and the Figma plugin can communicate. Run the following in your terminal.

bun socket

You should see this output when it starts successfully.

bun run src/socket.ts
WebSocket server running on port 3055
New client connected

4. Start the MCP Server 🔗

Open a new terminal and run the MCP server, which communicates with Figma.

bunx cursor-talk-to-figma-mcp

This command starts the server. You should see a message like this on success.

[INFO] Connecting to Figma socket server at ws://localhost:3055...
[INFO] FigmaMCP server running on stdio
[INFO] Connected to Figma socket server
[DEBUG] Received message: "Please join a channel to start chatting"
[LOG] myResponse"Please join a channel to start chatting"
[INFO] Received broadcast message: "Please join a channel to start chatting"

WebSocket server output above and MCP server output below

5. Install the Figma Plugin 🔗

Finally, install the Figma plugin. Open the Figma file you want to work on, go to Plugins > New Plugin, and select the Cursor Talk to Figma MCP plugin.

Installing the plugin

In the plugin window, select Use Localhost and click Connect.

After clicking Connect

Figma and Cursor are now connected. Use the channel code to read and modify the Figma design from your editor.

Click Share in the upper-right corner to copy the Figma page link. Set permissions to Anyone with the link and Can edit.

Sharing the link

Design in Figma from Your Editor 🔗

With Figma and Cursor connected, you can read and edit designs from the editor. If the connection fails, quit the editor completely and reopen it.

1. Join the Channel 🔗

Give the editor the channel code you received in step 5, Install the Figma Plugin, and ask it to join.

connect to figma channel : <채널코드>

Joining the channel

2. Read the Figma Design 🔗

Paste the link to the Figma page you copied and ask the editor to read the design file.

read figma page : <링크>

Reading the page

3. Draw in Figma 🔗

Now try creating a design in Figma. Here's an example.

큰 원을 그려 줘

Prompt to draw a circle

The editor runs create_frame, create_rectangle, and set_corner_radius in sequence to draw the circle.

Open the Figma page to see the result.

Circle drawn in Figma

Conclusion 🔗

We installed and tried cursor-talk-to-figma-mcp, a tool that connects the Cursor AI code editor with Figma. It can automate repetitive design tasks and make it easier to work across code and design.

References 🔗

Draw and Design in Figma from VS Code or Cursor with MCP | PromleeBlog