zapcode-figma-mcp 1.1.3 → 1.3.0

package/README.md

@@ -1,9 +1,13 @@
+# ZapCode Figma MCP Server
+
+<p align="center"><img src="./assets/Zapcode.png" alt="ZapCode Logo" width="400"></p>
+
 # Zapcode Figma MCP Server
 
 [![npm version](https://img.shields.io/npm/v/zapcode-figma-mcp.svg)](https://www.npmjs.com/package/zapcode-figma-mcp)
 
 
-Connect your Figma designs directly to AI tools like Claude Desktop, Cursor, and Cline. Get real-time HTML, CSS, images, and assets from selected Figma frames through the Model Context Protocol.
+Connect your Figma designs directly to AI tools like Claude Desktop, Claude Code, Cursor, and Cline. Get real-time HTML, CSS, images, and assets from selected Figma frames through the Model Context Protocol.
 
 ## Features
 
@@ -17,11 +21,13 @@ Connect your Figma designs directly to AI tools like Claude Desktop, Cursor, and
 ## Prerequisites
 
 1. **Node.js 16+** - [Download here](https://nodejs.org/)
-2. **Figma Desktop App** - Required for plugin integration
+2. **Figma Desktop or Web** - Required for plugin
 3. **[Zapcode Figma Plugin](https://www.figma.com/community/plugin/1454956820198178710/zapcode)** - Install from Figma Community
 
 ## Installation
 
+> **Note**: The `--figma-port` argument specifies which port to use for communication with the Figma plugin. Default is `32896`. You can customize this port if needed (e.g., to run multiple instances or if the default port is already in use).
+
 ### Claude Desktop
 
 Add to your `claude_desktop_config.json`:
@@ -34,7 +40,7 @@ Add to your `claude_desktop_config.json`:
   "mcpServers": {
     "zapcode-figma": {
       "command": "npx",
-      "args": ["-y", "zapcode-figma-mcp"]
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
     }
   }
 }
@@ -42,6 +48,32 @@ Add to your `claude_desktop_config.json`:
 
 Restart Claude Desktop after making changes.
 
+
+
+### Claude Code
+
+Add to your `claude_code_config.json`:
+
+**macOS/Linux**: `~/.config/claude-code/claude_code_config.json`
+**Windows**: `%APPDATA%\claude-code\claude_code_config.json`
+
+```json
+{
+  "mcpServers": {
+    "zapcode-figma": {
+      "command": "npx",
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
+    }
+  }
+}
+```
+
+or run
+
+```sh
+claude mcp add --transport stdio zapcode -- npx -y zapcode-figma-mcp --figma-port 61234
+```
+
 ### Cursor
 
 Add to your MCP settings configuration:
@@ -51,7 +83,7 @@ Add to your MCP settings configuration:
   "mcpServers": {
     "zapcode-figma": {
       "command": "npx",
-      "args": ["-y", "zapcode-figma-mcp"]
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
     }
   }
 }
@@ -66,7 +98,7 @@ Add to Cline's MCP settings:
   "mcpServers": {
     "zapcode-figma": {
       "command": "npx",
-      "args": ["-y", "zapcode-figma-mcp"]
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
     }
   }
 }
@@ -81,7 +113,7 @@ Add to your Windsurf MCP configuration:
   "mcpServers": {
     "zapcode-figma": {
       "command": "npx",
-      "args": ["-y", "zapcode-figma-mcp"]
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
     }
   }
 }
@@ -96,7 +128,7 @@ Add to your Zed settings (MCP support currently in preview):
   "context_servers": {
     "zapcode-figma": {
       "command": "npx",
-      "args": ["-y", "zapcode-figma-mcp"]
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
     }
   }
 }
@@ -111,7 +143,7 @@ Add to Continue's configuration:
   "mcpServers": {
     "zapcode-figma": {
       "command": "npx",
-      "args": ["-y", "zapcode-figma-mcp"]
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
     }
   }
 }
@@ -127,7 +159,7 @@ Add to your GitHub Copilot MCP configuration:
     "zapcode-figma": {
       "type": "stdio",
       "command": "npx",
-      "args": ["-y", "zapcode-figma-mcp"]
+      "args": ["-y", "zapcode-figma-mcp", "--figma-port", "61234"]
     }
   }
 }
