@dannote/figma-use 0.5.9 → 0.6.1

package/CHANGELOG.md

@@ -7,6 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.6.1] - 2026-01-19
+
+### Fixed
+
+- `--timeout` now applies to single commands (e.g., `eval`) via proxy `/command`
+- CLI now works after global install ([#1](https://github.com/dannote/figma-use/issues/1))
+- Move `kiwi-schema` to devDependencies (already bundled into dist)
+
+## [0.6.0] - 2026-01-18
+
+### Added
+
+- **`node bounds`** — get node position, size, center point, edges
+- **`path` commands** — vector path manipulation:
+  - `path get <id>` — read SVG path data
+  - `path set <id> "M..."` — replace path data
+  - `path move <id> --dx --dy` — translate all points
+  - `path scale <id> --factor` — scale from center
+  - `path flip <id> --axis x|y` — mirror horizontally/vertically
+- Uses [svgpath](https://github.com/fontello/svgpath) library for path transformations
+- Path command tests
+
 ## [0.5.9] - 2026-01-18
 
 ### Changed

package/README.md

@@ -12,11 +12,24 @@ No JSON schemas, no MCP protocol overhead — just JSX that any LLM can write.
 
 📄 **Includes [SKILL.md](./SKILL.md)** — drop-in reference for Claude Code and other AI agents.
 
+## Demo
+
+<table>
+<tr>
+<td width="50%">
 <a href="https://youtu.be/9eSYVZRle7o">
-  <img src="https://img.youtube.com/vi/9eSYVZRle7o/maxresdefault.jpg" alt="Watch demo on YouTube" width="100%">
+<img src="https://img.youtube.com/vi/9eSYVZRle7o/maxresdefault.jpg" alt="Button components demo" width="100%">
 </a>
-
-**▶️ [Watch the demo](https://youtu.be/9eSYVZRle7o)** — AI builds a button component set in Figma in seconds.
+<p align="center"><b>▶️ Button components</b></p>
+</td>
+<td width="50%">
+<a href="https://youtu.be/efJWp2Drzb4">
+<img src="https://img.youtube.com/vi/efJWp2Drzb4/maxresdefault.jpg" alt="Calendar demo" width="100%">
+</a>
+<p align="center"><b>▶️ Tailwind UI calendar</b></p>
+</td>
+</tr>
+</table>
 
 ## Why CLI over MCP?
 
@@ -230,11 +243,23 @@ figma-use set effect <id> --type DROP_SHADOW --radius 10 --color "#00000040"
 figma-use node get <id>              # Get node properties
 figma-use node tree                  # Page structure as readable tree
 figma-use node children <id>         # List children
+figma-use node bounds <id>           # Position, size, center point
 figma-use find --name "Button"       # Find by name
 figma-use find --type FRAME          # Find by type
 figma-use selection get              # Current selection
 ```
 
+### Vector Paths
+
+```bash
+figma-use create vector --x 0 --y 0 --path "M 0 0 L 100 50 L 0 100 Z" --fill "#F00"
+figma-use path get <id>              # Read path data
+figma-use path set <id> "M 0 0 ..."  # Replace path
+figma-use path move <id> --dx 10 --dy -5   # Translate points
+figma-use path scale <id> --factor 1.5     # Scale from center
+figma-use path flip <id> --axis x          # Mirror horizontally
+```
+
 ### Export
 
 ```bash

package/SKILL.md

@@ -34,6 +34,61 @@ figma-use plugin install
 
 ---
 
+## ⚠️ Incremental Updates (CRITICAL)
+
+**After initial render, NEVER re-render the full JSX tree.**
+
+When modifying an existing design:
+1. Save node IDs from the initial render (`--json` output)
+2. Use targeted CLI commands to modify individual nodes
+3. Only re-render if the structure fundamentally changes (>50% new elements)
+
+### Modify properties by ID
+```bash
+figma-use set fill <id> "#FF0000"           # Change color
+figma-use set opacity <id> 0.5              # Change opacity  
+figma-use set radius <id> 12                # Change corner radius
+figma-use node resize <id> --width 300 --height 200
+figma-use node move <id> --x 100 --y 200
+figma-use node rename <id> "New Name"
+```
+
+### Add new elements to existing parent
+```bash
+figma-use create rect --parent <parent-id> --width 50 --height 50 --fill "#00F"
+figma-use create text --parent <parent-id> --text "Label" --fontSize 14
+```
+
+### Delete elements
+```bash
+figma-use node delete <id>
+```
+
+### Example: Fixing transparency issues
+```bash
+# BAD: Re-rendering 60 elements to fix one opacity
+cat <<'EOF' | figma-use render --stdin
+<Frame>... 60 elements ...</Frame>
+EOF
+
+# GOOD: Fix the specific node
+figma-use set opacity 123:456 1.0
+```
+
+### Example: Adjusting colors after critique
+```bash
+# Change shadow color from black to warm orange
+figma-use set fill 123:789 "#D97706"
+
+# Move misaligned element
+figma-use node move 123:790 --x 240 --y 100
+
+# Resize tail to better proportions  
+figma-use node resize 123:791 --width 120 --height 30
+```
+
+---
+
 ## JSX Rendering (Fastest Way)
 
 Use `render --stdin` with **pure JSX only**. No variables, no functions, no imports — just JSX tags:
@@ -315,3 +370,76 @@ figma-use set text "I123:456;789:10" "New text"  # Modify text inside instance
 figma-use find --type FRAME 2>&1 | grep "stroke: #EF4444"  # Red border
 figma-use find --type TEXT 2>&1 | grep "Bold"              # Bold text
 ```
+
+---
+
+## Vector Drawing
+
+Work iteratively: bounds → draw → screenshot → adjust → repeat.
+
+### Path Commands
+
+```bash
+figma-use node bounds <id>                    # Position, size, center
+figma-use create vector --path "M 0 0 L 100 50 Z" --fill "#F00"
+figma-use path get <id>                       # Read path data
+figma-use path set <id> "M 0 0 L 100 100 Z"   # Replace path
+figma-use path move <id> --dx 10 --dy -5      # Translate points
+figma-use path scale <id> --factor 1.5        # Scale from center
+figma-use path flip <id> --axis x             # Mirror horizontally
+figma-use path flip <id> --axis y             # Mirror vertically
+```
+
+### SVG Path Syntax
+
+```
+M x y       Move to          L x y       Line to
+H x         Horizontal to    V y         Vertical to
+C x1 y1 x2 y2 x y   Cubic Bezier    Q x1 y1 x y   Quadratic Bezier
+Z           Close path
+```
+
+### Iterative Workflow
+
+```bash
+# 1. Create canvas, get bounds
+figma-use create frame --width 300 --height 300 --fill "#F0F4FF" --name "Drawing"
+figma-use node bounds 123:456
+
+# 2. Draw shape with Bezier curves
+figma-use create vector --path "M 80 180 C 50 180 50 140 80 140 C 180 130 200 150 180 195 Z" --fill "#FFD700" --parent 123:456
+
+# 3. Screenshot to verify
+figma-use export node 123:456 --output /tmp/check.png
+
+# 4. Adjust if needed
+figma-use path scale 123:457 --factor 0.9
+figma-use path move 123:457 --dx 20 --dy 0
+
+# 5. Get bounds of first shape, position next relative to it
+figma-use node bounds 123:457
+```
+
+### Common Shapes
+
+```bash
+# Triangle
+figma-use create vector --path "M 50 0 L 100 100 L 0 100 Z" --fill "#F00"
+
+# Star
+figma-use create vector --path "M 50 0 L 61 35 L 98 35 L 68 57 L 79 91 L 50 70 L 21 91 L 32 57 L 2 35 L 39 35 Z" --fill "#FFD700"
+
+# Heart
+figma-use create vector --path "M 50 90 C 20 60 0 30 25 10 C 40 0 50 10 50 25 C 50 10 60 0 75 10 C 100 30 80 60 50 90 Z" --fill "#E11D48"
+
+# Arrow right
+figma-use create vector --path "M 0 20 L 60 20 L 60 10 L 80 25 L 60 40 L 60 30 L 0 30 Z" --fill "#000"
+```
+
+### Complex Illustrations
+
+For intricate artwork, import SVG instead:
+
+```bash
+figma-use import --svg "$(cat icon.svg)"
+```

package/bin/figma-use.js

@@ -4,10 +4,7 @@ import { fileURLToPath } from 'url'
 import { dirname, join } from 'path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
-
-// Use source files directly (Bun handles TypeScript)
-// This ensures defineComponent registry is shared with imported .figma.tsx files
-const cliPath = join(__dirname, '..', 'packages', 'cli', 'src', 'index.ts')
+const cliPath = join(__dirname, '..', 'dist', 'cli', 'index.js')
 
 const child = spawn('bun', ['run', cliPath, ...process.argv.slice(2)], { stdio: 'inherit' })
 child.on('exit', (code) => process.exit(code || 0))