@dannote/figma-use 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -7,6 +7,56 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.0] - 2026-01-18
+
+### Added
+
+- **`defineVars` API for Figma variables** — bind colors to variables by name
+  ```tsx
+  const colors = defineVars({
+    primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
+    accent: { name: 'Colors/Blue/500', value: '#3B82F6' },
+  })
+  <Frame style={{ backgroundColor: colors.primary }} />
+  ```
+- Variable binding for `backgroundColor`, `borderColor`, and text `color`
+- Variables resolved by name at render time (no more magic IDs)
+- `defineVars` support in stdin snippets
+- Explicit fallback values in `defineVars` for proper color display
+
+### Fixed
+
+- Auto-layout now works correctly via `trigger-layout` post-render
+- Nested auto-layout frames trigger recursively
+- Variable binding encoding matches Figma's exact wire format
+
+### Changed
+
+- Marked React render and variable bindings as **experimental** in docs
+
+## [0.3.1] - 2026-01-18
+
+### Added
+
+- **Variable binding via multiplayer protocol** — bind fill colors to Figma variables without plugin API
+  - `encodePaintWithVariableBinding()` — encode Paint with color variable binding
+  - `encodeNodeChangeWithVariables()` — encode NodeChange with variable-bound paints  
+  - `parseVariableId()` — parse "VariableID:sessionID:localID" strings
+- New exports: `VariableBinding`, `encodePaintWithVariableBinding`, `encodeNodeChangeWithVariables`, `parseVariableId`
+- `bind-fill-variable` plugin command — bind fill color to variable
+- `bind-stroke-variable` plugin command — bind stroke color to variable
+
+### Fixed
+
+- Message field mapping: nodeChanges is field 4, reconnectSequenceNumber is field 25
+- Paint variable binding format now matches Figma's exact wire format
+
+### Technical
+
+- Discovered Figma's variable binding wire format via WebSocket traffic analysis
+- Created capture/diff tools for binary protocol analysis (`scripts/capture.ts`, `scripts/diff-hex.ts`)
+- 142 tests passing
+
 ## [0.3.0] - 2025-01-17
 
 ### Added

package/README.md

@@ -258,7 +258,9 @@ figma-use group ungroup <id>
 figma-use group flatten "1:2,1:3"
 ```
 
-### Render React Components
+### Render React Components (Experimental)
+
+> ⚠️ **Experimental**: The React render feature uses Figma's internal multiplayer protocol, which is undocumented and may change without notice. Use for prototyping and automation, not production workflows.
 
 Render TSX/JSX components directly to Figma via WebSocket (bypasses plugin API for ~100x speed):
 
@@ -443,3 +445,33 @@ Workflow:
 ## License
 
 MIT
+
+### Variable Bindings (Experimental)
+
+> ⚠️ **Experimental**: Variable binding uses reverse-engineered protocol. Supports `backgroundColor`, `borderColor`, and text `color`.
+
+Bind Figma variables to colors using human-readable names:
+
+```tsx
+// tokens.figma.ts
+import { defineVars } from '@dannote/figma-use'
+
+export const colors = defineVars({
+  primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
+  accent: { name: 'Colors/Blue/500', value: '#3B82F6' },
+  text: { name: 'Colors/Gray/900', value: '#0F172A' },
+})
+
+// Card.figma.tsx
+import { colors } from './tokens.figma'
+
+export function Card({ title }: { title: string }) {
+  return (
+    <Frame style={{ backgroundColor: colors.primary }}>
+      <Text style={{ color: colors.text }}>{title}</Text>
+    </Frame>
+  )
+}
+```
+
+The `value` field provides a fallback color for display. Variables are bound at the protocol level — no plugin API calls needed.

package/SKILL.md

@@ -148,7 +148,9 @@ figma-use group create "1:2,1:3"
 figma-use group ungroup <id>
 ```
 
-### Render React Components
+### Render React Components (Experimental)
+
+> ⚠️ Uses Figma's internal multiplayer protocol — may break without notice.
 
 Render TSX/JSX directly to Figma (~100x faster than plugin API):
 
@@ -178,6 +180,25 @@ figma-use render ./Card.figma.tsx --parent "1:23"
 
 Available elements: `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Component`, `Instance`, `Group`
 
