figma-mcp-server 0.1.0 → 0.1.2

package/.env.example

@@ -0,0 +1 @@
+FIGMA_API_KEY=

package/Dockerfile

@@ -1,9 +1,28 @@
 FROM node:22.12-alpine AS builder
 
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
 WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm install
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
 
 COPY . .
 
+# Production stage
+FROM node:22.12-alpine
+
+WORKDIR /app
+
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --prod --frozen-lockfile
+
+COPY --from=builder /app/mcpServer.js ./
+
+ENV NODE_ENV=production
+
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:3000/ || exit 1
+
 ENTRYPOINT ["node", "mcpServer.js"]

package/README.md

@@ -1,50 +1,43 @@
 # Figma MCP Server
-MCP server for Figma
+A simple MCP server for Figma
 
 ## Install
 Install the server
 
-```sh
+```bash
 git clone https://github.com/planetabhi/figma-mcp-server.git
 cd figma-mcp-server
 pnpm i
 ```
 
-### Set tool environment variables
-In the `.env` file, set the `FIGMA_API_KEY` to your Figma API key.
+### Set tool environment variable
+Create a `.env` file and set the `FIGMA_API_KEY` to your Figma API key.
 
-```
+```bash
 FIGMA_API_KEY=
 ```
 
-### List Figma Tools
-List descriptions and parameters from all available Figma tools
+> To generate a new personal access token, log in to your Figma account, then from the top-left menu, head to Settings, click on the security tab, find the Personal access tokens section, and click Generate new token to open the configuration modal where you can set the expiration and scopes before clicking Generate token.
+
+### List All Tools
+List descriptions and parameters from all available tools
 
-```sh
+```bash
 pnpm list-tools
 ```
 
 ## Run the MCP Server
 
-MCP Server `mcpServer.js` exposes your Figma API tools to MCP-compatible clients.
-
-1. Find node path: `which node`
-2. Find mcpServer.js path: `realpath mcpServer.js`
-
-### Run with Postman
+### Find node and server path
 
-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/).
-
-1. Choose an existing workspace or create a new one.
-2. Select New > MCP icon MCP. Postman opens a new MCP request in a new tab.
-3. Select the server's communication method STDIO.
-4. Enter the server's command and arguments.
+```bash
+# Find node path
+which node
 
-```sh
-STDIO <absolute_path_to_node> <absolute_path_to_mcpServer.js>
+# Get the absolute path of the MCP server
+realpath mcpServer.js
 ```
 
