zapcode-figma-mcp 1.0.2 → 1.0.3

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.
Files changed (2) hide show
  1. package/README.md +27 -25
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -12,14 +12,14 @@ When invoked by an AI model, this server connects to the Zapcode Figma plugin to
12
12
  ## ✨ Features
13
13
 
14
14
  - **Real-time Context**: Fetches live data directly from your currently selected frame in Figma.
15
- - **Rich Information**: Provides the LLM with HTML, CSS, a prompt suggestion, technology configuration, and a PNG image of the frame.
15
+ - **Rich Information**: Provides the LLM with rich context of the frame.
16
16
  - **Automatic Asset Handling**: Automatically extracts any SVG assets from the selection, saves them to your local workspace, and informs the LLM of their location.
17
17
  - **Easy Integration**: Runs as a simple command-line tool and can be easily configured with any MCP client.
18
18
 
19
19
  ## 📋 Prerequisites
20
20
 
21
21
  1. **Node.js**: You must have Node.js (v16 or higher) installed to use `npx`. You can download it from [nodejs.org](https://nodejs.org/).
22
- 2. **Zapcode Figma Plugin**: You must have the Zapcode plugin installed and running in your Figma desktop application.
22
+ 2. [**Zapcode Figma Plugin**](https://www.figma.com/community/plugin/1454956820198178710/zapcode): You must have the Zapcode plugin installed and running in your Figma desktop application.
23
23
 
24
24
  ## 🚀 Installation & Usage
25
25
 
@@ -29,48 +29,55 @@ You can run this server directly from the npm registry without a manual installa
29
29
 
30
30
  This is the most common use case. You configure your client to launch the server automatically. Below are examples for common clients.
31
31
 
32
- ### Claude for Desktop
33
-
34
- Open your claude_desktop_config.json file and add the following entry to mcpServers.
32
+ ### Generic MCP Client Configuration
35
33
 
36
- macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json
37
- Windows: %APPDATA%\Claude\claude_desktop_config.json
34
+ For clients that use a similar JSON configuration, the structure is the same. This server does not require any environment variables.
38
35
 
39
36
  ```json
40
37
  {
41
38
  "mcpServers": {
42
39
  "zapcode-figma-mcp": {
43
40
  "command": "npx",
44
- "args": ["-y", "zapcode-figma-mcp"]
41
+ "args": ["zapcode-figma-mcp"]
45
42
  }
46
43
  }
47
44
  }
48
45
  ```
49
46
 
50
- **Note:** Restart Claude for Desktop for the changes to take effect.
47
+ ### GitHub Copilot
51
48
 
52
- ### Generic MCP Client Configuration
49
+ ```json
50
+ {
51
+ "servers": {
52
+ "Zapcode stdio mcp": {
53
+ "type": "stdio",
54
+ "command": "npx",
55
+ "args": ["zapcode-figma-mcp"]
56
+ }
57
+ },
58
+ "inputs": []
59
+ }
60
+ ```
61
+
62
+ ### Claude for Desktop
63
+
64
+ Open your claude_desktop_config.json file and add the following entry to mcpServers.
53
65
 
54
- For other clients that use a similar JSON configuration, the structure is the same. This server does not require any environment variables.
66
+ macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json
67
+ Windows: %APPDATA%\Claude\claude_desktop_config.json
55
68
 
56
69
  ```json
57
70
  {
58
71
  "mcpServers": {
59
72
  "zapcode-figma-mcp": {
60
73
  "command": "npx",
61
- "args": ["-y", "zapcode-figma-mcp", "--port", "3001"]
74
+ "args": ["zapcode-figma-mcp"]
62
75
  }
63
76
  }
64
77
  }
65
78
  ```
66
79
 
67
- ### Standalone (for testing)
68
-
69
- To run the server directly in your terminal:
70
-
71
- ```bash
72
- npx zapcode-figma-mcp
73
- ```
80
+ **Note:** Restart Claude for Desktop for the changes to take effect.
74
81
 
75
82
  The server will start and wait for connections from both the Figma plugin and an MCP client.
76
83
 
@@ -82,12 +89,7 @@ get_figma_context
82
89
 
83
90
  - **Description**: Retrieves the selected Figma frame context. Saves any provided SVG assets to the local 'assets/svg' directory.
84
91
  - **Input Schema**: {} (No input arguments are required).
85
- - **Output**: A combination of text and image content blocks. - An image block containing a PNG of the selected frame. - A text block containing a structured summary of:
86
- A user-provided prompt/goal.
87
- The technology stack configuration (e.g., React, Vue).
88
- A list of SVG assets that were automatically saved to the local disk.
89
- The complete HTML structure.
90
- The complete CSS styling.
92
+ - **Output**: A combination of prompts and Figma context
91
93
 
92
94
  ## ⚠️ Troubleshooting
93
95
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zapcode-figma-mcp",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "An MCP server that exposes Figma context via a plugin and saves assets, from Zapcode.",
5
5
  "type": "module",
6
6
  "bin": {
@@ -19,7 +19,7 @@
19
19
  "zapcode"
20
20
  ],
21
21
  "author": "Zapcode",
22
- "license": "SEE LICENSE IN LICENSE.md",
22
+ "license": "MIT",
23
23
  "files": [
24
24
  "build/"
25
25
  ],
@@ -32,4 +32,4 @@
32
32
  "@types/node": "^20.12.12",
33
33
  "typescript": "^5.4.5"
34
34
  }
35
- }
35
+ }