+#### Variable Bindings (Experimental)
+
+Bind Figma variables to colors by name with fallback values:
+
+```tsx
+import { defineVars, Frame } from '@dannote/figma-use'
+
+const colors = defineVars({
+  primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
+  border: { name: 'Colors/Gray/500', value: '#64748B' },
+})
+
+export default () => (
+  <Frame style={{ backgroundColor: colors.primary, borderColor: colors.border }} />
+)
+```
+
+Supports: `backgroundColor`, `borderColor`, text `color`.
+
 ### Eval (Arbitrary Code)
 
 ```bash

package/dist/cli/index.js

@@ -18920,6 +18920,92 @@ var require_react_reconciler = __commonJS((exports, module) => {
   }
 });
 
+// packages/cli/src/render/vars.ts
+var exports_vars = {};
+__export(exports_vars, {
+  resolveVariable: () => resolveVariable,
+  loadVariablesIntoRegistry: () => loadVariablesIntoRegistry,
+  isVariable: () => isVariable,
+  isRegistryLoaded: () => isRegistryLoaded,
+  getRegistrySize: () => getRegistrySize,
+  figmaVar: () => figmaVar,
+  defineVars: () => defineVars
+});
+function isVariable(value) {
+  return typeof value === "object" && value !== null && VAR_SYMBOL in value;
+}
+function loadVariablesIntoRegistry(variables) {
+  variableRegistry.clear();
+  for (const v3 of variables) {
+    const match = v3.id.match(/VariableID:(\d+):(\d+)/);
+    if (match) {
+      variableRegistry.set(v3.name, {
+        id: v3.id,
+        sessionID: parseInt(match[1], 10),
+        localID: parseInt(match[2], 10)
+      });
+    }
+  }
+}
+function resolveVariable(variable) {
+  if (variable._resolved) {
+    return variable._resolved;
+  }
+  const idMatch = variable.name.match(/^(?:VariableID:)?(\d+):(\d+)$/);
+  if (idMatch) {
+    const resolved2 = {
+      id: `VariableID:${idMatch[1]}:${idMatch[2]}`,
+      sessionID: parseInt(idMatch[1], 10),
+      localID: parseInt(idMatch[2], 10)
+    };
+    variable._resolved = resolved2;
+    return resolved2;
+  }
+  const resolved = variableRegistry.get(variable.name);
+  if (!resolved) {
+    const available = Array.from(variableRegistry.keys()).slice(0, 5).join(", ");
+    throw new Error(`Variable "${variable.name}" not found. ` + `Available: ${available}${variableRegistry.size > 5 ? "..." : ""}. ` + `Make sure variables are loaded before render.`);
+  }
+  variable._resolved = resolved;
+  return resolved;
+}
+function isRegistryLoaded() {
+  return variableRegistry.size > 0;
+}
+function getRegistrySize() {
+  return variableRegistry.size;
+}
+function defineVars(vars) {
+  const result = {};
+  for (const [key, def] of Object.entries(vars)) {
+    if (typeof def === "string") {
+      result[key] = {
+        [VAR_SYMBOL]: true,
+        name: def
+      };
+    } else {
+      result[key] = {
+        [VAR_SYMBOL]: true,
+        name: def.name,
+        value: def.value
+      };
+    }
+  }
+  return result;
+}
+function figmaVar(name, value) {
+  return {
+    [VAR_SYMBOL]: true,
+    name,
+    value
+  };
+}
+var VAR_SYMBOL, variableRegistry;
+var init_vars = __esm(() => {
+  VAR_SYMBOL = Symbol.for("figma.variable");
+  variableRegistry = new Map;
+});
+
 // node_modules/esbuild/lib/main.js
 var require_main = __commonJS((exports, module) => {
   var __dirname = "/Users/dannote/Development/figma-use/node_modules/esbuild/lib", __filename = "/Users/dannote/Development/figma-use/node_modules/esbuild/lib/main.js";
@@ -27547,6 +27633,7 @@ function parseColor(color) {
 }
 
 // packages/cli/src/render/reconciler.ts
+init_vars();
 function styleToNodeChange(type, props, localID, sessionID, parentGUID, position, textContent) {
   const style = props.style || {};
   const name = props.name || type;
@@ -27575,22 +27662,52 @@ function styleToNodeChange(type, props, localID, sessionID, parentGUID, position
     m12: y5
   };
   if (style.backgroundColor) {
-    const color = parseColor(style.backgroundColor);
-    nodeChange.fillPaints = [{
-      type: "SOLID",
-      color: { r: color.r, g: color.g, b: color.b, a: color.a },
-      opacity: color.a,
-      visible: true
-    }];
+    const bgColor = style.backgroundColor;
+    if (isVariable(bgColor)) {
+      const resolved = resolveVariable(bgColor);
+      const fallback = bgColor.value ? parseColor(bgColor.value) : { r: 0, g: 0, b: 0, a: 1 };
+      nodeChange.fillPaints = [{
+        type: "SOLID",
+        color: { r: fallback.r, g: fallback.g, b: fallback.b, a: fallback.a },
+        opacity: 1,
+        visible: true,
+        colorVariableBinding: {
+          variableID: { sessionID: resolved.sessionID, localID: resolved.localID }
+        }
+      }];
+    } else {
+      const color = parseColor(bgColor);
+      nodeChange.fillPaints = [{
+        type: "SOLID",
+        color: { r: color.r, g: color.g, b: color.b, a: color.a },
+        opacity: color.a,
+        visible: true
+      }];
+    }
   }
   if (style.borderColor) {
-    const color = parseColor(style.borderColor);
-    nodeChange.strokePaints = [{
-      type: "SOLID",
-      color: { r: color.r, g: color.g, b: color.b, a: color.a },
-      opacity: color.a,
-      visible: true
-    }];
+    const borderColor = style.borderColor;
+    if (isVariable(borderColor)) {
+      const resolved = resolveVariable(borderColor);
+      const fallback = borderColor.value ? parseColor(borderColor.value) : { r: 0, g: 0, b: 0, a: 1 };
+      nodeChange.strokePaints = [{
+        type: "SOLID",
+        color: { r: fallback.r, g: fallback.g, b: fallback.b, a: fallback.a },
+        opacity: 1,
+        visible: true,
+        colorVariableBinding: {
+          variableID: { sessionID: resolved.sessionID, localID: resolved.localID }
+        }
+      }];
+    } else {
+      const color = parseColor(borderColor);
+      nodeChange.strokePaints = [{
+        type: "SOLID",
+        color: { r: color.r, g: color.g, b: color.b, a: color.a },
+        opacity: color.a,
+        visible: true
+      }];
+    }
     nodeChange.strokeWeight = Number(style.borderWidth ?? 1);
   }
   if (style.borderRadius !== undefined) {
@@ -27614,6 +27731,8 @@ function styleToNodeChange(type, props, localID, sessionID, parentGUID, position
   }
   if (style.flexDirection) {
     nodeChange.stackMode = style.flexDirection === "row" ? "HORIZONTAL" : "VERTICAL";
+    nodeChange.stackPrimarySizing = "RESIZE_TO_FIT";
+    nodeChange.stackCounterSizing = "RESIZE_TO_FIT";
   }
   if (style.gap !== undefined) {
     nodeChange.stackSpacing = Number(style.gap);
@@ -27667,13 +27786,28 @@ function styleToNodeChange(type, props, localID, sessionID, parentGUID, position
       nc.textAlignHorizontal = map[style.textAlign] || "LEFT";
     }
     if (style.color) {
-      const color = parseColor(style.color);
-      nodeChange.fillPaints = [{
-        type: "SOLID",
-        color: { r: color.r, g: color.g, b: color.b, a: color.a },
-        opacity: color.a,
-        visible: true
-      }];
+      const textColor = style.color;
+      if (isVariable(textColor)) {
+        const resolved = resolveVariable(textColor);
+        const fallback = textColor.value ? parseColor(textColor.value) : { r: 0, g: 0, b: 0, a: 1 };
+        nodeChange.fillPaints = [{
+          type: "SOLID",
+          color: { r: fallback.r, g: fallback.g, b: fallback.b, a: fallback.a },
+          opacity: 1,
+          visible: true,
+          colorVariableBinding: {
+            variableID: { sessionID: resolved.sessionID, localID: resolved.localID }
+          }
+        }];
+      } else {
+        const color = parseColor(textColor);
+        nodeChange.fillPaints = [{
+          type: "SOLID",
+          color: { r: color.r, g: color.g, b: color.b, a: color.a },
+          opacity: color.a,
+          visible: true
+        }];
+      }
     }
   }
   return nodeChange;
@@ -27866,6 +28000,7 @@ function renderToNodeChanges(element, options) {
   };
 }
 // packages/cli/src/render/components.tsx
+init_vars();
 var React = __toESM(require_react(), 1);
 var c6 = (type) => (props) => React.createElement(type, props);
 var Frame = c6("frame");
@@ -27921,8 +28056,27 @@ function findNodeModulesDir() {
 var JSX_DEFINE = Object.fromEntries(INTRINSIC_ELEMENTS.map((name) => [name, JSON.stringify(name.toLowerCase())]));
 function transformJsxSnippet(code) {
   const snippet = code.trim();
-  const isModule = snippet.includes("import ") || snippet.includes("export ");
-  const fullCode = isModule ? snippet : `export default (React) => () => (${snippet});`;
+  if (snippet.includes("import ") || snippet.includes("export ")) {
+    return import_esbuild.transformSync(snippet, {
+      loader: "tsx",
+      jsx: "transform",
+      jsxFactory: "React.createElement",
+      jsxFragment: "React.Fragment",
+      define: JSX_DEFINE
+    }).code;
+  }
+  const jsxStart = snippet.search(/<[A-Z]/);
+  const hasSetupCode = jsxStart > 0;
+  const usesDefineVars = snippet.includes("defineVars");
+  let fullCode;
+  if (hasSetupCode) {
+    const setupPart = snippet.slice(0, jsxStart).trim();
+    const jsxPart = snippet.slice(jsxStart);
+    const params = usesDefineVars ? "(React, { defineVars })" : "(React)";
+    fullCode = `export default ${params} => { ${setupPart}; return () => (${jsxPart}); };`;
+  } else {
+    fullCode = `export default (React) => () => (${snippet});`;
+  }
   const result = import_esbuild.transformSync(fullCode, {
     loader: "tsx",
     jsx: "transform",
@@ -27973,8 +28127,9 @@ var render_default = defineCommand({
       const module = await import(filePath);
       const exportName = args.export || "default";
       let Component2 = module[exportName];
-      if (typeof Component2 === "function" && Component2.length === 1 && args.stdin) {
-        Component2 = Component2(React2);
+      if (typeof Component2 === "function" && (Component2.length === 1 || Component2.length === 2) && args.stdin) {
+        const { defineVars: defineVars2 } = await Promise.resolve().then(() => (init_vars(), exports_vars));
+        Component2 = Component2(React2, { defineVars: defineVars2 });
       }
       if (!Component2) {
         console.error(fail(`Export "${exportName}" not found`));
@@ -28003,6 +28158,12 @@ var render_default = defineCommand({
           throw new Error(data.error);
         }
       };
+      if (!isRegistryLoaded()) {
+        try {
+          const variables = await sendCommand("get-variables", { simple: true });
+          loadVariablesIntoRegistry(variables);
+        } catch {}
+      }
       const props = args.props ? JSON.parse(args.props) : {};
       const element = React2.createElement(Component2, props);
       const result = renderToNodeChanges(element, {

package/dist/proxy/index.js

@@ -10178,6 +10178,21 @@ message PaintFilterMessage {
   float brightness = 10 [deprecated];
 }
 
+// Variable binding embedded in Paint - discovered via WS sniffing 2026-01
+// Figma wire format: 15 01 04 01 {sessionID varint} {localID varint}
+// - 15 = field 21 in Paint
+// - 01 = always 1 (binding type for color)
+// - 04 = field 4
+// - 01 = always 1 (flag)
+// - then GUID as raw sessionID + localID varints (no field numbers)
+// NOTE: kiwi-schema cannot produce this exact format, handled manually in codec
+message PaintVariableBinding {
+  uint bindingType = 1;  // Always 1 for color
+  uint flag = 2;         // Placeholder  
+  uint flag2 = 3;        // Placeholder
+  GUID variableID = 4;   // Variable GUID
+}
+
 message Paint {
   PaintType type = 1;
   Color color = 2;
@@ -10199,6 +10214,7 @@ message Paint {
   Video video = 18;
   uint originalImageWidth = 19;
   uint originalImageHeight = 20;
+  PaintVariableBinding variableBinding = 21; // Not in fig-kiwi. Discovered via WS sniffing 2026-01
 }
 
 message FontMetaData {
@@ -11320,6 +11336,8 @@ message Message {
   uint reconnectSequenceNumber = 25;
   string pasteBranchSourceFileKey = 26;
   EditorType pasteEditorType = 27;
+  // Field 38 (timestamp) exists but kiwi-schema limits field IDs to 28
+  // Discovered via WS sniffing 2026-01, skipped during manual pre-processing
 }
 
 message DiffChunk {
@@ -11540,8 +11558,11 @@ var init_schema = __esm(() => {
 var exports_codec = {};
 __export(exports_codec, {
   peekMessageType: () => peekMessageType,
+  parseVariableId: () => parseVariableId,
   isCodecReady: () => isCodecReady,
   initCodec: () => initCodec,
+  encodePaintWithVariableBinding: () => encodePaintWithVariableBinding,
+  encodeNodeChangeWithVariables: () => encodeNodeChangeWithVariables,
   encodeMessage: () => encodeMessage,
   decompress: () => decompress,
   decodeMessage: () => decodeMessage,
@@ -11569,8 +11590,36 @@ function encodeMessage(message) {
   if (!compiledSchema) {
     throw new Error("Codec not initialized. Call initCodec() first.");
   }
-  const encoded = compiledSchema.encodeMessage(message);
-  return compress(encoded);
+  const hasVariables = message.nodeChanges?.some((nc) => nc.fillPaints?.some((p4) => p4.colorVariableBinding) || nc.strokePaints?.some((p4) => p4.colorVariableBinding));
+  if (!hasVariables) {
+    const encoded = compiledSchema.encodeMessage(message);
+    return compress(encoded);
+  }
+  const messageWithoutNodes = { ...message, nodeChanges: [] };
+  const baseEncoded = compiledSchema.encodeMessage(messageWithoutNodes);
+  const baseHex = Buffer.from(baseEncoded).toString("hex");
+  const nodeChangeBytes = [];
+  for (const nc of message.nodeChanges || []) {
+    const encoded = encodeNodeChangeWithVariables(nc);
+    nodeChangeBytes.push(encoded);
+  }
+  const emptyArrayPattern = "0400";
+  const emptyArrayIdx = baseHex.indexOf(emptyArrayPattern);
+  if (emptyArrayIdx === -1) {
+    const encoded = compiledSchema.encodeMessage(message);
+    return compress(encoded);
+  }
+  const ncBytes = [4];
+  ncBytes.push(...encodeVarint(nodeChangeBytes.length));
+  for (const ncArr of nodeChangeBytes) {
+    ncBytes.push(...Array.from(ncArr));
+  }
+  const beforeArray = baseHex.slice(0, emptyArrayIdx);
+  const afterArray = baseHex.slice(emptyArrayIdx + 4);
+  const ncHex = Buffer.from(ncBytes).toString("hex");
+  const finalHex = beforeArray + ncHex + afterArray;
+  const finalBytes = new Uint8Array(finalHex.match(/.{2}/g).map((b2) => parseInt(b2, 16)));
+  return compress(finalBytes);
 }
 function decodeMessage(data) {
   if (!compiledSchema) {
@@ -11644,6 +11693,114 @@ function createNodeChange(opts) {
   }
   return change;
 }
+function encodeVarint(value) {
+  const bytes = [];
+  while (value > 127) {
+    bytes.push(value & 127 | 128);
+    value >>>= 7;
+  }
+  bytes.push(value);
+  return bytes;
+}
+function encodePaintWithVariableBinding(paint, variableSessionID, variableLocalID) {
+  if (!compiledSchema) {
+    throw new Error("Codec not initialized. Call initCodec() first.");
+  }
+  const basePaint = { ...paint };
+  delete basePaint.colorVariableBinding;
+  const baseBytes = compiledSchema.encodePaint(basePaint);
+  const baseArray = Array.from(baseBytes);
+  if (baseArray[baseArray.length - 1] === 0) {
+    baseArray.pop();
+  }
+  baseArray.push(21, 1);
+  baseArray.push(4, 1);
+  baseArray.push(...encodeVarint(variableSessionID));
+  baseArray.push(...encodeVarint(variableLocalID));
+  baseArray.push(0, 0, 2, 3, 3, 4);
+  baseArray.push(0, 0);
+  return new Uint8Array(baseArray);
+}
+function parseVariableId(variableId) {
+  const match = variableId.match(/VariableID:(\d+):(\d+)/);
+  if (!match)
+    return null;
+  return {
+    sessionID: parseInt(match[1], 10),
+    localID: parseInt(match[2], 10)
+  };
+}
+function encodeNodeChangeWithVariables(nodeChange) {
+  if (!compiledSchema) {
+    throw new Error("Codec not initialized. Call initCodec() first.");
+  }
+  const hasFillBinding = nodeChange.fillPaints?.some((p4) => p4.colorVariableBinding);
+  const hasStrokeBinding = nodeChange.strokePaints?.some((p4) => p4.colorVariableBinding);
+  if (!hasFillBinding && !hasStrokeBinding) {
+    return compiledSchema.encodeNodeChange(nodeChange);
+  }
+  const cleanNodeChange = { ...nodeChange };
+  if (cleanNodeChange.fillPaints) {
+    cleanNodeChange.fillPaints = cleanNodeChange.fillPaints.map((p4) => {
+      const clean2 = { ...p4 };
+      delete clean2.colorVariableBinding;
+      return clean2;
+    });
+  }
+  if (cleanNodeChange.strokePaints) {
+    cleanNodeChange.strokePaints = cleanNodeChange.strokePaints.map((p4) => {
+      const clean2 = { ...p4 };
+      delete clean2.colorVariableBinding;
+      return clean2;
+    });
+  }
+  const baseBytes = compiledSchema.encodeNodeChange(cleanNodeChange);
+  let hex2 = Buffer.from(baseBytes).toString("hex");
+  if (hasFillBinding && nodeChange.fillPaints?.[0]?.colorVariableBinding) {
+    hex2 = injectVariableBinding(hex2, "2601", nodeChange.fillPaints[0].colorVariableBinding);
+  }
+  if (hasStrokeBinding && nodeChange.strokePaints?.[0]?.colorVariableBinding) {
+    hex2 = injectVariableBinding(hex2, "2701", nodeChange.strokePaints[0].colorVariableBinding);
+  }
+  return new Uint8Array(hex2.match(/.{2}/g).map((b2) => parseInt(b2, 16)));
+}
+function injectVariableBinding(hex2, marker, binding) {
+  const markerIdx = hex2.indexOf(marker);
+  if (markerIdx === -1)
+    return hex2;
+  const visiblePattern = "0401";
+  let patternIdx = hex2.indexOf(visiblePattern, markerIdx);
+  if (patternIdx === -1)
+    return hex2;
+  let insertPoint = patternIdx + visiblePattern.length;
+  if (hex2.slice(insertPoint, insertPoint + 4) === "0501") {
+    insertPoint += 4;
+  }
+  const varBytes = [
+    21,
+    1,
+    4,
+    1,
+    ...encodeVarint(binding.variableID.sessionID),
+    ...encodeVarint(binding.variableID.localID),
+    0,
+    0,
+    2,
+    3,
+    3,
+    4,
+    0,
+    0
+  ];
+  const varHex = Buffer.from(varBytes).toString("hex");
+  const beforeVar = hex2.slice(0, insertPoint);
+  let afterIdx = insertPoint;
+  if (hex2.slice(afterIdx, afterIdx + 2) === "00") {
+    afterIdx += 2;
+  }
+  const afterVar = hex2.slice(afterIdx);
+  return beforeVar + varHex + afterVar;
+}
 var compiledSchema = null;
 var init_codec = __esm(() => {
   init_kiwi_esm();
@@ -26796,6 +26953,20 @@ new Elysia().ws("/plugin", {
     const { client, sessionID } = await getMultiplayerConnection(fileKey);
     consola.info(`render: ${nodeChanges.length} nodes to ${fileKey}`);
     await client.sendNodeChangesSync(nodeChanges);
+    if (sendToPlugin) {
+      const rootId = `${nodeChanges[0].guid.sessionID}:${nodeChanges[0].guid.localID}`;
+      const layoutId = crypto.randomUUID();
+      try {
+        await new Promise((resolve, reject) => {
+          const timeout = setTimeout(() => {
+            pendingRequests.delete(layoutId);
+            reject(new Error("Layout trigger timeout"));
+          }, 5000);
+          pendingRequests.set(layoutId, { resolve: () => resolve(), reject, timeout });
+          sendToPlugin(JSON.stringify({ id: layoutId, command: "trigger-layout", args: { nodeId: rootId } }));
+        });
+      } catch {}
+    }
     const ids = nodeChanges.map((nc) => ({
       id: `${nc.guid.sessionID}:${nc.guid.localID}`,
       name: nc.name

package/package.json

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

package/packages/plugin/dist/main.js

@@ -1184,10 +1184,34 @@
           const fn = new AsyncFunction("figma", wrappedCode);
           return yield fn(figma);
         }
+        // ==================== LAYOUT ====================
+        case "trigger-layout": {
+          const { nodeId } = args;
+          const root = yield figma.getNodeByIdAsync(nodeId);
+          if (!root) return null;
+          const triggerRecursive = (node) => {
+            if ("layoutMode" in node && node.layoutMode !== "NONE" && "resize" in node) {
+              const w = node.width;
+              const h = node.height;
+              node.resize(w + 0.01, h + 0.01);
+              node.resize(w, h);
+            }
+            if ("children" in node) {
+              for (const child of node.children) {
+                triggerRecursive(child);
+              }
+            }
+          };
+          triggerRecursive(root);
+          return { triggered: true };
+        }
         // ==================== VARIABLES ====================
         case "get-variables": {
-          const { type } = args;
+          const { type, simple } = args;
           const variables = yield figma.variables.getLocalVariablesAsync(type);
+          if (simple) {
+            return variables.map((v) => ({ id: v.id, name: v.name }));
+          }
           return variables.map((v) => serializeVariable(v));
         }
         case "get-variable": {
@@ -1234,6 +1258,32 @@
           }
           return serializeNode(node);
         }
+        case "bind-fill-variable": {
+          const { nodeId, variableId, paintIndex = 0 } = args;
+          const node = yield figma.getNodeByIdAsync(nodeId);
+          if (!node) throw new Error("Node not found");
+          if (!("fills" in node)) throw new Error("Node does not have fills");
+          const variable = yield figma.variables.getVariableByIdAsync(variableId);
+          if (!variable) throw new Error("Variable not found");
+          const fills = node.fills;
+          if (!fills[paintIndex]) throw new Error("Paint not found at index " + paintIndex);
+          const newFill = figma.variables.setBoundVariableForPaint(fills[paintIndex], "color", variable);
+          node.fills = [...fills.slice(0, paintIndex), newFill, ...fills.slice(paintIndex + 1)];
+          return serializeNode(node);
+        }
+        case "bind-stroke-variable": {
+          const { nodeId, variableId, paintIndex = 0 } = args;
+          const node = yield figma.getNodeByIdAsync(nodeId);
+          if (!node) throw new Error("Node not found");
+          if (!("strokes" in node)) throw new Error("Node does not have strokes");
+          const variable = yield figma.variables.getVariableByIdAsync(variableId);
+          if (!variable) throw new Error("Variable not found");
+          const strokes = node.strokes;
+          if (!strokes[paintIndex]) throw new Error("Paint not found at index " + paintIndex);
+          const newStroke = figma.variables.setBoundVariableForPaint(strokes[paintIndex], "color", variable);
+          node.strokes = [...strokes.slice(0, paintIndex), newStroke, ...strokes.slice(paintIndex + 1)];
+          return serializeNode(node);
+        }
         // ==================== VARIABLE COLLECTIONS ====================
         case "get-variable-collections": {
           const collections = yield figma.variables.getLocalVariableCollectionsAsync();