-Or you can fork Postman [collection here](https://www.postman.com/doitagain/workspace/figma/collection/68369062465421c338809955?action=share&creator=17652550).
 
 ### Run with Claude Desktop
 
@@ -53,7 +46,7 @@ Or you can fork Postman [collection here](https://www.postman.com/doitagain/work
 ```json
 {
   "mcpServers": {
-    "<server_name>": {
+    "figma-mcp-server": {
       "command": "<absolute_path_to_node>",
       "args": ["<absolute_path_to_mcpServer.js>"]
     }
@@ -61,52 +54,59 @@ Or you can fork Postman [collection here](https://www.postman.com/doitagain/work
 }
 ```
 
-2. Restart Claude Desktop to activate this change.
+2. Restart Claude Desktop to activate config change.
+
+> To try it out in Claude Desktop, first enable the `get_file_nodes` tool from the tools list. Copy a design node link from a Figma file, then paste it into Claude Desktop prompt. It will return the design node data and other information.
 
-#### Try it out:
+### Run in Postman
+
+1. Choose an existing workspace or create a new one.
+2. Select New > MCP. Postman opens a new MCP request in a new tab.
+3. Select the server's communication method STDIO.
+4. Enter the server's command and arguments.
 
-1. Open Claude Desktop, then click on the search and tools icon button and select your server name from the list.
-2. Enable the `get_design_node` tool from the tools list.
-3. Copy a design node link from a Figma file, then paste it in Claude Desktop.
-4. It will return the design node data and other information.
+```bash
+# Create a new MCP request and add the server's command and arguments
+STDIO <absolute_path_to_node> <absolute_path_to_mcpServer.js>
+```
 
-> 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.
+> [Postman collection](https://www.postman.com/doitagain/workspace/figma/collection/68369062465421c338809955?action=share&creator=17652550).
 
 ---
 
-### Additional Options
+### Misc
 
-#### Docker Deployment (Production)
+#### Docker Deployment
 
 For production deployments, you can use Docker:
 
 **1. Build Docker image**
 
-```sh
-docker build -t <your_server_name> .
+```bash
+docker build -t figma-mcp-server .
 ```
 
-**2. Claude Desktop Integration**
+**2. Claude Desktop integration**
 
 Add Docker server configuration to Claude Desktop (Settings → Developers → Edit Config):
 
 ```json
 {
   "mcpServers": {
-    "<your_server_name>": {
+    "figma-mcp-server": {
       "command": "docker",
-      "args": ["run", "-i", "--rm", "--env-file=.env", "<your_server_name>"]
+      "args": ["run", "-i", "--rm", "--env-file=.env", "figma-mcp-server"]
     }
   }
 }
 ```
 
-> Add your environment variables (API keys, etc.) inside the `.env` file.
+> Add your environment variables inside the `.env` file.
 
 #### Server-Sent Events (SSE)
 
 To run the server with Server-Sent Events (SSE) support, use the `--sse` flag:
 
-```sh
+```bash
 node mcpServer.js --sse
 ```

package/mcpServer.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+
 import dotenv from "dotenv";
 import express from "express";
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
@@ -18,9 +19,13 @@ import { fileURLToPath } from "url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// Load environment variables
 dotenv.config({ path: path.resolve(__dirname, ".env") });
 
-const SERVER_NAME = "generated-mcp-server";
+// Server configuration
+const SERVER_NAME = process.env.SERVER_NAME || "figma-mcp-server";
+const SERVER_VERSION = process.env.SERVER_VERSION || "0.1.2";
+const DEFAULT_PORT = 3001;
 
 async function transformTools(tools) {
   return tools
@@ -36,32 +41,7 @@ async function transformTools(tools) {
     .filter(Boolean);
 }
 
-async function run() {
-  const args = process.argv.slice(2);
-  const isSSE = args.includes("--sse");
-
-  const server = new Server(
-    {
-      name: SERVER_NAME,
-      version: "0.1.0",
-    },
-    {
-      capabilities: {
-        tools: {},
-      },
-    }
-  );
-
-  server.onerror = (error) => console.error("[Error]", error);
-
-  // Gracefully shutdown on SIGINT
-  process.on("SIGINT", async () => {
-    await server.close();
-    process.exit(0);
-  });
-
-  const tools = await discoverTools();
-
+async function setupServerHandlers(server, tools) {
   server.setRequestHandler(ListToolsRequestSchema, async () => ({
     tools: await transformTools(tools),
   }));
@@ -69,15 +49,12 @@ async function run() {
   server.setRequestHandler(CallToolRequestSchema, async (request) => {
     const toolName = request.params.name;
     const tool = tools.find((t) => t.definition.function.name === toolName);
-
     if (!tool) {
       throw new McpError(ErrorCode.MethodNotFound, `Unknown tool: ${toolName}`);
     }
-
     const args = request.params.arguments;
     const requiredParameters =
       tool.definition?.function?.parameters?.required || [];
-
     for (const requiredParameter of requiredParameters) {
       if (!(requiredParameter in args)) {
         throw new McpError(
@@ -86,7 +63,6 @@ async function run() {
         );
       }
     }
-
     try {
       const result = await tool.function(args);
       return {
@@ -105,17 +81,42 @@ async function run() {
       );
     }
   });
+}
+
+async function run() {
+  const args = process.argv.slice(2);
+  const isSSE = args.includes("--sse");
+  const tools = await discoverTools();
 
   if (isSSE) {
     const app = express();
     const transports = {};
+    const servers = {};
 
     app.get("/sse", async (_req, res) => {
+      // Create a new Server instance for each session
+      const server = new Server(
+        {
+          name: SERVER_NAME,
+          version: SERVER_VERSION,
+        },
+        {
+          capabilities: {
+            tools: {},
+          },
+        }
+      );
+      server.onerror = (error) => console.error("[Error]", error);
+      await setupServerHandlers(server, tools);
+
       const transport = new SSEServerTransport("/messages", res);
       transports[transport.sessionId] = transport;
+      servers[transport.sessionId] = server;
 
-      res.on("close", () => {
+      res.on("close", async () => {
         delete transports[transport.sessionId];
+        await server.close();
+        delete servers[transport.sessionId];
       });
 
       await server.connect(transport);
@@ -124,19 +125,42 @@ async function run() {
     app.post("/messages", async (req, res) => {
       const sessionId = req.query.sessionId;
       const transport = transports[sessionId];
+      const server = servers[sessionId];
 
-      if (transport) {
+      if (transport && server) {
         await transport.handlePostMessage(req, res);
       } else {
-        res.status(400).send("No transport found for sessionId");
+        res.status(400).send("No transport/server found for sessionId");
       }
     });
 
-    const port = process.env.PORT || 3001;
+    const port = process.env.PORT || DEFAULT_PORT;
     app.listen(port, () => {
       console.log(`[SSE Server] running on port ${port}`);
+      console.log(`[Server] Name: ${SERVER_NAME}`);
+      console.log(`[Server] Version: ${SERVER_VERSION}`);
     });
   } else {
+    // stdio mode: single server instance
+    const server = new Server(
+      {
+        name: SERVER_NAME,
+        version: SERVER_VERSION,
+      },
+      {
+        capabilities: {
+          tools: {},
+        },
+      }
+    );
+    server.onerror = (error) => console.error("[Error]", error);
+    await setupServerHandlers(server, tools);
+
+    process.on("SIGINT", async () => {
+      await server.close();
+      process.exit(0);
+    });
+
     const transport = new StdioServerTransport();
     await server.connect(transport);
   }

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "figma-mcp-server",
-  "version": "0.1.0",
-  "description": "MCP server for Figma",
+  "version": "0.1.2",
+  "description": "A simple MCP server for Figma",
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "list-tools": "node index.js tools"
+    "list-tools": "node index.js tools",
+    "start": "node mcpServer.js --sse"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.0",
+    "@modelcontextprotocol/sdk": "^1.12.1",
     "commander": "^14.0.0",
     "dotenv": "^16.5.0",
     "express": "^5.1.0"

package/smithery.yaml

@@ -0,0 +1,39 @@
+startCommand:
+  type: http
+  command: node mcpServer.js --sse
+  configSchema:
+    type: object
+    required: ["port"]
+    properties:
+      port:
+        type: number
+        title: "Server Port"
+        description: "Port number for the MCP server"
+        default: 3001
+      mode:
+        type: string
+        title: "Server Mode"
+        description: "Choose between SSE (Server-Sent Events) or stdio mode"
+        enum: ["sse", "stdio"]
+        default: "sse"
+      serverName:
+        type: string
+        title: "Server Name"
+        description: "Name of the MCP server instance"
+        default: "generated-mcp-server"
+      version:
+        type: string
+        title: "Server Version"
+        description: "Version of the MCP server"
+        default: "0.1.2"
+
+connection:
+  type: sse
+  configSchema:
+    type: object
+    properties:
+      baseUrl:
+        type: string
+        title: "Base URL"
+        description: "Base URL for the MCP server"
+        default: "http://localhost:3001" 

package/tools/figma/figma-api/create-dev-resources-for-a-file.js

@@ -0,0 +1,95 @@
+/**
+ * Function to create development resources for a Figma file.
+ *
+ * @param {Object} args - Arguments for creating development resources.
+ * @param {string} args.file_key - The key of the Figma file.
+ * @param {string} args.node_id - The node ID for the resource.
+ * @param {string} args.name - The name of the development resource.
+ * @param {string} args.url - The URL for the development resource.
+ * @returns {Promise<Object>} - The result of the resource creation.
+ */
+const executeFunction = async ({ file_key, node_id, name, url }) => {
+  const baseUrl = 'https://api.figma.com';
+  const token = process.env.FIGMA_API_KEY;
+  try {
+    // Construct the URL for the API request
+    const url = `${baseUrl}/v1/files/${file_key}/dev_resources`;
+
+    // Set up headers for the request
+    const headers = {
+      'X-Figma-Token': token,
+      'Content-Type': 'application/json'
+    };
+
+    // Create the body for the request
+    const body = JSON.stringify({
+      dev_resources: [
+        {
+          name,
+          url,
+          file_key,
+          node_id
+        }
+      ]
+    });
+
+    // Perform the fetch request
+    const response = await fetch(url, {
+      method: 'POST',
+      headers,
+      body
+    });
+
+    // Check if the response was successful
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData);
+    }
+
+    // Parse and return the response data
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error creating development resources:', error);
+    return { error: 'An error occurred while creating development resources.' };
+  }
+};
+
+/**
+ * Tool configuration for creating development resources for a Figma file.
+ * @type {Object}
+ */
+const apiTool = {
+  function: executeFunction,
+  definition: {
+    type: 'function',
+    function: {
+      name: 'create_dev_resources',
+      description: 'Create development resources for a Figma file.',
+      parameters: {
+        type: 'object',
+        properties: {
+          file_key: {
+            type: 'string',
+            description: 'The key of the Figma file.'
+          },
+          node_id: {
+            type: 'string',
+            description: 'The node ID for the resource.'
+          },
+          name: {
+            type: 'string',
+            description: 'The name of the development resource.'
+          },
+          url: {
+            type: 'string',
+            description: 'The URL for the development resource.'
+          }
+        },
+        required: ['file_key', 'node_id', 'name', 'url']
+      }
+    }
+  }
+};
+
+export { apiTool };

package/tools/figma/figma-api/{create-variable-collection.js → create-variable-collections-for-a-file.js}

@@ -1,18 +1,17 @@
 /**
- * Function to create a variable collection in Figma.
+ * Function to create variable collections for a Figma file.
  *
- * @param {Object} args - Arguments for creating the variable collection.
+ * @param {Object} args - Arguments for creating variable collections.
  * @param {string} args.file_key - The key of the Figma file where the variable collection will be created.
- * @param {string} args.name - The name of the new variable collection to be created.
+ * @param {string} args.name - The name of the variable collection to create.
  * @returns {Promise<Object>} - The result of the variable collection creation.
  */
 const executeFunction = async ({ file_key, name }) => {
-  const baseUrl = 'https://api.figma.com/v1';
+  const baseUrl = 'https://api.figma.com';
   const token = process.env.FIGMA_API_KEY;
-
   try {
     // Construct the URL for the request
-    const url = `${baseUrl}/files/${file_key}/variables`;
+    const url = `${baseUrl}/v1/files/${file_key}/variables`;
 
     // Set up headers for the request
     const headers = {
@@ -20,7 +19,7 @@ const executeFunction = async ({ file_key, name }) => {
       'Content-Type': 'application/json'
     };
 
-    // Create the request body
+    // Define the body of the request
     const body = JSON.stringify({
       variableCollections: [
         {
@@ -47,13 +46,13 @@ const executeFunction = async ({ file_key, name }) => {
     const data = await response.json();
     return data;
   } catch (error) {
-    console.error('Error creating variable collection:', error);
-    return { error: 'An error occurred while creating the variable collection.' };
+    console.error('Error creating variable collections:', error);
+    return { error: 'An error occurred while creating variable collections.' };
   }
 };
 
 /**
- * Tool configuration for creating a variable collection in Figma.
+ * Tool configuration for creating variable collections in a Figma file.
  * @type {Object}
  */
 const apiTool = {
@@ -61,8 +60,8 @@ const apiTool = {
   definition: {
     type: 'function',
     function: {
-      name: 'create_variable_collection',
-      description: 'Create a new variable collection in Figma.',
+      name: 'create_variable_collections',
+      description: 'Create variable collections for a Figma file.',
       parameters: {
         type: 'object',
         properties: {
@@ -72,7 +71,7 @@ const apiTool = {
           },
           name: {
             type: 'string',
-            description: 'The name of the new variable collection to be created.'
+            description: 'The name of the variable collection to create.'
           }
         },
         required: ['file_key', 'name']

package/tools/figma/figma-api/get-a-published-component-by-key.js

@@ -0,0 +1,66 @@
+/**
+ * Function to get metadata for a published component in Figma by its key.
+ *
+ * @param {Object} args - Arguments for the request.
+ * @param {string} args.key - The key of the component to retrieve.
+ * @returns {Promise<Object>} - The metadata of the published component.
+ */
+const executeFunction = async ({ key }) => {
+  const baseUrl = 'https://api.figma.com/v1/components';
+  const token = process.env.FIGMA_API_KEY;
+  try {
+    // Construct the URL with the component key
+    const url = `${baseUrl}/${key}`;
+
+    // Set up headers for the request
+    const headers = {
+      'X-Figma-Token': token
+    };
+
+    // Perform the fetch request
+    const response = await fetch(url, {
+      method: 'GET',
+      headers
+    });
+
+    // Check if the response was successful
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData);
+    }
+
+    // Parse and return the response data
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error('Error retrieving component metadata:', error);
+    return { error: 'An error occurred while retrieving component metadata.' };
+  }
+};
+
+/**
+ * Tool configuration for retrieving component metadata from Figma.
+ * @type {Object}
+ */
+const apiTool = {
+  function: executeFunction,
+  definition: {
+    type: 'function',
+    function: {
+      name: 'get_published_component_by_key',
+      description: 'Retrieve metadata for a published component by its key.',
+      parameters: {
+        type: 'object',
+        properties: {
+          key: {
+            type: 'string',
+            description: 'The key of the component to retrieve.'
+          }
+        },
+        required: ['key']
+      }
+    }
+  }
+};
+
+export { apiTool };