with-figma 0.1.0

package/bin/with-figma.js

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+const path = require("path");
+const fs = require("fs");
+const command = process.argv[2];
+
+const PKG_ROOT = path.resolve(__dirname, "..");
+
+// ─── init: configure MCP settings in current project ──────────────
+if (command === "init") {
+  const cwd = process.cwd();
+  const serverBin = "with-figma";
+
+  // .vscode/mcp.json
+  const vscodeDir = path.join(cwd, ".vscode");
+  const mcpJsonPath = path.join(vscodeDir, "mcp.json");
+  if (!fs.existsSync(vscodeDir)) fs.mkdirSync(vscodeDir, { recursive: true });
+
+  let mcpJson = {};
+  if (fs.existsSync(mcpJsonPath)) {
+    try { mcpJson = JSON.parse(fs.readFileSync(mcpJsonPath, "utf-8")); } catch {}
+  }
+  if (!mcpJson.servers) mcpJson.servers = {};
+  mcpJson.servers["with-figma"] = {
+    command: "npx",
+    args: ["-y", "with-figma", "serve"],
+  };
+  fs.writeFileSync(mcpJsonPath, JSON.stringify(mcpJson, null, 2) + "\n");
+  console.log("✓ .vscode/mcp.json updated");
+
+  // .claude/settings.json
+  const claudeDir = path.join(cwd, ".claude");
+  const claudePath = path.join(claudeDir, "settings.json");
+  if (!fs.existsSync(claudeDir)) fs.mkdirSync(claudeDir, { recursive: true });
+
+  let claudeJson = {};
+  if (fs.existsSync(claudePath)) {
+    try { claudeJson = JSON.parse(fs.readFileSync(claudePath, "utf-8")); } catch {}
+  }
+  if (!claudeJson.mcpServers) claudeJson.mcpServers = {};
+  claudeJson.mcpServers["with-figma"] = {
+    command: "npx",
+    args: ["-y", "with-figma", "serve"],
+  };
+  fs.writeFileSync(claudePath, JSON.stringify(claudeJson, null, 2) + "\n");
+  console.log("✓ .claude/settings.json updated");
+
+  // Show Figma plugin path
+  const manifestPath = path.join(PKG_ROOT, "figma-plugin", "manifest.json");
+  console.log("");
+  console.log("MCP server configured. Next steps:");
+  console.log("");
+  console.log("1. Import Figma plugin:");
+  console.log("   Figma → Plugins → Development → Import plugin from manifest");
+  console.log("   Path: " + manifestPath);
+  console.log("");
+  console.log("2. Restart VS Code or Claude Code");
+  console.log("3. Open the plugin in Figma → select elements → chat with AI");
+
+  process.exit(0);
+}
+
+// ─── serve: start MCP server (default) ────────────────────────────
+if (!command || command === "serve") {
+  require(path.join(PKG_ROOT, "mcp-server", "dist", "index.js"));
+} else {
+  console.error(`Unknown command: ${command}`);
+  console.error("Usage:");
+  console.error("  npx with-figma init   — configure MCP in current project");
+  console.error("  npx with-figma serve  — start MCP server");
+  process.exit(1);
+}

package/figma-plugin/dist/code.js

