@dannote/figma-use 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.5.3] - 2026-01-18
+
+### Added
+
+- **`set font-range`** — style text ranges (bold, color, size for specific characters)
+  ```bash
+  figma-use set font-range <id> --start 0 --end 5 --style Bold --color "#FF0000"
+  ```
+- **`node to-component`** — convert frames to components
+  ```bash
+  figma-use node to-component <id>
+  figma-use node to-component "1:2 1:3 1:4"  # Multiple
+  ```
+- SKILL.md: added SVG import, font-range, grouping and auto-layout examples
+
 ## [0.5.2] - 2026-01-18
 
 ### Fixed

package/SKILL.md

@@ -36,7 +36,7 @@ figma-use plugin
 
 ## JSX Rendering (Fastest Way)
 
-For complex layouts, use `render --stdin` with pure JSX. No imports needed — elements are built-in:
+Use `render --stdin` with **pure JSX only**. No variables, no functions, no imports — just JSX tags:
 
 ```bash
 echo '<Frame style={{padding: 24, gap: 16, flexDirection: "column", backgroundColor: "#FFF", borderRadius: 12}}>
@@ -45,14 +45,18 @@ echo '<Frame style={{padding: 24, gap: 16, flexDirection: "column", backgroundCo
 </Frame>' | figma-use render --stdin
 ```
 
+⚠️ **stdin does NOT support:** `const`, `let`, `function`, `defineComponent`, `defineComponentSet`, ternary operators, or any JavaScript logic. Only literal JSX.
+
 **Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`
 
 **Style props:** `width`, `height`, `x`, `y`, `padding`, `paddingTop/Right/Bottom/Left`, `gap`, `flexDirection` (row|column), `justifyContent`, `alignItems`, `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`, `opacity`, `fontSize`, `fontFamily`, `fontWeight`, `color`, `textAlign`
 
 ### Buttons Example (3 sizes)
 
+Since stdin doesn't support variables, write out each variant explicitly:
+
 ```bash
-echo '<Frame style={{gap: 16, flexDirection: "row", padding: 24}}>
+echo '<Frame name="Buttons" style={{gap: 16, flexDirection: "row", padding: 24}}>
   <Frame name="Small" style={{paddingLeft: 12, paddingRight: 12, paddingTop: 6, paddingBottom: 6, backgroundColor: "#3B82F6", borderRadius: 6, flexDirection: "row", justifyContent: "center", alignItems: "center"}}>
     <Text style={{fontSize: 12, color: "#FFF"}}>Button</Text>
   </Frame>
@@ -65,9 +69,25 @@ echo '<Frame style={{gap: 16, flexDirection: "row", padding: 24}}>
 </Frame>' | figma-use render --stdin
 ```
 
-### Advanced: Components & Variants
+### Converting Frames to Components
+
+```bash
+figma-use node to-component <id>           # Single frame
+figma-use node to-component "1:2 1:3 1:4"  # Multiple frames
+```
+
+### Grouping and Auto-Layout
+
+```bash
+figma-use group create "1:2 1:3"           # Group nodes (auto-converts to frame)
+figma-use set layout <id> --mode HORIZONTAL --gap 8 --padding 16
+```
+
+Note: Groups auto-convert to frames after sync, so `set layout` works immediately.
+
+### Advanced: ComponentSets with Variants (via files)
 
-For `defineComponent`, `defineComponentSet`, `defineVars` — use files with imports:
+For proper Figma ComponentSets with variant properties, create a `.figma.tsx` file:
 
 ```bash
 figma-use render --examples  # Full API reference
@@ -109,12 +129,20 @@ figma-use set radius <id> 12
 figma-use set opacity <id> 0.5
 figma-use set text <id> "New text"
 figma-use set font <id> --family "Inter" --style "Bold" --size 20
+figma-use set font-range <id> --start 0 --end 5 --style Bold --color "#FF0000"
 figma-use set layout <id> --mode VERTICAL --gap 12 --padding 16
 figma-use node move <id> --x 100 --y 200
 figma-use node resize <id> --width 300 --height 200
 figma-use node delete <id>
 ```
 
+### Import
+
+```bash
+figma-use import --svg '<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>'
+figma-use import --svg "$(cat icon.svg)" --x 100 --y 200
+```
+
 ### Export
 
 ```bash
@@ -129,6 +157,13 @@ figma-use export selection --output selection.png
 figma-use page list
 figma-use page set "Page Name"
 figma-use viewport zoom-to-fit <ids...>
