@ject-5-fe/figma-plugin 0.0.1

package/README.md

@@ -0,0 +1,24 @@
+## Quickstart
+
+This plugin was created with [Plugma](https://github.com/gavinmcfarland/plugma) using the [React](https://react.dev/) framework.
+
+### Requirements
+
+- [Node.js](https://nodejs.org/en)
+- [Figma desktop app](https://www.figma.com/downloads/)
+
+### 실행 방법
+
+1. **개발 서버 실행**
+
+   ```bash
+   cd shared/figma-plugin
+   yarn start
+   ```
+
+2. **Figma에서 플러그인 실행**
+   - Figma 데스크톱 앱에서 `Plugins` → `Development` → `Import plugin from manifest...` 클릭
+   - `shared/figma-plugin/dist/manifest.json` 파일 선택
+   - 플러그인이 설치되면 `Plugins` → `Development`에서 실행 가능
+   - 플러그인이 실행되면 `connect` 버튼을 클릭하여 mcp서버 사용 가능
+   - HMR이 적용되고 있음

package/dist/server/server.cjs

@@ -0,0 +1,309 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/server.ts
+var import_mcp = require("@modelcontextprotocol/sdk/server/mcp.js");
+var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
+var import_uuid = require("uuid");
+var import_ws = __toESM(require("ws"), 1);
+var import_zod = require("zod");
+var logger = {
+  info: (message) => process.stderr.write(`[INFO] ${message}
+`),
+  debug: (message) => process.stderr.write(`[DEBUG] ${message}
+`),
+  warn: (message) => process.stderr.write(`[WARN] ${message}
+`),
+  error: (message) => process.stderr.write(`[ERROR] ${message}
+`),
+  log: (message) => process.stderr.write(`[LOG] ${message}
+`)
+};
+var ws = null;
+var pendingRequests = /* @__PURE__ */ new Map();
+var server = new import_mcp.McpServer({
+  name: "@jongh/figma-plugin",
+  version: "1.0.0"
+});
+var args = process.argv.slice(2);
+var serverArg = args.find((arg) => arg.startsWith("--server="));
+var serverUrl = serverArg ? serverArg.split("=")[1] : "localhost";
+var WS_URL = serverUrl === "localhost" ? `ws://${serverUrl}` : `wss://${serverUrl}`;
+server.tool(
+  "get_document_info",
+  "Get detailed information about the current Figma document",
+  {},
+  async () => {
+    try {
+      const result = await sendCommandToFigma("get_document_info");
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result)
+          }
+        ]
+      };
+    } catch (error) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Error getting document info: ${error instanceof Error ? error.message : String(error)}`
+          }
+        ]
+      };
+    }
+  }
+);
+server.tool(
+  "get_selection",
+  "Get information about the current selection in Figma",
+  {},
+  async () => {
+    try {
+      const result = await sendCommandToFigma("get_selection");
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result)
+          }
+        ]
+      };
+    } catch (error) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Error getting selection: ${error instanceof Error ? error.message : String(error)}`
+          }
+        ]
+      };
+    }
+  }
+);
+server.tool(
+  "get_node_info",
+  "Get detailed information about a specific node in Figma",
+  {
+    nodeId: import_zod.z.string().describe("The ID of the node to get information about")
+  },
+  async ({ nodeId }) => {
+    try {
+      const result = await sendCommandToFigma("get_node_info", { nodeId });
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result)
+          }
+        ]
+      };
+    } catch (error) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Error getting node info: ${error instanceof Error ? error.message : String(error)}`
+          }
+        ]
+      };
+    }
+  }
+);
+server.prompt(
+  "connection_troubleshooting",
+  "Help users troubleshoot connection issues",
+  () => {
+    return {
+      messages: [
+        {
+          role: "assistant",
+          content: {
+            type: "text",
+            text: `When users report connection issues, ask them to check:
+
+1. Figma Plugin Connection:
+  - Did you click the "Connect" button in the Figma plugin?
+  - Is the Figma plugin running and showing a connected status?
+  - Try refreshing the plugin or restarting it if needed
+
+2. MCP Connection in Cursor:
+  - Go to Cursor Settings/Preferences
+  - Check if the MCP server connection is properly configured(green light)
+  - Verify the MCP server is running and connected
+  - Look for any connection error messages in the settings
+
+If both are properly connected and issues persist, try:
+- Restarting both the Figma plugin and Cursor
+- Checking if the WebSocket connection is blocked by firewall
+- Verifying the correct server URL and port configuration`
+          }
+        }
+      ],
+      description: "Troubleshooting guide for connection issues between Figma plugin and MCP server"
+    };
+  }
+);
+server.prompt(
+  "data_analysis_strategy",
+  "Best practices for analyzing Figma design data",
+  () => {
+    return {
+      messages: [
+        {
+          role: "assistant",
+          content: {
+            type: "text",
+            text: `When analyzing Figma design data, follow these strategies 
+            
+            1. Data Extraction Workflow:
+             - Use get_selection() to focus on specific areas of interest
+             - Use get_document_info() when connection is enabled
+
+            2. Component Analysis:
+            - Identify reusable components vs one-off elements
+            - Look for design system patterns (colors, typography, spacing)
+            - Note component variants and their properties
+            - Extract design tokens (colors, fonts, spacing values)
+
+            3. Layout Analysis:
+            - Analyze auto-layout settings and constraints
+            - Document spacing patterns and grid systems
+            - Identify responsive design patterns
+            - Note alignment and positioning strategies
+
+
+            `
+          }
+        }
+      ],
+      description: "Best practices for working with Figma designs"
+    };
+  }
+);
+function connectToFigma(port = 3055) {
+  if (ws && ws.readyState === import_ws.default.OPEN) {
+    logger.info("Already connected to Figma");
+    return;
+  }
+  const wsUrl = serverUrl === "localhost" ? `${WS_URL}:${port}` : WS_URL;
+  logger.info(`Connecting to Figma socket server at ${wsUrl}...`);
+  ws = new import_ws.default(wsUrl);
+  ws.on("open", () => {
+    logger.info("Connected to Figma socket server");
+  });
+  ws.on("message", (data) => {
+    try {
+      const json = JSON.parse(data);
+      const myResponse = json.message;
+      logger.debug(`Received message: ${JSON.stringify(myResponse)}`);
+      logger.log("myResponse" + JSON.stringify(myResponse));
+      if (myResponse.id && pendingRequests.has(myResponse.id) && myResponse.result) {
+        const request = pendingRequests.get(myResponse.id);
+        clearTimeout(request.timeout);
+        if (myResponse.error) {
+          logger.error(`Error from Figma: ${myResponse.error}`);
+          request.reject(new Error(myResponse.error));
+        } else {
+          if (myResponse.result) {
+            request.resolve(myResponse.result);
+          }
+        }
+        pendingRequests.delete(myResponse.id);
+      } else {
+        logger.info(`Received broadcast message: ${JSON.stringify(myResponse)}`);
+      }
+    } catch (error) {
+      logger.error(
+        `Error parsing message: ${error instanceof Error ? error.message : String(error)}`
+      );
+    }
+  });
+  ws.on("error", (error) => {
+    logger.error(`Socket error: ${error}`);
+  });
+  ws.on("close", () => {
+    logger.info("Disconnected from Figma socket server");
+    ws = null;
+    for (const [id, request] of pendingRequests.entries()) {
+      clearTimeout(request.timeout);
+      request.reject(new Error("Connection closed"));
+      pendingRequests.delete(id);
+    }
+    logger.info("Attempting to reconnect in 2 seconds...");
+    setTimeout(() => connectToFigma(port), 2e3);
+  });
+}
+function sendCommandToFigma(command, params = {}) {
+  return new Promise((resolve, reject) => {
+    if (!ws || ws.readyState !== import_ws.default.OPEN) {
+      connectToFigma();
+      reject(new Error("Not connected to Figma. Attempting to connect..."));
+      return;
+    }
+    const id = (0, import_uuid.v4)();
+    const request = {
+      id,
+      type: "message",
+      message: {
+        id,
+        command,
+        params: {
+          ...params
+        }
+      }
+    };
+    const timeout = setTimeout(() => {
+      if (pendingRequests.has(id)) {
+        pendingRequests.delete(id);
+        logger.error(`Request ${id} to Figma timed out after 30 seconds`);
+        reject(new Error("Request to Figma timed out"));
+      }
+    }, 3e4);
+    pendingRequests.set(id, { resolve, reject, timeout });
+    logger.info(`Sending command to Figma: ${command}`);
+    logger.debug(`Request details: ${JSON.stringify(request)}`);
+    ws.send(JSON.stringify(request));
+  });
+}
+async function main() {
+  try {
+    connectToFigma();
+  } catch (error) {
+    logger.warn(
+      `Could not connect to Figma initially: ${error instanceof Error ? error.message : String(error)}`
+    );
+    logger.warn("Will try to connect when the first command is sent");
+  }
+  const transport = new import_stdio.StdioServerTransport();
+  await server.connect(transport);
+  logger.info("FigmaMCP server running on stdio");
+}
+main().catch((error) => {
+  logger.error(
+    `Error starting FigmaMCP server: ${error instanceof Error ? error.message : String(error)}`
+  );
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@ject-5-fe/figma-plugin",
+  "version": "0.0.1",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "plugma dev",
+    "socket": "tsx src/socket.ts",
+    "start": "concurrently \"yarn run socket\" \"yarn run dev\" --names \"SOCKET,MCP\" --prefix-colors \"blue,green\"",
+    "build:server": "tsup"
+  },
+  "bin": "dist/server/server.cjs",
+  "files": [
+    "dist/server/server.cjs"
+  ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "uuid": "^11",
+    "ws": "^8",
+    "xml-js": "^1.6.11",
+    "zod": "^4"
+  },
+  "devDependencies": {
+    "@figma/plugin-typings": "^1.100.2",
+    "@ject-5-fe/eslint": "0.0.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/uuid": "^9.0.8",
+    "@types/ws": "^8.5.10",
+    "@vitejs/plugin-react": "^4.3.3",
+    "concurrently": "^8",
+    "plugma": "^1",
+    "tsup": "^8.5.0",
+    "tsx": "^4.7.0",
+    "vite": "^5.4.10",
+    "vite-plugin-generate-file": "^0.3.1"
+  },
+  "plugma": {
+    "manifest": {
+      "id": "e-replace",
+      "name": "e",
+      "main": "src/main.ts",
+      "ui": "src/ui.tsx",
+      "editorType": [
+        "figma",
+        "figjam",
+        "dev"
+      ],
+      "capabilities": [
+        "inspect"
+      ],
+      "networkAccess": {
+        "allowedDomains": [
+          "none"
+        ],
+        "devAllowedDomains": [
+          "http://localhost:*",
+          "ws://localhost:3000"
+        ]
+      }
+    }
+  }
+}