@@ -0,0 +1,178 @@
+"use strict";
+(() => {
+  // figma-plugin/code.ts
+  figma.showUI(__html__, { width: 400, height: 600, themeColors: true });
+  function serializeNode(node) {
+    const base = {
+      id: node.id,
+      name: node.name,
+      type: node.type,
+      visible: node.visible
+    };
+    if ("x" in node) base.x = node.x;
+    if ("y" in node) base.y = node.y;
+    if ("width" in node) base.width = node.width;
+    if ("height" in node) base.height = node.height;
+    if ("fills" in node) base.fills = node.fills;
+    if ("strokes" in node) base.strokes = node.strokes;
+    if ("characters" in node) base.characters = node.characters;
+    if ("children" in node) {
+      base.childCount = node.children.length;
+      base.children = node.children.map((c) => ({
+        id: c.id,
+        name: c.name,
+        type: c.type
+      }));
+    }
+    return base;
+  }
+  function sendSelection() {
+    const selection = figma.currentPage.selection;
+    const nodes = selection.map(serializeNode);
+    figma.ui.postMessage({
+      type: "selection-changed",
+      nodes,
+      page: {
+        id: figma.currentPage.id,
+        name: figma.currentPage.name
+      }
+    });
+  }
+  figma.on("selectionchange", sendSelection);
+  sendSelection();
+  function sendPages() {
+    const pages = figma.root.children.map((p) => ({
+      id: p.id,
+      name: p.name
+    }));
+    figma.ui.postMessage({ type: "pages-list", pages });
+  }
+  sendPages();
+  figma.ui.onmessage = async (msg) => {
+    switch (msg.type) {
+      case "get-selection":
+        sendSelection();
+        break;
+      case "get-pages":
+        sendPages();
+        break;
+      case "get-node": {
+        const nodeId = msg.nodeId;
+        const node = figma.getNodeById(nodeId);
+        if (node) {
+          figma.ui.postMessage({
+            type: "node-data",
+            requestId: msg.requestId,
+            node: serializeNode(node)
+          });
+        }
+        break;
+      }
+      case "create-frame": {
+        const frame = figma.createFrame();
+        frame.name = msg.name || "New Frame";
+        frame.resize(
+          msg.width || 375,
+          msg.height || 812
+        );
+        frame.x = msg.x || 0;
+        frame.y = msg.y || 0;
+        if (msg.fills) frame.fills = msg.fills;
+        figma.currentPage.appendChild(frame);
+        figma.ui.postMessage({
+          type: "node-created",
+          requestId: msg.requestId,
+          node: serializeNode(frame)
+        });
+        break;
+      }
+      case "create-rectangle": {
+        const parent = msg.parentId ? figma.getNodeById(msg.parentId) : figma.currentPage;
+        const rect = figma.createRectangle();
+        rect.name = msg.name || "Rectangle";
+        rect.resize(msg.width || 100, msg.height || 100);
+        rect.x = msg.x || 0;
+        rect.y = msg.y || 0;
+        if (msg.fills) rect.fills = msg.fills;
+        if (msg.cornerRadius) rect.cornerRadius = msg.cornerRadius;
+        if (parent && "appendChild" in parent) parent.appendChild(rect);
+        figma.ui.postMessage({
+          type: "node-created",
+          requestId: msg.requestId,
+          node: serializeNode(rect)
+        });
+        break;
+      }
+      case "create-text": {
+        const textParent = msg.parentId ? figma.getNodeById(msg.parentId) : figma.currentPage;
+        const text = figma.createText();
+        await figma.loadFontAsync({ family: "Inter", style: "Regular" });
+        text.name = msg.name || "Text";
+        text.characters = msg.characters || "Text";
+        text.fontSize = msg.fontSize || 16;
+        text.x = msg.x || 0;
+        text.y = msg.y || 0;
+        if (msg.fills) text.fills = msg.fills;
+        if (textParent && "appendChild" in textParent)
+          textParent.appendChild(text);
+        figma.ui.postMessage({
+          type: "node-created",
+          requestId: msg.requestId,
+          node: serializeNode(text)
+        });
+        break;
+      }
+      case "modify-node": {
+        const target = figma.getNodeById(msg.nodeId);
+        if (!target) break;
+        const props = msg.properties;
+        for (const [key, value] of Object.entries(props)) {
+          if (key === "characters" && target.type === "TEXT") {
+            await figma.loadFontAsync({ family: "Inter", style: "Regular" });
+            target.characters = value;
+          } else if (key === "width" || key === "height") {
+            const w = key === "width" ? value : target.width;
+            const h = key === "height" ? value : target.height;
+            target.resize(w, h);
+          } else {
+            target[key] = value;
+          }
+        }
+        figma.ui.postMessage({
+          type: "node-modified",
+          requestId: msg.requestId,
+          node: serializeNode(target)
+        });
+        break;
+      }
+      case "delete-node": {
+        const toDelete = figma.getNodeById(msg.nodeId);
+        if (toDelete) {
+          toDelete.remove();
+          figma.ui.postMessage({
+            type: "node-deleted",
+            requestId: msg.requestId,
+            nodeId: msg.nodeId
+          });
+        }
+        break;
+      }
+      case "export-node": {
+        const exportNode = figma.getNodeById(msg.nodeId);
+        if (exportNode) {
+          const bytes = await exportNode.exportAsync({
+            format: msg.format || "PNG",
+            scale: msg.scale || 2
+          });
+          figma.ui.postMessage({
+            type: "node-exported",
+            requestId: msg.requestId,
+            data: Array.from(bytes),
+            format: msg.format || "PNG"
+          });
+        }
+        break;
+      }
+    }
+  };
+})();

