figma-mcp-server 0.1.0-beta.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,7 @@
|
|
|
1
1
|
# Figma MCP Server
|
|
2
2
|
MCP server for Figma
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
In the `.env` file, set the `FIGMA_API_KEY` to your Figma API key.
|
|
6
|
-
|
|
7
|
-
```
|
|
8
|
-
FIGMA_API_KEY=
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
### Install
|
|
4
|
+
## Install
|
|
12
5
|
Install the server
|
|
13
6
|
|
|
14
7
|
```sh
|
|
@@ -17,6 +10,13 @@ cd figma-mcp-server
|
|
|
17
10
|
pnpm i
|
|
18
11
|
```
|
|
19
12
|
|
|
13
|
+
### Set tool environment variables
|
|
14
|
+
In the `.env` file, set the `FIGMA_API_KEY` to your Figma API key.
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
FIGMA_API_KEY=
|
|
18
|
+
```
|
|
19
|
+
|
|
20
20
|
### List Figma Tools
|
|
21
21
|
List descriptions and parameters from all available Figma tools
|
|
22
22
|
|
|
@@ -26,33 +26,29 @@ pnpm list-tools
|
|
|
26
26
|
|
|
27
27
|
## Run the MCP Server
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
MCP Server `mcpServer.js` exposes your Figma API tools to MCP-compatible clients.
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
Postman desktop app is the easiest way to run and test MCP servers.
|
|
34
|
-
|
|
35
|
-
Step 1: Download the latest Postman app from [https://www.postman.com/downloads/](https://www.postman.com/downloads/).
|
|
36
|
-
|
|
37
|
-
Step 2: Read out the documentation article [here](https://learning.postman.com/docs/postman-ai-agent-builder/mcp-requests/overview/) for the next steps.
|
|
31
|
+
1. Find node path: `which node`
|
|
32
|
+
2. Find mcpServer.js path: `realpath mcpServer.js`
|
|
38
33
|
|
|
39
|
-
### Run with
|
|
34
|
+
### Run with Postman
|
|
40
35
|
|
|
41
|
-
|
|
36
|
+
Postman desktop app is the easiest way to [run and test MCP servers](https://learning.postman.com/docs/postman-ai-agent-builder/mcp-requests/overview/).
|
|
42
37
|
|
|
43
|
-
1.
|
|
38
|
+
1. Choose an existing workspace or create a new one.
|
|
39
|
+
2. Select New > MCP icon MCP. Postman opens a new MCP request in a new tab.
|
|
40
|
+
3. Select the server's communication method STDIO.
|
|
41
|
+
4. Enter the server's command and arguments.
|
|
44
42
|
|
|
45
43
|
```sh
|
|
46
|
-
|
|
44
|
+
STDIO <absolute_path_to_node> <absolute_path_to_mcpServer.js>
|
|
47
45
|
```
|
|
48
46
|
|
|
49
|
-
|
|
47
|
+
Or you can fork Postman [collection here](https://www.postman.com/doitagain/workspace/figma/collection/68369062465421c338809955?action=share&creator=17652550).
|
|
50
48
|
|
|
51
|
-
|
|
52
|
-
realpath mcpServer.js
|
|
53
|
-
```
|
|
49
|
+
### Run with Claude Desktop
|
|
54
50
|
|
|
55
|
-
|
|
51
|
+
1. Open Claude Desktop → **Settings** → **Developers** → **Edit Config** and add your server:
|
|
56
52
|
|
|
57
53
|
```json
|
|
58
54
|
{
|
|
@@ -65,7 +61,18 @@ realpath mcpServer.js
|
|
|
65
61
|
}
|
|
66
62
|
```
|
|
67
63
|
|
|
68
|
-
Restart Claude Desktop to activate this change.
|
|
64
|
+
2. Restart Claude Desktop to activate this change.
|
|
65
|
+
|
|
66
|
+
#### Try it out:
|
|
67
|
+
|
|
68
|
+
1. Open Claude Desktop, then click on the search and tools icon button and select your server name from the list.
|
|
69
|
+
2. Enable the `get_design_node` tool from the tools list.
|
|
70
|
+
3. Copy a design node link from a Figma file, then paste it in Claude Desktop.
|
|
71
|
+
4. It will return the design node data and other information.
|
|
72
|
+
|
|
73
|
+
> Note: Some tools may be non-functional at the moment because of changes to the Figma API. Working on updating the endpoints in future updates.
|
|
74
|
+
|
|
75
|
+
---
|
|
69
76
|
|
|
70
77
|
### Additional Options
|
|
71
78
|
|