@biolab/talk-to-figma 0.4.0 → 0.5.0

package/figma-plugin/code.js

@@ -253,6 +253,10 @@ async function handleCommand(command, params) {
       return await setVariableModeName(params);
     case "set_variable_binding":
       return await setVariableBinding(params);
+    case "create_component":
+      return await createComponent(params);
+    case "create_component_set":
+      return await createComponentSet(params);
     default:
       throw new Error(`Unknown command: ${command}`);
   }
@@ -1505,6 +1509,108 @@ async function createComponentInstance(params) {
   }
 }
 
+async function createComponent(params) {
+  const { nodeId } = params || {};
+
+  if (!nodeId) {
+    throw new Error("Missing nodeId parameter");
+  }
+
+  const node = await figma.getNodeByIdAsync(nodeId);
+  if (!node) {
+    throw new Error(`Node not found with ID: ${nodeId}`);
+  }
+
+  if (node.type === "COMPONENT" || node.type === "COMPONENT_SET") {
+    throw new Error(`Node is already a ${node.type}. Cannot convert to component.`);
+  }
+
+  let parent = node.parent;
+  while (parent) {
+    if (parent.type === "COMPONENT" || parent.type === "COMPONENT_SET" || parent.type === "INSTANCE") {
+      throw new Error(
+        `Cannot create component from a node nested inside a ${parent.type} ("${parent.name}"). Move the node outside first.`
+      );
+    }
+    parent = parent.parent;
+  }
+
+  try {
+    const component = figma.createComponentFromNode(node);
+    return {
+      id: component.id,
+      name: component.name,
+      key: component.key,
+      type: component.type,
+      x: component.x,
+      y: component.y,
+      width: component.width,
+      height: component.height,
+    };
+  } catch (error) {
+    throw new Error(`Error creating component from node: ${error.message}`);
+  }
+}
+
+async function createComponentSet(params) {
+  const { nodeIds, parentId } = params || {};
+
+  if (!nodeIds || !Array.isArray(nodeIds) || nodeIds.length === 0) {
+    throw new Error("Missing or empty nodeIds array. Provide at least one component node ID.");
+  }
+
+  const components = [];
+  const errors = [];
+
+  for (const nid of nodeIds) {
+    const node = await figma.getNodeByIdAsync(nid);
+    if (!node) {
+      errors.push(`Node not found: ${nid}`);
+      continue;
+    }
+    if (node.type !== "COMPONENT") {
+      errors.push(`Node "${node.name}" (${nid}) is type ${node.type}, not COMPONENT. Convert it first.`);
+      continue;
+    }
+    components.push(node);
+  }
+
+  if (errors.length > 0) {
+    throw new Error(`Invalid nodes:\n${errors.join("\n")}`);
+  }
+
+  let parentNode;
+  if (parentId) {
+    parentNode = await figma.getNodeByIdAsync(parentId);
+    if (!parentNode) {
+      throw new Error(`Parent node not found: ${parentId}`);
+    }
+  } else {
+    parentNode = components[0].parent || figma.currentPage;
+  }
+
+  try {
+    const componentSet = figma.combineAsVariants(components, parentNode);
+    return {
+      id: componentSet.id,
+      name: componentSet.name,
+      type: componentSet.type,
+      x: componentSet.x,
+      y: componentSet.y,
+      width: componentSet.width,
+      height: componentSet.height,
+      childCount: componentSet.children.length,
+      children: componentSet.children.map((child) => ({
+        id: child.id,
+        name: child.name,
+        type: child.type,
+      })),
+    };
+  } catch (error) {
+    throw new Error(`Error creating component set: ${error.message}`);
+  }
+}
+
 async function exportNodeAsImage(params) {
   const { nodeId, scale = 1 } = params || {};
 

package/figma-plugin/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Cursor MCP Plugin",
+  "name": "Talk To Figma MCP",
   "id": "1485687494525374295",
   "api": "1.0.0",
   "main": "code.js",
@@ -13,7 +13,7 @@
     "allowedDomains": [
       "ws://localhost:3055"
     ],
-    "reasoning": "This is a plugin for Cursor that allows you to connect to a local server",
+    "reasoning": "Connects to a local WebSocket relay for MCP communication with AI agents",
     "devAllowedDomains": [
       "http://localhost:3055",
       "ws://localhost:3055"

package/figma-plugin/ui.html

@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Cursor MCP Plugin</title>
+    <title>Talk to Figma MCP</title>
     <style>
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -258,7 +258,7 @@
       <div class="header">
         <div class="header-text">
           <h1>Talk To Figma MCP Plugin</h1>
-          <p>Connect Figma to Cursor AI using MCP</p>
+          <p>Connect Figma to AI agents using MCP</p>
         </div>
       </div>
 
@@ -289,7 +289,7 @@
         </div>
 
         <div id="connection-status" class="status disconnected">
-          Not connected to Cursor MCP server
+          Not connected to MCP server
         </div>
 
         <div id="mcp-config" class="section hidden">
@@ -357,21 +357,21 @@
         <div class="section">
           <h2>About Talk To Figma Plugin</h2>
           <p>
-            This plugin allows Cursor AI to communicate with Figma, enabling
-            AI-assisted design operations.
+            This plugin lets AI agents (Cursor, Claude Code) read and modify
+            Figma designs via MCP.
             <a
               class="link"
-              onclick="window.open(`https://github.com/grab/cursor-talk-to-figma-mcp`, '_blank')"
+              onclick="window.open(`https://github.com/anthropics/cursor-talk-to-figma-mcp`, '_blank')"
               >Github</a
             >
           </p>
-          <p>Version: 1.1.0</p>
+          <p>Version: 0.4.0</p>
 
           <h2>How to Use</h2>
           <ol>
-            <li>Make sure the MCP server is running in Cursor</li>
-            <li>Connect to the server using the port number (default: 3055)</li>
-            <li>Once connected, you can interact with Figma through Cursor</li>
+            <li>Start the relay: <code>bunx @biolab/talk-to-figma --relay</code></li>
+            <li>Connect to the relay using the port number (default: 3055)</li>
+            <li>In your AI agent, call <code>join_channel</code> with the channel name shown above</li>
           </ol>
         </div>
       </div>
@@ -410,12 +410,12 @@
         let statusMessage =
           message ||
           (isConnected
-            ? "Connected to Cursor MCP server"
-            : "Not connected to Cursor MCP server");
+            ? "Connected to MCP server"
+            : "Not connected to MCP server");
 
         // Add instructions for localhost when disconnected
         if (!isConnected) {
-          statusMessage += `<br><br>Run this in your terminal, then connect<br><code>bunx cursor-talk-to-figma-socket</code>`;
+          statusMessage += `<br><br>Run this in your terminal, then connect<br><code>bunx @biolab/talk-to-figma --relay</code>`;
         }
 
         connectionStatus.innerHTML = statusMessage;
@@ -486,7 +486,7 @@
                     {
                       pluginMessage: {
                         type: "notify",
-                        message: `Connected to Cursor MCP server on port ${port} in channel: ${channelName}`,
+                        message: `Connected to MCP server on port ${port} in channel: ${channelName}`,
                       },
                     },
                     "*"
@@ -818,7 +818,7 @@
           mcpServers: {
             TalkToFigma: {
               command: "bunx",
-              args: ["cursor-talk-to-figma-mcp@latest"],
+              args: ["@biolab/talk-to-figma@latest"],
             },
           },
         };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@biolab/talk-to-figma",
   "description": "Talk to Figma MCP Server",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "module": "dist/server.js",
   "main": "dist/server.js",
   "bin": {