@liner-fe/figma-mcp 1.0.2

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,385 @@
+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_zod = require("zod");
+
+// src/figmaClient.ts
+var import_crypto = require("crypto");
+var import_ws = __toESM(require("ws"), 1);
+function createFigmaClient({ logger: logger2, serverUrl: serverUrl2, wsUrlBase }) {
+  let ws = null;
+  const pendingRequests = /* @__PURE__ */ new Map();
+  function connectToFigma2(port = 3055) {
+    if (ws && ws.readyState === import_ws.default.OPEN) {
+      logger2.info("Already connected to Figma");
+      return;
+    }
+    const wsUrl = serverUrl2 === "localhost" ? `${wsUrlBase}:${port}` : wsUrlBase;
+    logger2.info(`Connecting to Figma socket server at ${wsUrl}...`);
+    ws = new import_ws.default(wsUrl);
+    ws.on("open", () => {
+      logger2.info("Connected to Figma socket server");
+    });
+    ws.on("message", (data) => {
+      try {
+        const json = JSON.parse(data);
+        const myResponse = json.message;
+        logger2.debug(`Received message: ${JSON.stringify(myResponse)}`);
+        logger2.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) {
+            logger2.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 {
+          logger2.info(`Received broadcast message: ${JSON.stringify(myResponse)}`);
+        }
+      } catch (error) {
+        logger2.error(
+          `Error parsing message: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    });
+    ws.on("error", (error) => {
+      logger2.error(`Socket error: ${error}`);
+    });
+    ws.on("close", () => {
+      logger2.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);
+      }
+      logger2.info("Attempting to reconnect in 2 seconds...");
+      setTimeout(() => connectToFigma2(port), 2e3);
+    });
+  }
+  function sendCommandToFigma2(command, params = {}) {
+    return new Promise((resolve, reject) => {
+      if (!ws || ws.readyState !== import_ws.default.OPEN) {
+        connectToFigma2();
+        reject(new Error("Not connected to Figma. Attempting to connect..."));
+        return;
+      }
+      const id = (0, import_crypto.randomUUID)();
+      const request = {
+        id,
+        type: "message",
+        message: {
+          id,
+          command,
+          params: {
+            ...params
+          }
+        }
+      };
+      const timeout = setTimeout(() => {
+        if (pendingRequests.has(id)) {
+          pendingRequests.delete(id);
+          logger2.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 });
+      logger2.info(`Sending command to Figma: ${command}`);
+      logger2.debug(`Request details: ${JSON.stringify(request)}`);
+      ws.send(JSON.stringify(request));
+    });
+  }
+  return {
+    connectToFigma: connectToFigma2,
+    sendCommandToFigma: sendCommandToFigma2
+  };
+}
+
+// src/server.ts
+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 RULES_FILES = Object.keys(__RULES__);
+function levenshtein(a, b) {
+  const m = a.length;
+  const n = b.length;
+  if (m === 0) return n;
+  if (n === 0) return m;
+  const dp = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0));
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      dp[i][j] = Math.min(
+        dp[i - 1][j] + 1,
+        // 삭제
+        dp[i][j - 1] + 1,
+        // 삽입
+        dp[i - 1][j - 1] + cost
+        // 교체
+      );
+    }
+  }
+  return dp[m][n];
+}
+function getSimilarityScore(target, candidate) {
+  if (target === candidate) return 100;
+  if (candidate.startsWith(target) || target.startsWith(candidate)) return 95;
+  if (candidate.includes(target) || target.includes(candidate)) return 85;
+  const distance = levenshtein(target, candidate);
+  const maxLen = Math.max(target.length, candidate.length);
+  const normalized = 1 - distance / maxLen;
+  const score = Math.floor(normalized * 80);
+  return score > 0 ? score : 0;
+}
+var STORIES_EXT = ".stories.mdx";
+function findSimilarStoriesFiles(componentName) {
+  const compName = componentName.toLowerCase();
+  const files = RULES_FILES.filter((file) => file.toLowerCase().endsWith(STORIES_EXT));
+  const scored = files.map((file) => {
+    const baseName = file.toLowerCase().replace(new RegExp(`${STORIES_EXT.replace(".", "\\.")}$`), "");
+    return {
+      file,
+      baseName,
+      score: getSimilarityScore(compName, baseName)
+    };
+  }).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score);
+  return scored;
+}
+var server = new import_mcp.McpServer(
+  {
+    name: "@jongh/figma-plugin",
+    version: "1.0.0"
+  },
+  {
+    capabilities: {
+      logging: logger,
+      resources: {
+        subscribe: true,
+        listChanged: true
+      }
+    }
+  }
+);
+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}`;
+var { connectToFigma, sendCommandToFigma } = createFigmaClient({
+  logger,
+  serverUrl,
+  wsUrlBase: WS_URL
+});
+server.registerTool(
+  "get_selection",
+  {
+    description: "Get information about the current selection in Figma",
+    inputSchema: {}
+  },
+  async () => {
+    try {
+      const result = await sendCommandToFigma("get_selection");
+      return {
+        content: [
+          {
+            type: "text",
+            text: JSON.stringify(result, null, 2)
+          }
+        ]
+      };
+    } catch (error) {
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Error getting selection: ${error instanceof Error ? error.message : String(error)}`
+          }
+        ]
+      };
+    }
+  }
+);
+server.registerPrompt(
+  "design system components",
+  {
+    description: "help analyze design system common components"
+  },
+  () => {
+    return {
+      messages: [
+        {
+          role: "assistant",
+          content: {
+            type: "text",
+            text: `\uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uC815\uBCF4\uB97C \uD30C\uC545\uD558\uC5EC \uCF54\uB4DC \uC81C\uC791\uC5D0 \uD65C\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4. \uCF54\uB4DC \uC0AC\uC6A9 \uC608\uC2DC, \uC124\uBA85 \uB4F1\uC744 \uC815\uD655\uD558\uAC8C \uD30C\uC545\uD558\uC5EC \uC2E4\uC81C \uCF54\uB4DC \uC81C\uC791\uC5D0 \uC815\uD655\uD558\uAC8C \uD65C\uC6A9\uD560 \uC218 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.  
+            \uD2B9\uD788 Figma \uC778\uD130\uD398\uC774\uC2A4\uC640 \uCF54\uB4DC \uAC04\uC758 \uAD6C\uD604 \uCC28\uC774\uB97C \uC815\uD655\uD558\uAC8C \uD30C\uC545\uD558\uACE0 \uCF54\uB4DC\uC5D0 \uB9DE\uAC8C \uD65C\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.`
+          }
+        }
+      ],
+      description: "Troubleshooting guide for connection issues between Figma plugin and MCP server"
+    };
+  }
+);
+server.registerTool(
+  "get_rule_of_components",
+  {
+    title: "Rule of design system component",
+    description: [
+      "\uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC5D0\uC11C \uC0AC\uC6A9\uD558\uB294 \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uADDC\uCE59(\uAD6C\uC870, props, \uC2A4\uD0C0\uC77C \uB4F1)\uC744 \uC870\uD68C\uD558\uB294 MCP \uB3C4\uAD6C\uC785\uB2C8\uB2E4.",
+      "Figma \uB514\uC790\uC778\uC5D0\uC11C \uC0AC\uC6A9\uB41C \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uC774\uB984\uC744 componentName \uC778\uC790\uB85C \uB118\uACA8 \uD638\uCD9C\uD558\uBA74,",
+      "\uD574\uB2F9 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uC815\uBCF4\uB97C \uBC18\uD658\uD558\uC5EC \u2018MCP\uB97C \uD1B5\uD574 \uC0AC\uC6A9\uB41C \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uC815\uBCF4\uB97C \uD30C\uC545\uD55C \uB4A4\u2019 \uD398\uC774\uC9C0 \uCF54\uB4DC\uB97C \uC791\uC131\uD560 \uB54C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.",
+      "\uC608: Figma\uC5D0\uC11C Button \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC4F0\uC600\uB2E4\uBA74 componentName\uC5D0 'button'\uC744 \uB123\uC5B4 \uC774 \uB3C4\uAD6C\uB97C \uD638\uCD9C\uD574 \uAD6C\uD604 \uADDC\uCE59\uC744 \uC870\uD68C\uD558\uC138\uC694."
+    ].join(" "),
+    inputSchema: import_zod.z.object({
+      componentName: import_zod.z.string().describe(
+        "Figma/\uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC5D0\uC11C \uC0AC\uC6A9\uB41C \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984 (\uC608: 'button', 'input', 'modal')"
+      )
+    })
+  },
+  async ({ componentName }) => {
+    const similarFiles = findSimilarStoriesFiles(componentName);
+    const texts = similarFiles.map(({ file }) => __RULES__[file]);
+    return {
+      content: [
+        {
+          type: "text",
+          text: `${texts.join("")}`
+        }
+      ]
+    };
+  }
+);
+server.registerResource(
+  "file",
+  // 리소스 ID
+  new import_mcp.ResourceTemplate("file://{path}/", {
+    list: async () => {
+      return {
+        resources: RULES_FILES.map((filePath) => ({
+          uri: `file://${filePath}`,
+          name: filePath,
+          title: filePath,
+          description: "local file from design-rules",
+          mimeType: "text/plain",
+          _meta: {
+            filePath
+          }
+        }))
+      };
+    }
+  }),
+  {
+    title: "design rule",
+    description: "important rules and guidelines for resolving design data"
+  },
+  // resources/read 핸들러
+  async (uri, props) => {
+    const filePath = props.path;
+    const text = __RULES__[filePath] ?? "";
+    return {
+      contents: [
+        {
+          uri: uri.href,
+          mimeType: "text/plain",
+          text
+        }
+      ]
+    };
+  }
+);
+server.registerPrompt(
+  "data_analysis_strategy",
+  {
+    description: "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"
+    };
+  }
+);
+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,71 @@
+{
+  "name": "@liner-fe/figma-mcp",
+  "version": "1.0.2",
+  "type": "module",
+  "bin": "dist/server/server.cjs",
+  "files": [
+    "dist/server/server.cjs"
+  ],
+  "dependencies": {
+    "@inquirer/prompts": "^7",
+    "@modelcontextprotocol/sdk": "^1.24",
+    "es-toolkit": "^1.39.10",
+    "figma-api": "^2.0.1-beta",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ws": "^8",
+    "xml-js": "^1.6.11",
+    "zod": "^4"
+  },
+  "devDependencies": {
+    "@figma/plugin-typings": "^1.100.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@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",
+    "liner-figma": "1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "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:9001"
+        ]
+      }
+    }
+  },
+  "scripts": {
+    "dev": "plugma dev",
+    "socket": "tsx src/socket.ts",
+    "start": "concurrently \"pnpm run socket\" \"pnpm run dev\" --names \"SOCKET,MCP\" --prefix-colors \"blue,green\"",
+    "build:server": "pnpm tsup",
+    "build": "pnpm build:server",
+    "build:package": "pnpm build",
+    "generate-from-link": "tsx src/generate-from-link.ts"
+  }
+}