+figma-use viewport get
+figma-use viewport set --x 100 --y 200 --zoom 1.5
+```
+
+**Always zoom after creating elements** — otherwise the user won't see what you made:
+```bash
+figma-use viewport zoom-to-fit <created-node-id>
 ```
 
 ### Variables & Styles

package/dist/cli/index.js

@@ -28886,6 +28886,44 @@ var set_parent_default = defineCommand({
   }
 });
 
+// packages/cli/src/commands/node/to-component.ts
+init_format();
+var to_component_default = defineCommand({
+  meta: { description: "Convert frame(s) to component(s)" },
+  args: {
+    ids: { type: "positional", description: "Node IDs to convert", required: true },
+    json: { type: "boolean", description: "Output as JSON" }
+  },
+  async run({ args }) {
+    try {
+      const ids = args.ids.split(/[\s,]+/).filter(Boolean);
+      const result = await sendCommand("eval", {
+        code: `
+          const ids = ${JSON.stringify(ids)}
+          const result = []
+          for (const id of ids) {
+            const node = await figma.getNodeByIdAsync(id)
+            if (node && 'createComponentFromNode' in figma) {
+              const comp = figma.createComponentFromNode(node)
+              result.push({ id: comp.id, name: comp.name })
+            }
+          }
+          return result
+        `
+      });
+      if (args.json) {
+        console.log(JSON.stringify(result, null, 2));
+      } else {
+        for (const comp of result) {
+          console.log(ok(`Converted to component "${comp.name}" (${comp.id})`));
+        }
+      }
+    } catch (error) {
+      handleError(error, args.json);
+    }
+  }
+});
+
 // packages/cli/src/commands/node/index.ts
 var node_default = defineCommand({
   meta: { description: "Node operations" },
@@ -28898,7 +28936,8 @@ var node_default = defineCommand({
     rename: rename_default,
     move: move_default,
     resize: resize_default,
-    "set-parent": set_parent_default
+    "set-parent": set_parent_default,
+    "to-component": to_component_default
   }
 });
 // packages/cli/src/commands/create/rect.ts
@@ -29565,6 +29604,38 @@ var font_default = defineCommand({
   }
 });
 
+// packages/cli/src/commands/set/font-range.ts
+init_output();
+var font_range_default = defineCommand({
+  meta: { description: "Set font properties for a text range" },
+  args: {
+    id: { type: "positional", description: "Text node ID", required: true },
+    start: { type: "string", required: true, description: "Start index (0-based)" },
+    end: { type: "string", required: true, description: "End index (exclusive)" },
+    family: { type: "string", description: "Font family" },
+    style: { type: "string", description: "Font style (Regular, Bold, Italic, etc)" },
+    size: { type: "string", description: "Font size" },
+    color: { type: "string", description: "Text color (hex)" },
+    json: { type: "boolean", description: "Output as JSON" }
+  },
+  async run({ args }) {
+    try {
+      const result = await sendCommand("set-font-range", {
+        id: args.id,
+        start: parseInt(args.start),
+        end: parseInt(args.end),
+        family: args.family,
+        style: args.style,
+        size: args.size ? parseFloat(args.size) : undefined,
+        color: args.color
+      });
+      printResult(result, args.json);
+    } catch (error) {
+      handleError(error, args.json);
+    }
+  }
+});
+
 // packages/cli/src/commands/set/effect.ts
 var effect_default = defineCommand({
   meta: { description: "Set effect (shadow, blur)" },
@@ -29781,6 +29852,7 @@ var set_default = defineCommand({
     locked: locked_default,
     text: text_default2,
     font: font_default,
+    "font-range": font_range_default,
     effect: effect_default,
     layout: layout_default,
     constraints: constraints_default,

package/package.json

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

package/packages/plugin/dist/main.js

@@ -766,6 +766,26 @@
           if (fontSize !== void 0) node.fontSize = fontSize;
           return serializeNode(node);
         }
+        case "set-font-range": {
+          const { id, start, end, family, style, size, color } = args;
+          const node = yield figma.getNodeByIdAsync(id);
+          if (!node || node.type !== "TEXT") throw new Error("Text node not found");
+          if (family || style) {
+            const currentFont = node.getRangeFontName(start, end);
+            const newFamily = family || currentFont.family;
+            const newStyle = style || currentFont.style;
+            yield loadFont(newFamily, newStyle);
+            node.setRangeFontName(start, end, { family: newFamily, style: newStyle });
+          }
+          if (size !== void 0) {
+            node.setRangeFontSize(start, end, size);
+          }
+          if (color) {
+            const rgb = hexToRgb(color);
+            node.setRangeFills(start, end, [{ type: "SOLID", color: rgb }]);
+          }
+          return serializeNode(node);
+        }
         case "get-children": {
           const { id, depth } = args;
           const node = yield figma.getNodeByIdAsync(id);