@dannote/figma-use 0.3.0 → 0.5.0
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 +100 -0
- package/README.md +217 -334
- package/SKILL.md +78 -1
- package/bin/figma-use.js +4 -1
- package/dist/cli/index.js +563 -83
- package/dist/proxy/index.js +180 -2
- package/package.json +1 -1
- package/packages/plugin/dist/main.js +93 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,106 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.5.0] - 2026-01-18
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- **`render --examples`** — full API reference for JSX rendering
|
|
15
|
+
- Main CLI help now mentions JSX rendering and points to `render --examples`
|
|
16
|
+
- **`defineComponent` for reusable components**
|
|
17
|
+
```tsx
|
|
18
|
+
const Button = defineComponent('Button',
|
|
19
|
+
<Frame style={{ padding: 12, backgroundColor: '#3B82F6' }}>
|
|
20
|
+
<Text style={{ color: '#FFF' }}>Click me</Text>
|
|
21
|
+
</Frame>
|
|
22
|
+
)
|
|
23
|
+
// First usage creates Component, subsequent create Instances
|
|
24
|
+
<Button />
|
|
25
|
+
<Button />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
- **`defineComponentSet` for component variants**
|
|
29
|
+
```tsx
|
|
30
|
+
const Button = defineComponentSet('Button', {
|
|
31
|
+
variant: ['Primary', 'Secondary'] as const,
|
|
32
|
+
size: ['Small', 'Large'] as const,
|
|
33
|
+
}, ({ variant, size }) => (
|
|
34
|
+
<Frame style={{
|
|
35
|
+
padding: size === 'Large' ? 16 : 8,
|
|
36
|
+
backgroundColor: variant === 'Primary' ? '#3B82F6' : '#E5E7EB'
|
|
37
|
+
}}>
|
|
38
|
+
<Text>{variant} {size}</Text>
|
|
39
|
+
</Frame>
|
|
40
|
+
))
|
|
41
|
+
// Creates ComponentSet with all variant combinations
|
|
42
|
+
<Button variant="Primary" size="Large" />
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
- Proper auto-sizing support (`hug contents`) for frames with `flexDirection`
|
|
46
|
+
- ComponentSet creates real Figma ComponentSet with `isStateGroup=true`
|
|
47
|
+
|
|
48
|
+
### Fixed
|
|
49
|
+
|
|
50
|
+
- Auto-layout sizing mode now correctly set to FIXED when explicit dimensions provided
|
|
51
|
+
- TEXT nodes render with correct height (lineHeight encoding fix)
|
|
52
|
+
- Alignment fields use correct names (stackPrimaryAlignItems, not stackJustify)
|
|
53
|
+
|
|
54
|
+
### Technical Notes
|
|
55
|
+
|
|
56
|
+
ComponentSet instances are created via Plugin API instead of multiplayer because
|
|
57
|
+
Figma reassigns GUIDs on receive, breaking symbolData.symbolID references within
|
|
58
|
+
the same batch. See `component-set.tsx` for detailed explanation.
|
|
59
|
+
|
|
60
|
+
## [0.4.0] - 2026-01-18
|
|
61
|
+
|
|
62
|
+
### Added
|
|
63
|
+
|
|
64
|
+
- **`defineVars` API for Figma variables** — bind colors to variables by name
|
|
65
|
+
```tsx
|
|
66
|
+
const colors = defineVars({
|
|
67
|
+
primary: { name: 'Colors/Gray/50', value: '#F8FAFC' },
|
|
68
|
+
accent: { name: 'Colors/Blue/500', value: '#3B82F6' },
|
|
69
|
+
})
|
|
70
|
+
<Frame style={{ backgroundColor: colors.primary }} />
|
|
71
|
+
```
|
|
72
|
+
- Variable binding for `backgroundColor`, `borderColor`, and text `color`
|
|
73
|
+
- Variables resolved by name at render time (no more magic IDs)
|
|
74
|
+
- `defineVars` support in stdin snippets
|
|
75
|
+
- Explicit fallback values in `defineVars` for proper color display
|
|
76
|
+
|
|
77
|
+
### Fixed
|
|
78
|
+
|
|
79
|
+
- Auto-layout now works correctly via `trigger-layout` post-render
|
|
80
|
+
- Nested auto-layout frames trigger recursively
|
|
81
|
+
- Variable binding encoding matches Figma's exact wire format
|
|
82
|
+
|
|
83
|
+
### Changed
|
|
84
|
+
|
|
85
|
+
- Marked React render and variable bindings as **experimental** in docs
|
|
86
|
+
|
|
87
|
+
## [0.3.1] - 2026-01-18
|
|
88
|
+
|
|
89
|
+
### Added
|
|
90
|
+
|
|
91
|
+
- **Variable binding via multiplayer protocol** — bind fill colors to Figma variables without plugin API
|
|
92
|
+
- `encodePaintWithVariableBinding()` — encode Paint with color variable binding
|
|
93
|
+
- `encodeNodeChangeWithVariables()` — encode NodeChange with variable-bound paints
|
|
94
|
+
- `parseVariableId()` — parse "VariableID:sessionID:localID" strings
|
|
95
|
+
- New exports: `VariableBinding`, `encodePaintWithVariableBinding`, `encodeNodeChangeWithVariables`, `parseVariableId`
|
|
96
|
+
- `bind-fill-variable` plugin command — bind fill color to variable
|
|
97
|
+
- `bind-stroke-variable` plugin command — bind stroke color to variable
|
|
98
|
+
|
|
99
|
+
### Fixed
|
|
100
|
+
|
|
101
|
+
- Message field mapping: nodeChanges is field 4, reconnectSequenceNumber is field 25
|
|
102
|
+
- Paint variable binding format now matches Figma's exact wire format
|
|
103
|
+
|
|
104
|
+
### Technical
|
|
105
|
+
|
|
106
|
+
- Discovered Figma's variable binding wire format via WebSocket traffic analysis
|
|
107
|
+
- Created capture/diff tools for binary protocol analysis (`scripts/capture.ts`, `scripts/diff-hex.ts`)
|
|
108
|
+
- 142 tests passing
|
|
109
|
+
|
|
10
110
|
## [0.3.0] - 2025-01-17
|
|
11
111
|
|
|
12
112
|
### Added
|