@nnao45/figma-use 0.1.4 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +9 -0
- package/SKILL.md +147 -121
- package/dist/cli/index.js +185 -176
- package/package.json +6 -2
- package/packages/cli/src/render/components.tsx +5 -0
- package/packages/cli/src/render/icon.ts +8 -9
- package/packages/plugin/src/main.ts +45 -41
- package/packages/plugin/src/rpc.ts +58 -59
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [Unreleased]
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- `create chart scatter` and `create chart bubble` commands
|
|
13
|
+
|
|
8
14
|
## [0.1.4] - 2026-02-03
|
|
9
15
|
|
|
10
16
|
### Fixed
|
package/README.md
CHANGED
|
@@ -169,6 +169,15 @@ In JSX:
|
|
|
169
169
|
|
|
170
170
|
Browse 150k+ icons: [icon-sets.iconify.design](https://icon-sets.iconify.design/)
|
|
171
171
|
|
|
172
|
+
### Charts
|
|
173
|
+
|
|
174
|
+
Create charts with d3-based commands.
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
figma-use create chart scatter --data "10:20,30:40,50:60" --x-label "X" --y-label "Y"
|
|
178
|
+
figma-use create chart bubble --data "10:20:30,40:50:20,60:30:50" --max-radius 50
|
|
179
|
+
```
|
|
180
|
+
|
|
172
181
|
### Images
|
|
173
182
|
|
|
174
183
|
Load images from URL:
|
package/SKILL.md
CHANGED
|
@@ -9,20 +9,20 @@ CLI for Figma. Two modes: commands and JSX.
|
|
|
9
9
|
|
|
10
10
|
```bash
|
|
11
11
|
# Commands
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
figma-use create frame --width 400 --height 300 --fill "#FFF" --layout VERTICAL --gap 16
|
|
13
|
+
figma-use create icon mdi:home --size 32 --color "#3B82F6"
|
|
14
|
+
figma-use set fill 1:23 "$Colors/Primary"
|
|
15
15
|
|
|
16
16
|
# JSX (props directly on elements, NOT style={{}})
|
|
17
17
|
echo '<Frame p={24} bg="#3B82F6" rounded={12}>
|
|
18
18
|
<Text size={18} color="#FFF">Hello</Text>
|
|
19
|
-
</Frame>' |
|
|
19
|
+
</Frame>' | figma-use render --stdin --x 100 --y 100
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
## Before You Start
|
|
23
23
|
|
|
24
24
|
```bash
|
|
25
|
-
|
|
25
|
+
figma-use status # Check connection
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
If not connected — start Figma with remote debugging:
|
|
@@ -45,9 +45,9 @@ Start Figma with `--remote-debugging-port=9222` and you're ready.
|
|
|
45
45
|
**Imperative** — single operations:
|
|
46
46
|
|
|
47
47
|
```bash
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
figma-use create frame --width 400 --height 300 --fill "#FFF" --radius 12
|
|
49
|
+
figma-use set fill <id> "#FF0000"
|
|
50
|
+
figma-use node move <id> --x 100 --y 200
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
**Declarative** — render JSX trees:
|
|
@@ -56,7 +56,7 @@ bun run dist/cli/index.js node move <id> --x 100 --y 200
|
|
|
56
56
|
echo '<Frame p={24} gap={16} flex="col" bg="#FFF" rounded={12}>
|
|
57
57
|
<Text size={24} weight="bold" color="#000">Title</Text>
|
|
58
58
|
<Text size={14} color="#666">Description</Text>
|
|
59
|
-
</Frame>' |
|
|
59
|
+
</Frame>' | figma-use render --stdin --x 100 --y 200
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
stdin supports both pure JSX and full module syntax with imports:
|
|
@@ -79,7 +79,7 @@ export default () => (
|
|
|
79
79
|
)
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
-
**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Star`, `Polygon`, `Vector`, `Group`, `Icon`, `Image`, `Instance`
|
|
82
|
+
**Elements:** `Frame`, `Rectangle`, `Ellipse`, `Text`, `Line`, `Arrow`, `Star`, `Polygon`, `Vector`, `Group`, `Icon`, `Image`, `Instance`
|
|
83
83
|
|
|
84
84
|
Use `<Instance>` to create component instances:
|
|
85
85
|
|
|
@@ -92,28 +92,40 @@ Use `<Instance>` to create component instances:
|
|
|
92
92
|
|
|
93
93
|
⚠️ **Always use `--x` and `--y`** to position renders. Don't stack everything at (0, 0).
|
|
94
94
|
|
|
95
|
-
##
|
|
95
|
+
## Arrows
|
|
96
96
|
|
|
97
|
-
|
|
97
|
+
Create arrows with customizable start/end caps. Use `create arrow` command (not `create line`).
|
|
98
98
|
|
|
99
99
|
```bash
|
|
100
|
-
|
|
100
|
+
# Default arrow (end cap = arrow)
|
|
101
|
+
figma-use create arrow --x 100 --y 100 --length 200 --stroke "#000"
|
|
102
|
+
|
|
103
|
+
# Both ends with different caps
|
|
104
|
+
figma-use create arrow --x 100 --y 150 --length 200 --start-cap circle --end-cap arrow --stroke "#3B82F6" --stroke-weight 3
|
|
105
|
+
|
|
106
|
+
# Double arrow
|
|
107
|
+
figma-use create arrow --x 100 --y 200 --length 200 --start-cap arrow --end-cap arrow --stroke "#EF4444"
|
|
101
108
|
```
|
|
102
109
|
|
|
110
|
+
In JSX:
|
|
111
|
+
|
|
103
112
|
```tsx
|
|
104
|
-
<
|
|
113
|
+
<Arrow x={100} y={100} w={200} stroke="#000" strokeWidth={2} />
|
|
114
|
+
<Arrow x={100} y={150} w={200} startCap="circle" endCap="triangle" stroke="#3B82F6" strokeWidth={3} />
|
|
105
115
|
```
|
|
106
116
|
|
|
107
|
-
|
|
117
|
+
**Cap values:** `none`, `round`, `square`, `arrow`, `arrow-lines`, `arrow-equilateral`, `triangle`, `diamond`, `circle`
|
|
118
|
+
|
|
119
|
+
Note: `create line` creates a pure Line node without arrow caps.
|
|
108
120
|
|
|
109
121
|
## Icons
|
|
110
122
|
|
|
111
123
|
150k+ icons from Iconify by name:
|
|
112
124
|
|
|
113
125
|
```bash
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
126
|
+
figma-use create icon mdi:home
|
|
127
|
+
figma-use create icon lucide:star --size 48 --color "#F59E0B"
|
|
128
|
+
figma-use create icon heroicons:bell-solid --component # as Figma component
|
|
117
129
|
```
|
|
118
130
|
|
|
119
131
|
In JSX:
|
|
@@ -127,9 +139,9 @@ In JSX:
|
|
|
127
139
|
Create image nodes from URL, local file, or data URI:
|
|
128
140
|
|
|
129
141
|
```bash
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
142
|
+
figma-use create image https://example.com/photo.jpg --x 100 --y 200
|
|
143
|
+
figma-use create image ./screenshot.png --name "Reference"
|
|
144
|
+
figma-use create image ./photo.jpg --width 400 --height 300 --scale fit --radius 12
|
|
133
145
|
```
|
|
134
146
|
|
|
135
147
|
Auto-detects native image dimensions. Supports `--scale` modes: `fill`, `fit`, `crop`, `tile`.
|
|
@@ -140,35 +152,49 @@ In JSX:
|
|
|
140
152
|
<Image src="https://example.com/photo.jpg" w={200} h={150} />
|
|
141
153
|
```
|
|
142
154
|
|
|
155
|
+
## Charts
|
|
156
|
+
|
|
157
|
+
Create charts with d3-based commands:
|
|
158
|
+
|
|
159
|
+
```bash
|
|
160
|
+
figma-use create chart scatter --data "10:20,30:40,50:60" --x-label "X" --y-label "Y"
|
|
161
|
+
figma-use create chart bubble --data "10:20:30,40:50:20,60:30:50" --max-radius 50
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Data formats:
|
|
165
|
+
|
|
166
|
+
- Scatter: `x:y,...` (optional `label:x:y`)
|
|
167
|
+
- Bubble: `x:y:size,...` (optional `label:x:y:size`)
|
|
168
|
+
|
|
143
169
|
## Export JSX
|
|
144
170
|
|
|
145
171
|
Convert Figma nodes back to JSX code:
|
|
146
172
|
|
|
147
173
|
```bash
|
|
148
|
-
|
|
149
|
-
|
|
174
|
+
figma-use export jsx <id> # Minified
|
|
175
|
+
figma-use export jsx <id> --pretty # Formatted
|
|
150
176
|
|
|
151
177
|
# Format options
|
|
152
|
-
|
|
178
|
+
figma-use export jsx <id> --pretty --semi --tabs
|
|
153
179
|
|
|
154
180
|
# Match vector shapes to Iconify icons (requires: npm i whaticon)
|
|
155
|
-
|
|
156
|
-
|
|
181
|
+
figma-use export jsx <id> --match-icons
|
|
182
|
+
figma-use export jsx <id> --match-icons --icon-threshold 0.85 --prefer-icons lucide,tabler
|
|
157
183
|
```
|
|
158
184
|
|
|
159
185
|
Round-trip workflow:
|
|
160
186
|
|
|
161
187
|
```bash
|
|
162
188
|
# Export → edit → re-render
|
|
163
|
-
|
|
189
|
+
figma-use export jsx <id> --pretty > component.tsx
|
|
164
190
|
# ... edit the file ...
|
|
165
|
-
|
|
191
|
+
figma-use render component.tsx --x 500 --y 0
|
|
166
192
|
```
|
|
167
193
|
|
|
168
194
|
Compare two nodes as JSX:
|
|
169
195
|
|
|
170
196
|
```bash
|
|
171
|
-
|
|
197
|
+
figma-use diff jsx <from-id> <to-id>
|
|
172
198
|
```
|
|
173
199
|
|
|
174
200
|
## Export Storybook (Experimental)
|
|
@@ -176,10 +202,10 @@ bun run dist/cli/index.js diff jsx <from-id> <to-id>
|
|
|
176
202
|
Export all components on current page as Storybook stories:
|
|
177
203
|
|
|
178
204
|
```bash
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
205
|
+
ffigma-use export storybook # Output to ./stories/
|
|
206
|
+
ffigma-use export storybook --out ./src/stories # Custom output dir
|
|
207
|
+
ffigma-use export storybook --match-icons # Match vectors to Iconify icons
|
|
208
|
+
ffigma-use export storybook --no-semantic-html # Disable semantic HTML conversion
|
|
183
209
|
```
|
|
184
210
|
|
|
185
211
|
**Semantic HTML:** By default, components are converted to semantic HTML elements based on their names:
|
|
@@ -229,8 +255,8 @@ export const Primary: StoryObj<typeof Button> = {
|
|
|
229
255
|
Reference Figma variables in any color option with `var:Name` or `$Name`:
|
|
230
256
|
|
|
231
257
|
```bash
|
|
232
|
-
|
|
233
|
-
|
|
258
|
+
figma-use create rect --width 100 --height 100 --fill 'var:Colors/Primary'
|
|
259
|
+
figma-use set fill <id> '$Brand/Accent'
|
|
234
260
|
```
|
|
235
261
|
|
|
236
262
|
In JSX:
|
|
@@ -331,8 +357,8 @@ export default () => (
|
|
|
331
357
|
```
|
|
332
358
|
|
|
333
359
|
```bash
|
|
334
|
-
|
|
335
|
-
|
|
360
|
+
figma-use render ./Card.figma.tsx --x 100 --y 200
|
|
361
|
+
figma-use render --examples # Full API reference
|
|
336
362
|
```
|
|
337
363
|
|
|
338
364
|
## Variants (ComponentSet)
|
|
@@ -367,7 +393,7 @@ Creates real ComponentSet with all combinations.
|
|
|
367
393
|
Compare frames and generate patch:
|
|
368
394
|
|
|
369
395
|
```bash
|
|
370
|
-
|
|
396
|
+
figma-use diff create --from <id1> --to <id2>
|
|
371
397
|
```
|
|
372
398
|
|
|
373
399
|
```diff
|
|
@@ -384,15 +410,15 @@ bun run dist/cli/index.js diff create --from <id1> --to <id2>
|
|
|
384
410
|
Apply with validation (supports modify, create, and delete operations):
|
|
385
411
|
|
|
386
412
|
```bash
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
413
|
+
figma-use diff apply patch.diff # Fails if old values don't match
|
|
414
|
+
figma-use diff apply patch.diff --dry-run # Preview
|
|
415
|
+
figma-use diff apply patch.diff --force # Skip validation
|
|
390
416
|
```
|
|
391
417
|
|
|
392
418
|
Visual diff (red = changed pixels):
|
|
393
419
|
|
|
394
420
|
```bash
|
|
395
|
-
|
|
421
|
+
figma-use diff visual --from <id1> --to <id2> --output diff.png
|
|
396
422
|
```
|
|
397
423
|
|
|
398
424
|
⚠️ **After initial render, use diffs or direct commands.** Don't re-render full JSX trees.
|
|
@@ -403,13 +429,13 @@ Convert a screenshot or mockup image into a Figma design:
|
|
|
403
429
|
|
|
404
430
|
```bash
|
|
405
431
|
# Place reference image and create working frame
|
|
406
|
-
|
|
432
|
+
figma-use reconstruct ./screenshot.png --name "Login Page"
|
|
407
433
|
|
|
408
434
|
# With custom position and reference opacity
|
|
409
|
-
|
|
435
|
+
figma-use reconstruct https://example.com/mockup.png --x 500 --y 0 --ref-opacity 0.2
|
|
410
436
|
|
|
411
437
|
# Include base64 image data in output (for AI vision analysis)
|
|
412
|
-
|
|
438
|
+
figma-use reconstruct ./design.png --include-data --json
|
|
413
439
|
```
|
|
414
440
|
|
|
415
441
|
**AI agent workflow:**
|
|
@@ -426,14 +452,14 @@ The command returns `workingFrameId`, dimensions, and position — everything th
|
|
|
426
452
|
Find nodes using XPath selectors:
|
|
427
453
|
|
|
428
454
|
```bash
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
455
|
+
figma-use query "//FRAME" # All frames
|
|
456
|
+
figma-use query "//FRAME[@width < 300]" # Frames narrower than 300px
|
|
457
|
+
figma-use query "//COMPONENT[starts-with(@name, 'Button')]" # Name starts with
|
|
458
|
+
figma-use query "//FRAME[contains(@name, 'Card')]" # Name contains
|
|
459
|
+
figma-use query "//SECTION/FRAME" # Direct children
|
|
460
|
+
figma-use query "//SECTION//TEXT" # All descendants
|
|
461
|
+
figma-use query "//*[@cornerRadius > 0]" # Any node with radius
|
|
462
|
+
figma-use query "//FRAME[@width > 100 and @width < 500]" # Range
|
|
437
463
|
```
|
|
438
464
|
|
|
439
465
|
Attributes: `name`, `width`, `height`, `x`, `y`, `cornerRadius`, `opacity`, `visible`, `characters`, `fontSize`, `layoutMode`, `itemSpacing`
|
|
@@ -444,43 +470,43 @@ XPath functions: `contains()`, `starts-with()`, `string-length()`, `not()`, `and
|
|
|
444
470
|
|
|
445
471
|
```bash
|
|
446
472
|
# Create
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
473
|
+
figma-use create frame --width 400 --height 300 --fill "#FFF" --layout VERTICAL --gap 16
|
|
474
|
+
figma-use create text --text "Hello" --font-size 24 --fill "#000"
|
|
475
|
+
figma-use create rect --width 100 --height 50 --fill "#F00" --radius 8
|
|
476
|
+
figma-use create image ./photo.png --x 100 --y 200
|
|
451
477
|
|
|
452
478
|
# Find
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
479
|
+
figma-use query "//FRAME[@name = 'Header']"
|
|
480
|
+
figma-use find --name "Button"
|
|
481
|
+
figma-use find --type FRAME
|
|
482
|
+
figma-use selection get
|
|
457
483
|
|
|
458
484
|
# Explore
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
485
|
+
figma-use node ancestors <id> # Get parent chain (useful for navigation)
|
|
486
|
+
figma-use node bindings <id> # Get variable bindings for fills/strokes
|
|
487
|
+
figma-use page bounds # Find free space for new objects
|
|
488
|
+
figma-use variable find "Text/Neutral" # Search variables by name
|
|
463
489
|
|
|
464
490
|
# Modify
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
491
|
+
figma-use set fill <id> "#FF0000"
|
|
492
|
+
figma-use set radius <id> 12
|
|
493
|
+
figma-use set text <id> "New text"
|
|
494
|
+
figma-use set text-resize <id> height # Wrap text (height auto, fixed width)
|
|
495
|
+
figma-use set layout <id> --mode VERTICAL --gap 12 --padding 16
|
|
496
|
+
figma-use set layout <id> --mode GRID --cols "1fr 1fr 1fr" --rows "auto" --gap 16
|
|
497
|
+
figma-use node move <id> --x 100 --y 200
|
|
498
|
+
figma-use node resize <id> --width 300 --height 200
|
|
499
|
+
figma-use node delete <id> [id2...]
|
|
500
|
+
figma-use node to-component <id>
|
|
475
501
|
|
|
476
502
|
# Export
|
|
477
|
-
|
|
478
|
-
|
|
503
|
+
figma-use export node <id> --output design.png
|
|
504
|
+
figma-use export screenshot --output viewport.png
|
|
479
505
|
|
|
480
506
|
# Navigate
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
507
|
+
figma-use page list
|
|
508
|
+
figma-use page set "Page Name"
|
|
509
|
+
figma-use viewport zoom-to-fit <id>
|
|
484
510
|
```
|
|
485
511
|
|
|
486
512
|
Full reference: [REFERENCE.md](https://github.com/dannote/figma-use/blob/master/REFERENCE.md)
|
|
@@ -491,24 +517,24 @@ Discovery tools for understanding design systems:
|
|
|
491
517
|
|
|
492
518
|
```bash
|
|
493
519
|
# Repeated patterns — potential components
|
|
494
|
-
|
|
495
|
-
|
|
520
|
+
figma-use analyze clusters
|
|
521
|
+
figma-use analyze clusters --min-count 5
|
|
496
522
|
|
|
497
523
|
# Color palette
|
|
498
|
-
|
|
499
|
-
|
|
524
|
+
figma-use analyze colors # Usage frequency
|
|
525
|
+
figma-use analyze colors --show-similar # Find similar colors to merge
|
|
500
526
|
|
|
501
527
|
# Typography
|
|
502
|
-
|
|
503
|
-
|
|
528
|
+
figma-use analyze typography # All font combinations
|
|
529
|
+
figma-use analyze typography --group-by size
|
|
504
530
|
|
|
505
531
|
# Spacing
|
|
506
|
-
|
|
532
|
+
figma-use analyze spacing --grid 8 # Check 8px grid compliance
|
|
507
533
|
|
|
508
534
|
# Accessibility snapshot — extract interactive elements
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
535
|
+
figma-use analyze snapshot # Full page
|
|
536
|
+
figma-use analyze snapshot <id> -i # Interactive only (buttons, inputs, etc.)
|
|
537
|
+
figma-use analyze snapshot --depth 6 # Limit depth
|
|
512
538
|
```
|
|
513
539
|
|
|
514
540
|
**Use cases:**
|
|
@@ -525,14 +551,14 @@ Output shows counts, examples, and warnings (e.g., off-grid spacing, hardcoded c
|
|
|
525
551
|
Check designs for consistency and accessibility issues:
|
|
526
552
|
|
|
527
553
|
```bash
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
554
|
+
figma-use lint # Recommended preset
|
|
555
|
+
figma-use lint --page "Components" # Lint specific page
|
|
556
|
+
figma-use lint --preset strict # Stricter rules
|
|
557
|
+
figma-use lint --preset accessibility # A11y only (contrast, touch targets)
|
|
558
|
+
figma-use lint --rule color-contrast # Single rule
|
|
559
|
+
figma-use lint -v # With fix suggestions
|
|
560
|
+
figma-use lint --json # For CI/CD
|
|
561
|
+
figma-use lint --list-rules # Show all rules
|
|
536
562
|
```
|
|
537
563
|
|
|
538
564
|
**Presets:** `recommended`, `strict`, `accessibility`, `design-system`
|
|
@@ -570,51 +596,51 @@ Variables: `var:Colors/Primary` or `$Colors/Primary`
|
|
|
570
596
|
### Always verify visually
|
|
571
597
|
|
|
572
598
|
```bash
|
|
573
|
-
|
|
599
|
+
figma-use export node <id> --output /tmp/check.png
|
|
574
600
|
```
|
|
575
601
|
|
|
576
602
|
### Always zoom after creating
|
|
577
603
|
|
|
578
604
|
```bash
|
|
579
|
-
|
|
605
|
+
figma-use viewport zoom-to-fit <id>
|
|
580
606
|
```
|
|
581
607
|
|
|
582
608
|
### Position multiple renders separately
|
|
583
609
|
|
|
584
610
|
```bash
|
|
585
|
-
echo '...' |
|
|
586
|
-
echo '...' |
|
|
611
|
+
echo '...' | figma-use render --stdin --x 0 --y 0
|
|
612
|
+
echo '...' | figma-use render --stdin --x 500 --y 0 # Not at same position!
|
|
587
613
|
```
|
|
588
614
|
|
|
589
615
|
### Copy between pages
|
|
590
616
|
|
|
591
617
|
```bash
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
618
|
+
figma-use node clone <id> [id2...] --json | jq -r '.[].id'
|
|
619
|
+
figma-use node set-parent <new-id> --parent <target-page-id>
|
|
620
|
+
figma-use node move <new-id> --x 50 --y 50
|
|
595
621
|
```
|
|
596
622
|
|
|
597
623
|
### Replace node
|
|
598
624
|
|
|
599
625
|
```bash
|
|
600
626
|
# Replace with component (creates instance)
|
|
601
|
-
|
|
627
|
+
figma-use node replace-with <id> --target <component-id>
|
|
602
628
|
|
|
603
629
|
# Replace with JSX from stdin
|
|
604
|
-
echo '<Icon name="lucide:x" size={16} />' |
|
|
630
|
+
echo '<Icon name="lucide:x" size={16} />' | figma-use node replace-with <id> --stdin
|
|
605
631
|
```
|
|
606
632
|
|
|
607
633
|
### Convert to component
|
|
608
634
|
|
|
609
635
|
```bash
|
|
610
|
-
|
|
611
|
-
|
|
636
|
+
figma-use node to-component <id>
|
|
637
|
+
figma-use node to-component "1:2 1:3 1:4" # Multiple
|
|
612
638
|
```
|
|
613
639
|
|
|
614
640
|
### Instance internal IDs
|
|
615
641
|
|
|
616
642
|
```bash
|
|
617
|
-
|
|
643
|
+
figma-use set text "I123:456;789:10" "New text" # I<instance>;<internal>
|
|
618
644
|
```
|
|
619
645
|
|
|
620
646
|
### Row layout needs width
|
|
@@ -630,8 +656,8 @@ bun run dist/cli/index.js set text "I123:456;789:10" "New text" # I<instance>;<
|
|
|
630
656
|
### Sections
|
|
631
657
|
|
|
632
658
|
```bash
|
|
633
|
-
|
|
634
|
-
|
|
659
|
+
figma-use create section --name "Buttons" --x 0 --y 0 --width 600 --height 200
|
|
660
|
+
figma-use node set-parent <id> --parent <section-id>
|
|
635
661
|
```
|
|
636
662
|
|
|
637
663
|
⚠️ Deleting section deletes all children!
|
|
@@ -641,7 +667,7 @@ bun run dist/cli/index.js node set-parent <id> --parent <section-id>
|
|
|
641
667
|
Wait for designer feedback and react:
|
|
642
668
|
|
|
643
669
|
```bash
|
|
644
|
-
|
|
670
|
+
figma-use comment watch --json
|
|
645
671
|
```
|
|
646
672
|
|
|
647
673
|
Output when comment arrives:
|
|
@@ -673,25 +699,25 @@ Draw, screenshot, adjust, repeat — like a designer tweaking Bezier curves:
|
|
|
673
699
|
|
|
674
700
|
```bash
|
|
675
701
|
# 1. Draw initial shape
|
|
676
|
-
|
|
702
|
+
figma-use create vector --path "M 50 0 L 100 100 L 0 100 Z" --fill "#F00"
|
|
677
703
|
|
|
678
704
|
# 2. Check result
|
|
679
|
-
|
|
705
|
+
figma-use export node <id> --output /tmp/shape.png
|
|
680
706
|
|
|
681
707
|
# 3. Adjust: scale, move, flip
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
708
|
+
figma-use path scale <id> --factor 0.8
|
|
709
|
+
figma-use path move <id> --dx 20 --dy -10
|
|
710
|
+
figma-use path flip <id> --axis x
|
|
685
711
|
|
|
686
712
|
# 4. Or replace path entirely
|
|
687
|
-
|
|
713
|
+
figma-use path set <id> "M 50 0 C 80 30 80 70 50 100 C 20 70 20 30 50 0 Z"
|
|
688
714
|
|
|
689
715
|
# 5. Screenshot again, repeat until good
|
|
690
|
-
|
|
716
|
+
figma-use export node <id> --output /tmp/shape.png
|
|
691
717
|
```
|
|
692
718
|
|
|
693
719
|
For complex illustrations, import SVG:
|
|
694
720
|
|
|
695
721
|
```bash
|
|
696
|
-
|
|
722
|
+
figma-use import --svg "$(cat icon.svg)"
|
|
697
723
|
```
|