package/figma-plugin/manifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "With Figma AI Bridge",
+  "id": "with-figma-ai-bridge",
+  "api": "1.0.0",
+  "main": "dist/code.js",
+  "ui": "ui.html",
+  "editorType": ["figma"],
+  "networkAccess": {
+    "allowedDomains": ["http://localhost:3055", "ws://localhost:3055"],
+    "reasoning": "WebSocket connection to local MCP server"
+  },
+  "permissions": ["currentuser"]
+}

package/figma-plugin/ui.html

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-size: 13px;
+      color: var(--figma-color-text, #333);
+      background: var(--figma-color-bg, #fff);
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+
+    /* ─── Header ─── */
+    .header {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--figma-color-border, #e5e5e5);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .status-dot {
+      width: 8px; height: 8px;
+      border-radius: 50%;
+      background: #ccc;
+    }
+    .status-dot.connected { background: #18a957; }
+    .status-dot.connecting { background: #f5a623; animation: pulse 1s infinite; }
+    @keyframes pulse { 50% { opacity: 0.5; } }
+    .header-title { font-weight: 600; flex: 1; }
+
+    /* ─── Selection Info ─── */
+    .selection-bar {
+      padding: 8px 16px;
+      background: var(--figma-color-bg-secondary, #f5f5f5);
+      border-bottom: 1px solid var(--figma-color-border, #e5e5e5);
+      font-size: 12px;
+      color: var(--figma-color-text-secondary, #666);
+    }
+    .selection-bar .node-name {
+      font-weight: 600;
+      color: var(--figma-color-text, #333);
+    }
+
+    /* ─── Chat Area ─── */
+    .chat-area {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .message {
+      max-width: 85%;
+      padding: 10px 14px;
+      border-radius: 12px;
+      line-height: 1.5;
+      word-break: break-word;
+    }
+    .message.user {
+      align-self: flex-end;
+      background: #0d99ff;
+      color: #fff;
+      border-bottom-right-radius: 4px;
+    }
+    .message.assistant {
+      align-self: flex-start;
+      background: var(--figma-color-bg-secondary, #f0f0f0);
+      border-bottom-left-radius: 4px;
+    }
+    .message.system {
+      align-self: center;
+      font-size: 11px;
+      color: var(--figma-color-text-tertiary, #999);
+      background: none;
+      padding: 4px;
+    }
+
+    /* ─── Input Area ─── */
+    .input-area {
+      padding: 12px 16px;
+      border-top: 1px solid var(--figma-color-border, #e5e5e5);
+      display: flex;
+      gap: 8px;
+    }
+    .input-area textarea {
+      flex: 1;
+      border: 1px solid var(--figma-color-border, #ddd);
+      border-radius: 8px;
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: inherit;
+      resize: none;
+      outline: none;
+      background: var(--figma-color-bg, #fff);
+      color: var(--figma-color-text, #333);
+      min-height: 40px;
+      max-height: 120px;
+    }
+    .input-area textarea:focus { border-color: #0d99ff; }
+    .input-area button {
+      background: #0d99ff;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      align-self: flex-end;
+    }
+    .input-area button:hover { background: #0b85e0; }
+    .input-area button:disabled { opacity: 0.5; cursor: not-allowed; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div class="status-dot" id="statusDot"></div>
+    <span class="header-title">With Figma AI</span>
+    <span id="statusText" style="font-size:11px; color:#999">Disconnected</span>
+  </div>
+
+  <div class="selection-bar" id="selectionBar">
+    No selection
+  </div>
+
+  <div class="chat-area" id="chatArea">
+    <div class="message system">Select an element and describe what you want to do.</div>
+  </div>
+
+  <div class="input-area">
+    <textarea id="input" placeholder="이 요소를 어떻게 작업할까요?" rows="1"></textarea>
+    <button id="sendBtn" disabled>Send</button>
+  </div>
+
+  <script>
+    const WS_URL = "ws://localhost:3055";
+
+    let ws = null;
+    let currentSelection = [];
+    let currentPage = null;
+    let reconnectTimer = null;
+
+    const chatArea = document.getElementById("chatArea");
+    const input = document.getElementById("input");
+    const sendBtn = document.getElementById("sendBtn");
+    const statusDot = document.getElementById("statusDot");
+    const statusText = document.getElementById("statusText");
+    const selectionBar = document.getElementById("selectionBar");
+
+    // ─── WebSocket ────────────────────────────────────────────────
+
+    function connect() {
+      if (ws && ws.readyState <= 1) return;
+      setStatus("connecting");
+
+      ws = new WebSocket(WS_URL);
+
+      ws.onopen = () => {
+        setStatus("connected");
+        addMessage("system", "Connected to AI server.");
+        // Send current selection state
+        if (currentSelection.length > 0) {
+          ws.send(JSON.stringify({
+            type: "selection-update",
+            nodes: currentSelection,
+            page: currentPage,
+          }));
+        }
+      };
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          handleServerMessage(msg);
+        } catch (e) {
+          console.error("Failed to parse message:", e);
+        }
+      };
+
+      ws.onclose = () => {
+        setStatus("disconnected");
+        scheduleReconnect();
+      };
+
+      ws.onerror = () => {
+        ws.close();
+      };
+    }
+
+    function scheduleReconnect() {
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      reconnectTimer = setTimeout(connect, 3000);
+    }
+
+    function setStatus(state) {
+      statusDot.className = "status-dot " + (state === "connected" ? "connected" : state === "connecting" ? "connecting" : "");
+      statusText.textContent = state === "connected" ? "Connected" : state === "connecting" ? "Connecting..." : "Disconnected";
+      sendBtn.disabled = state !== "connected";
+    }
+
+    // ─── Server message handling ──────────────────────────────────
+
+    function handleServerMessage(msg) {
+      switch (msg.type) {
+        case "chat-response":
+          addMessage("assistant", msg.text);
+          break;
+
+        case "figma-command":
+          // Relay command to Figma plugin sandbox
+          parent.postMessage({ pluginMessage: msg.command }, "*");
+          break;
+
+        case "request-selection":
+          parent.postMessage({ pluginMessage: { type: "get-selection" } }, "*");
+          break;
+
+        case "status":
+          addMessage("system", msg.text);
+          break;
+      }
+    }
+
+    // ─── Messages from Figma plugin sandbox ───────────────────────
+
+    window.onmessage = (event) => {
+      const msg = event.data.pluginMessage;
+      if (!msg) return;
+
+      switch (msg.type) {
+        case "selection-changed":
+          currentSelection = msg.nodes;
+          currentPage = msg.page;
+          updateSelectionUI();
+          // Forward to server
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({
+              type: "selection-update",
+              nodes: msg.nodes,
+              page: msg.page,
+            }));
+          }
+          break;
+
+        case "pages-list":
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: "pages-list", pages: msg.pages }));
+          }
+          break;
+
+        // Forward all result messages to server
+        case "node-data":
+        case "node-created":
+        case "node-modified":
+        case "node-deleted":
+        case "node-exported":
+          if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify(msg));
+          }
+          break;
+      }
+    };
+
+    // ─── UI Helpers ───────────────────────────────────────────────
+
+    function updateSelectionUI() {
+      if (currentSelection.length === 0) {
+        selectionBar.innerHTML = "No selection";
+      } else if (currentSelection.length === 1) {
+        const n = currentSelection[0];
+        selectionBar.innerHTML = `<span class="node-name">${n.name}</span> (${n.type}) — ${Math.round(n.width)}×${Math.round(n.height)}`;
+      } else {
+        selectionBar.innerHTML = `<span class="node-name">${currentSelection.length} elements</span> selected`;
+      }
+    }
+
+    function addMessage(role, text) {
+      const div = document.createElement("div");
+      div.className = "message " + role;
+      div.textContent = text;
+      chatArea.appendChild(div);
+      chatArea.scrollTop = chatArea.scrollHeight;
+    }
+
+    // ─── User Input ───────────────────────────────────────────────
+
+    function sendMessage() {
+      const text = input.value.trim();
+      if (!text || !ws || ws.readyState !== WebSocket.OPEN) return;
+
+      addMessage("user", text);
+      ws.send(JSON.stringify({
+        type: "chat-message",
+        text,
+        selection: currentSelection,
+        page: currentPage,
+      }));
+      input.value = "";
+      input.style.height = "auto";
+    }
+
+    sendBtn.addEventListener("click", sendMessage);
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+    input.addEventListener("input", () => {
+      input.style.height = "auto";
+      input.style.height = Math.min(input.scrollHeight, 120) + "px";
+    });
+
+    // Start connection
+    connect();
+  </script>
+</body>
+</html>