cursor-talk-to-figma-mcp

Name: cursor-talk-to-figma-mcp
Author: grab

5.7kinstalls/mo · npm6.9kstars750forks

How to install cursor-talk-to-figma-mcp?

grab/cursor-talk-to-figma-mcp

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

Installs into the current project.

Summary

This project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent to communicate with Figma for reading designs and modifying them programmatically.

Files · 1

View on GitHub

README.md

1	# Talk to Figma MCP
2
3	This project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent to communicate with Figma for reading designs and modifying them programmatically.
4
5	https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c
6
7	## Project Structure
8
9	- `src/talk_to_figma_mcp/` - TypeScript MCP server for Figma integration
10	- `src/cursor_mcp_plugin/` - Figma plugin for communicating with Cursor
11	- `src/socket.ts` - WebSocket server that facilitates communication between the MCP server and Figma plugin
12
13	## How to use
14
15	1. Install Bun if you haven't already:
16
17	```bash
18	curl -fsSL https://bun.sh/install \| bash
19	```
20
21	2. Run setup, this will also install MCP in your Cursor's active project
22
23	```bash
24	bun setup
25	```
26
27	3. Start the Websocket server
28
29	```bash
30	bun socket
31	```
32
33	4. NEW Install Figma plugin from [Figma community page](https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin) or [install locally](#figma-plugin)
34
35	## Quick Video Tutorial
36
37	[Video Link](https://www.linkedin.com/posts/sonnylazuardi_just-wanted-to-share-my-latest-experiment-activity-7307821553654657024-yrh8)
38
39	## Design Automation Example
40
41	Bulk text content replacement
42
43	Thanks to [@dusskapark](https://github.com/dusskapark) for contributing the bulk text replacement feature. Here is the [demo video](https://www.youtube.com/watch?v=j05gGT3xfCs).
44
45	Instance Override Propagation
46	Another contribution from [@dusskapark](https://github.com/dusskapark)
47	Propagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations. Check out our [demo video](https://youtu.be/uvuT8LByroI).
48
49	## Manual Setup and Installation
50
51	### MCP Server: Integration with Cursor
52
53	Add the server to your Cursor MCP configuration in `~/.cursor/mcp.json`:
54
55	```json
56	{
57	"mcpServers": {
58	"TalkToFigma": {
59	"command": "bunx",
60	"args": ["cursor-talk-to-figma-mcp@latest"]
61	}
62	}
63	}
64	```
65
66	### WebSocket Server
67
68	Start the WebSocket server:
69
70	```bash
71	bun socket
72	```
73
74	### Figma Plugin
75
76	1. In Figma, go to Plugins > Development > New Plugin
77	2. Choose "Link existing plugin"
78	3. Select the `src/cursor_mcp_plugin/manifest.json` file
79	4. The plugin should now be available in your Figma development plugins
80
81	## Windows + WSL Guide
82
83	1. Install bun via powershell
84
85	```bash
86	powershell -c "irm bun.sh/install.ps1\|iex"
87	```
88
89	2. Uncomment the hostname `0.0.0.0` in `src/socket.ts`
90
91	```typescript
92	// uncomment this to allow connections in windows wsl
93	hostname: "0.0.0.0",
94	```
95
96	3. Start the websocket
97
98	```bash
99	bun socket
100	```
101
102	## Usage
103
104	1. Start the WebSocket server
105	2. Install the MCP server in Cursor
106	3. Open Figma and run the Cursor MCP Plugin
107	4. Connect the plugin to the WebSocket server by joining a channel using `join_channel`
108	5. Use Cursor to communicate with Figma using the MCP tools
109
110	## Local Development Setup
111
112	To develop, update your mcp config to direct to your local directory.
113
114	```json
115	{
116	"mcpServers": {
117	"TalkToFigma": {
118	"command": "bun",
119	"args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
120	}
121	}
122	}
123	```
124
125	## MCP Tools
126
127	The MCP server provides the following tools for interacting with Figma:
128
129	### Document & Selection
130
131	- `get_document_info` - Get information about the current Figma document
132	- `get_selection` - Get information about the current selection
133	- `read_my_design` - Get detailed node information about the current selection without parameters
134	- `get_node_info` - Get detailed information about a specific node
135	- `get_nodes_info` - Get detailed information about multiple nodes by providing an array of node IDs
136	- `set_focus` - Set focus on a specific node by selecting it and scrolling viewport to it
137	- `set_selections` - Set selection to multiple nodes and scroll viewport to show them
138
139	### Annotations

People who liked this also viewed

6 picks

Type

cursor-talk-to-figma-mcp

5.7kinstalls/mo · npm6.9kstars750forks

View on GitHub

How to install cursor-talk-to-figma-mcp?

grab/cursor-talk-to-figma-mcp

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

Installs into the current project.

Summary

Files · 1

View on GitHub

README.md

1	# Talk to Figma MCP
2
3	This project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent to communicate with Figma for reading designs and modifying them programmatically.
4
5	https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c
6
7	## Project Structure
8
9	- `src/talk_to_figma_mcp/` - TypeScript MCP server for Figma integration
10	- `src/cursor_mcp_plugin/` - Figma plugin for communicating with Cursor
11	- `src/socket.ts` - WebSocket server that facilitates communication between the MCP server and Figma plugin
12
13	## How to use
14
15	1. Install Bun if you haven't already:
16
17	```bash
18	curl -fsSL https://bun.sh/install \| bash
19	```
20
21	2. Run setup, this will also install MCP in your Cursor's active project
22
23	```bash
24	bun setup
25	```
26
27	3. Start the Websocket server
28
29	```bash
30	bun socket
31	```
32
33	4. NEW Install Figma plugin from [Figma community page](https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin) or [install locally](#figma-plugin)
34
35	## Quick Video Tutorial
36
37	[Video Link](https://www.linkedin.com/posts/sonnylazuardi_just-wanted-to-share-my-latest-experiment-activity-7307821553654657024-yrh8)
38
39	## Design Automation Example
40
41	Bulk text content replacement
42
43	Thanks to [@dusskapark](https://github.com/dusskapark) for contributing the bulk text replacement feature. Here is the [demo video](https://www.youtube.com/watch?v=j05gGT3xfCs).
44
45	Instance Override Propagation
46	Another contribution from [@dusskapark](https://github.com/dusskapark)
47	Propagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations. Check out our [demo video](https://youtu.be/uvuT8LByroI).
48
49	## Manual Setup and Installation
50
51	### MCP Server: Integration with Cursor
52
53	Add the server to your Cursor MCP configuration in `~/.cursor/mcp.json`:
54
55	```json
56	{
57	"mcpServers": {
58	"TalkToFigma": {
59	"command": "bunx",
60	"args": ["cursor-talk-to-figma-mcp@latest"]
61	}
62	}
63	}
64	```
65
66	### WebSocket Server
67
68	Start the WebSocket server:
69
70	```bash
71	bun socket
72	```
73
74	### Figma Plugin
75
76	1. In Figma, go to Plugins > Development > New Plugin
77	2. Choose "Link existing plugin"
78	3. Select the `src/cursor_mcp_plugin/manifest.json` file
79	4. The plugin should now be available in your Figma development plugins
80
81	## Windows + WSL Guide
82
83	1. Install bun via powershell
84
85	```bash
86	powershell -c "irm bun.sh/install.ps1\|iex"
87	```
88
89	2. Uncomment the hostname `0.0.0.0` in `src/socket.ts`
90
91	```typescript
92	// uncomment this to allow connections in windows wsl
93	hostname: "0.0.0.0",
94	```
95
96	3. Start the websocket
97
98	```bash
99	bun socket
100	```
101
102	## Usage
103
104	1. Start the WebSocket server
105	2. Install the MCP server in Cursor
106	3. Open Figma and run the Cursor MCP Plugin
107	4. Connect the plugin to the WebSocket server by joining a channel using `join_channel`
108	5. Use Cursor to communicate with Figma using the MCP tools
109
110	## Local Development Setup
111
112	To develop, update your mcp config to direct to your local directory.
113
114	```json
115	{
116	"mcpServers": {
117	"TalkToFigma": {
118	"command": "bun",
119	"args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
120	}
121	}
122	}
123	```
124
125	## MCP Tools
126
127	The MCP server provides the following tools for interacting with Figma:
128
129	### Document & Selection
130
131	- `get_document_info` - Get information about the current Figma document
132	- `get_selection` - Get information about the current selection
133	- `read_my_design` - Get detailed node information about the current selection without parameters
134	- `get_node_info` - Get detailed information about a specific node
135	- `get_nodes_info` - Get detailed information about multiple nodes by providing an array of node IDs
136	- `set_focus` - Set focus on a specific node by selecting it and scrolling viewport to it
137	- `set_selections` - Set selection to multiple nodes and scroll viewport to show them
138
139	### Annotations

People who liked this also viewed

6 picks

Type