@@ -186,6 +218,7 @@ assets/
 This server works with any MCP-compatible client, including:
 
 - [Claude Desktop](https://modelcontextprotocol.io/clients#claude-desktop) - Anthropic's desktop application
+- [Claude Code](https://claude.com/claude-code) - Anthropic's official CLI for Claude
 - [Cursor](https://www.cursor.com/) - AI-first code editor
 - [Cline](https://github.com/cline/cline) - Autonomous coding agent for VS Code
 - [Windsurf](https://codeium.com/windsurf) - AI-powered IDE with MCP Plugin Store

package/build/index.js

@@ -7,6 +7,12 @@ import * as fs from "fs";
 import * as path from "path";
 // --- Default Port for Figma Connection ---
 const DEFAULT_FIGMA_SOCKET_IO_PORT = 32896;
+// --- Allowed Ports (must match Figma plugin manifest) ---
+const ALLOWED_PORTS = [
+    3000, 3001, 5000, 5173, 8000, 8080, 8888, 9000,
+    32044, 32896, 32897, 32898, 32899,
+    40000, 50000, 54321, 60000, 61234, 62000, 63000
+];
 // --- Global Variables for Figma Connection ---
 let figmaHttpServer = null;
 let io = null;
@@ -19,22 +25,34 @@ function parseArgs() {
     const figmaPortArgIndex = args.findIndex((arg) => arg === "--figma-port");
     if (figmaPortArgIndex !== -1 && args[figmaPortArgIndex + 1]) {
         const port = parseInt(args[figmaPortArgIndex + 1], 10);
-        if (!isNaN(port))
+        if (!isNaN(port)) {
+            // Validate port is in allowed list
+            if (!ALLOWED_PORTS.includes(port)) {
+                console.error(`Zapcode: Warning - Port ${port} is not in the allowed ports list.`);
+                console.error(`Zapcode: Allowed ports: ${ALLOWED_PORTS.join(', ')}`);
+                console.error(`Zapcode: The Figma plugin may not be able to connect to this port.`);
+            }
             figmaPort = port;
+        }
     }
     return { figmaPort };
 }
 // --- Helper: Find Available Port ---
 async function findAvailablePort(startPort, maxAttempts = 4) {
-    for (let i = 0; i < maxAttempts; i++) {
-        const port = startPort + i;
+    // Find the starting port in the allowed ports list
+    const startIndex = ALLOWED_PORTS.indexOf(startPort);
+    const portsToTry = startIndex >= 0
+        ? ALLOWED_PORTS.slice(startIndex, startIndex + maxAttempts)
+        : ALLOWED_PORTS.slice(0, maxAttempts);
+    for (let i = 0; i < portsToTry.length; i++) {
+        const port = portsToTry[i];
         try {
             const testServer = createHttpServer();
             await new Promise((resolve, reject) => {
                 testServer.once('error', (err) => {
                     testServer.close();
                     if (err.code === 'EADDRINUSE') {
-                        console.error(`Zapcode: Port ${port} is already in use, trying next port...`);
+                        console.error(`Zapcode: Port ${port} is already in use, trying next allowed port...`);
                         reject(err);
                     }
                     else {
@@ -49,8 +67,8 @@ async function findAvailablePort(startPort, maxAttempts = 4) {
             return port;
         }
         catch (err) {
-            if (err.code !== 'EADDRINUSE' || i === maxAttempts - 1) {
-                throw new Error(`No available ports in range ${startPort}-${startPort + maxAttempts - 1}`);
+            if (err.code !== 'EADDRINUSE' || i === portsToTry.length - 1) {
+                throw new Error(`No available ports found in allowed ports list. Tried: ${portsToTry.join(', ')}`);
             }
             // Continue to next port
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zapcode-figma-mcp",
-    "version": "1.1.3",
+    "version": "1.3.0",
     "description": "An MCP server that exposes Figma context via a plugin and saves assets, from Zapcode.",
     "type": "module",
     "bin": {