@dannote/figma-use 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.1] - 2025-01-17
+
+### Added
+
+- **`profile` command** — performance profiling via Chrome DevTools Protocol
+  - Profile any command: `figma-use profile "get components --limit 20"`
+  - Shows time breakdown (Figma WASM vs JS vs GC)
+  - Lists top functions by CPU time
+  - Requires Figma with `--remote-debugging-port=9222`
+- `get components --name` — filter components by name
+- `get components --limit` — limit results (default 50)
+- `get components --page` — filter by page
+- `find --type` now works without `--name`
+
+### Changed
+
+- `get components` uses early-exit recursion for better performance on large files
+- `node tree --depth` now affects node count check (won't block with high depth limit)
+
+### Fixed
+
+- Variant components no longer crash when accessing `componentPropertyDefinitions`
+- 86 tests passing
+
 ## [0.2.0] - 2025-01-17
 
 ### Added
@@ -113,7 +137,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Export commands: PNG/SVG/PDF export, screenshot
 - Inline styling: `--fill`, `--stroke`, `--radius` etc. on create commands
 
-[unreleased]: https://github.com/dannote/figma-use/compare/v0.2.0...HEAD
+[unreleased]: https://github.com/dannote/figma-use/compare/v0.2.1...HEAD
+[0.2.1]: https://github.com/dannote/figma-use/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/dannote/figma-use/compare/v0.1.5...v0.2.0
 [0.1.5]: https://github.com/dannote/figma-use/compare/v0.1.4...v0.1.5
 [0.1.4]: https://github.com/dannote/figma-use/compare/v0.1.3...v0.1.4

package/README.md

@@ -93,8 +93,9 @@ All create commands support inline styling — no need for separate `set` calls.
 ```bash
 figma-use node get <id>                    # Get node properties
 figma-use node tree [id]                   # Get formatted tree (default: current page)
-figma-use node tree --depth 2              # Limit tree depth
+figma-use node tree --depth 2              # Limit tree depth (also limits node count check)
 figma-use node tree -i                     # Only interactive elements
+figma-use node tree --force                # Skip 500 node limit
 figma-use node children <id>               # Get child nodes
 figma-use node delete <id>                 # Delete node
 figma-use node clone <id>                  # Clone node
@@ -225,8 +226,10 @@ figma-use viewport zoom-to-fit <ids...>
 ```bash
 figma-use find --name "Button"
 figma-use find --name "Icon" --type FRAME
+figma-use find --type INSTANCE              # Find all instances on current page
 figma-use get pages
-figma-use get components
+figma-use get components --name "Button"    # Filter by name
+figma-use get components --limit 50         # Limit results (default: 100)
 figma-use get styles
 ```
 
@@ -255,6 +258,22 @@ figma-use eval "await figma.loadFontAsync({family: 'Inter', style: 'Bold'})"
 figma-use import --svg "<svg>...</svg>" --x 0 --y 0
 ```
 
+### Performance Profiling
+
+Profile any command using Chrome DevTools Protocol:
+
+```bash
+# Start Figma with debug port
+/Applications/Figma.app/Contents/MacOS/Figma --remote-debugging-port=9222
+
+# Profile a command
+figma-use profile "get components --limit 20"
+figma-use profile "node tree --depth 2"
+figma-use profile "find --type INSTANCE"
+```
+
+Output shows time breakdown (Figma WASM vs JS vs GC) and top functions by CPU time.
+
 ## Output Format
 
 Human-readable by default:

package/SKILL.md

@@ -52,8 +52,9 @@ figma-use create text --x 0 --y 0 --text "Hello" \
 ```bash
 figma-use node get <id>                      # Get properties
 figma-use node tree [id]                     # Get formatted tree (see structure at a glance)
-figma-use node tree --depth 2                # Limit tree depth
+figma-use node tree --depth 2                # Limit tree depth (also limits node count)
 figma-use node tree -i                       # Only interactive elements
+figma-use node tree --force                  # Skip 500 node limit
 figma-use node children <id>                 # List children
 figma-use node move <id> --x 100 --y 200
 figma-use node resize <id> --width 300 --height 200
@@ -133,7 +134,9 @@ figma-use viewport zoom-to-fit <ids...>
 ```bash
 figma-use find --name "Button"
 figma-use find --type FRAME
-figma-use get components
+figma-use find --type INSTANCE              # All instances on page
+figma-use get components --name "Button"    # Filter components by name
+figma-use get components --limit 50         # Limit results
 ```
 
 ### Boolean & Group

package/dist/cli/index.js

@@ -3295,6 +3295,7 @@ __export(exports_commands, {
   set: () => set_default,
   selection: () => selection_default,
   proxy: () => proxy_default,
+  profile: () => profile_default,
   plugin: () => plugin_default,
   page: () => page_default2,
   node: () => node_default,
@@ -4566,6 +4567,142 @@ var plugin_default = defineCommand({
     }
   }
 });
+// packages/cli/src/commands/profile.ts
+init_format();
+import { spawn as spawn2 } from "child_process";
+var profile_default = defineCommand({
+  meta: { description: "Profile any figma-use command via Chrome DevTools Protocol" },
+  args: {
+    command: { type: "positional", description: 'Command to profile (e.g., "get components --limit 10")', required: true },
+    port: { type: "string", description: "Chrome DevTools port", default: "9222" },
+    top: { type: "string", description: "Number of top functions to show", default: "20" }
+  },
+  async run({ args }) {
+    const port = Number(args.port);
+    const topN = Number(args.top);
+    const targets = await fetch(`http://localhost:${port}/json`).then((r5) => r5.json()).catch(() => null);
+    if (!targets) {
+      console.error(fail(`Cannot connect to DevTools on port ${port}`));
+      console.error(`Start Figma with: /Applications/Figma.app/Contents/MacOS/Figma --remote-debugging-port=${port}`);
+      process.exit(1);
+    }
+    const figmaTab = targets.find((t3) => t3.title?.includes("Figma") && t3.type === "page" && t3.url?.includes("figma.com/design"));
+    if (!figmaTab) {
+      console.error(fail("No Figma design tab found. Open a Figma file first."));
+      process.exit(1);
+    }
+    console.log(`Profiling: figma-use ${args.command}`);
+    console.log(`Target: ${figmaTab.title}
+`);
+    const ws = new WebSocket(figmaTab.webSocketDebuggerUrl);
+    let msgId = 1;
+    const pending = new Map;
+    ws.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      const resolve3 = pending.get(data.id);
+      if (resolve3) {
+        pending.delete(data.id);
+        resolve3(data);
+      }
+    };
+    const send = (method, params = {}) => {
+      const id = msgId++;
+      return new Promise((resolve3) => {
+        pending.set(id, resolve3);
+        ws.send(JSON.stringify({ id, method, params }));
+      });
+    };
+    await new Promise((r5) => {
+      ws.onopen = () => r5();
+    });
+    await send("Profiler.enable");
+    await send("Profiler.start");
+    const startTime = Date.now();
+    const cmdResult = await new Promise((resolve3) => {
+      const proc = spawn2(process.argv[0], [process.argv[1], ...args.command.split(" "), "--json"], {
+        stdio: ["ignore", "pipe", "pipe"]
+      });
+      let stdout3 = "";
+      let stderr = "";
+      proc.stdout.on("data", (d3) => stdout3 += d3);
+      proc.stderr.on("data", (d3) => stderr += d3);
+      proc.on("close", (code) => resolve3({ stdout: stdout3, stderr, code: code || 0 }));
+    });
+    const duration = Date.now() - startTime;
+    const profile = await send("Profiler.stop");
+    ws.close();
+    let resultItems = "N/A";
+    let resultError = "";
+    try {
+      const parsed = JSON.parse(cmdResult.stdout);
+      if (Array.isArray(parsed))
+        resultItems = String(parsed.length);
+      else if (parsed.error)
+        resultError = parsed.error;
+    } catch {
+      if (cmdResult.stderr)
+        resultError = cmdResult.stderr.trim();
+    }
+    console.log(`Duration: ${duration}ms`);
+    console.log(`Result: ${resultItems} items`);
+    if (resultError)
+      console.log(`Error: ${resultError}`);
+    if (cmdResult.code !== 0)
+      console.log(`Exit code: ${cmdResult.code}`);
+    console.log();
+    const nodes = profile.result.profile.nodes;
+    const samples = profile.result.profile.samples || [];
+    const timeDeltas = profile.result.profile.timeDeltas || [];
+    const counts = {};
+    samples.forEach((nodeId, idx) => {
+      counts[nodeId] = (counts[nodeId] || 0) + (timeDeltas[idx] || 1);
+    });
+    let wasmTime = 0, gcTime = 0, idleTime = 0, jsTime = 0;
+    for (const [nodeId, time] of Object.entries(counts)) {
+      const node = nodes.find((n3) => n3.id === parseInt(nodeId));
+      const name = node?.callFrame?.functionName || "";
+      const url = node?.callFrame?.url || "";
+      if (name === "(garbage collector)")
+        gcTime += time;
+      else if (name === "(idle)")
+        idleTime += time;
+      else if (url.includes(".wasm"))
+        wasmTime += time;
+      else
+        jsTime += time;
+    }
+    const total = wasmTime + gcTime + jsTime;
+    if (total > 0) {
+      console.log("Time breakdown:");
+      console.log(`  Figma WASM:  ${(wasmTime / 1000).toFixed(0).padStart(5)}ms  (${(wasmTime / total * 100).toFixed(0)}%)`);
+      console.log(`  GC:          ${(gcTime / 1000).toFixed(0).padStart(5)}ms  (${(gcTime / total * 100).toFixed(0)}%)`);
+      console.log(`  JS:          ${(jsTime / 1000).toFixed(0).padStart(5)}ms  (${(jsTime / total * 100).toFixed(0)}%)`);
+      console.log(`  Idle:        ${(idleTime / 1000).toFixed(0).padStart(5)}ms`);
+      console.log();
+    }
+    const funcs = Object.entries(counts).map(([nodeId, time]) => {
+      const node = nodes.find((n3) => n3.id === parseInt(nodeId));
+      const cf = node?.callFrame || {};
+      return {
+        name: cf.functionName || "(anonymous)",
+        url: cf.url || "",
+        line: cf.lineNumber || 0,
+        time
+      };
+    }).filter((f5) => f5.time > 500 && f5.name !== "(idle)").sort((a3, b3) => b3.time - a3.time).slice(0, topN);
+    if (funcs.length > 0) {
+      console.log(`Top ${Math.min(topN, funcs.length)} functions by CPU time:`);
+      console.log("\u2500".repeat(75));
+      for (const f5 of funcs) {
+        const shortUrl = f5.url.split("/").pop()?.slice(0, 25) || "";
+        const loc = shortUrl ? `${shortUrl}:${f5.line}` : "";
+        console.log(`${(f5.time / 1000).toFixed(1).padStart(7)}ms  ${f5.name.slice(0, 40).padEnd(40)}  ${loc}`);
+      }
+      console.log();
+    }
+    console.log(ok("Profile complete"));
+  }
+});
 // packages/cli/src/commands/eval.ts
 var eval_default = defineCommand({
   meta: { description: "Execute JavaScript in Figma plugin context" },
@@ -4724,8 +4861,13 @@ var tree_default = defineCommand({
     try {
       const id = args.id || (await sendCommand("get-current-page", {})).id;
       const result = await sendCommand("get-node-tree", { id });
-      const countNodes = (n3) => 1 + (n3.children?.reduce((sum, c5) => sum + countNodes(c5), 0) || 0);
-      const total = countNodes(result);
+      const maxDepth = Number(args.depth);
+      const countNodes = (n3, depth) => {
+        if (maxDepth !== -1 && depth > maxDepth)
+          return 0;
+        return 1 + (n3.children?.reduce((sum, c5) => sum + countNodes(c5, depth + 1), 0) || 0);
+      };
+      const total = countNodes(result, 0);
       if (!args.force && total > MAX_NODES) {
         console.error(fail(`Tree has ${total} nodes (limit: ${MAX_NODES}). Use --depth to limit or --force to override.`));
         process.exit(1);
@@ -4736,7 +4878,7 @@ var tree_default = defineCommand({
       }
       const options = {
         showHidden: args.hidden || false,
-        maxDepth: Number(args.depth),
+        maxDepth,
         interactive: args.interactive || false
       };
       const lines = formatTreeNode(result, 0, 0, options);
@@ -5721,13 +5863,18 @@ var pages_default = defineCommand({
 
 // packages/cli/src/commands/get/components.ts
 var components_default = defineCommand({
-  meta: { description: "Get all components" },
+  meta: { description: "Get components" },
   args: {
+    name: { type: "string", description: "Filter by name (case-insensitive)" },
+    limit: { type: "string", description: "Max results", default: "100" },
     json: { type: "boolean", description: "Output as JSON" }
   },
   async run({ args }) {
     try {
-      const result = await sendCommand("get-all-components");
+      const result = await sendCommand("get-all-components", {
+        name: args.name,
+        limit: Number(args.limit)
+      });
       printResult(result, args.json);
     } catch (e3) {
       handleError(e3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dannote/figma-use",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Control Figma from the command line. Full read/write access for AI agents.",
   "type": "module",
   "bin": {

package/packages/plugin/dist/main.js

@@ -80,13 +80,30 @@
           return serializeTree(node);
         }
         case "get-all-components": {
+          const { name, limit = 50, page } = args || {};
           const components = [];
-          figma.root.findAll((node) => {
+          const nameLower = name == null ? void 0 : name.toLowerCase();
+          const searchNode = (node) => {
+            if (components.length >= limit) return false;
             if (node.type === "COMPONENT" || node.type === "COMPONENT_SET") {
-              components.push(serializeNode(node));
+              if (!nameLower || node.name.toLowerCase().includes(nameLower)) {
+                components.push(serializeNode(node));
+              }
             }
-            return false;
-          });
+            if ("children" in node) {
+              for (const child of node.children) {
+                if (!searchNode(child)) return false;
+              }
+            }
+            return components.length < limit;
+          };
+          const pages = page ? figma.root.children.filter((p) => p.id === page || p.name === page) : figma.root.children;
+          for (const pageNode of pages) {
+            if (components.length >= limit) break;
+            for (const child of pageNode.children) {
+              if (!searchNode(child)) break;
+            }
+          }
           return components;
         }
         case "get-pages":
@@ -518,7 +535,7 @@
           const { name, type, exact } = args;
           const results = [];
           figma.currentPage.findAll((n) => {
-            const nameMatch = exact ? n.name === name : n.name.toLowerCase().includes(name.toLowerCase());
+            const nameMatch = !name || (exact ? n.name === name : n.name.toLowerCase().includes(name.toLowerCase()));
             const typeMatch = !type || n.type === type;
             if (nameMatch && typeMatch) results.push(serializeNode(n));
             return false;
@@ -1020,7 +1037,10 @@
       base.strokeWeight = node.strokeWeight;
     }
     if ("componentPropertyDefinitions" in node) {
-      base.componentPropertyDefinitions = node.componentPropertyDefinitions;
+      try {
+        base.componentPropertyDefinitions = node.componentPropertyDefinitions;
+      } catch (e) {
+      }
     }
     if ("componentProperties" in node) {
       base.componentProperties = node.componentProperties;