@youware-labs/figma-pilot-mcp 0.1.7 → 0.1.8
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/README.md +48 -22
- package/dist/index.js +260 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -53,27 +53,27 @@ Once the MCP is configured and the Figma plugin is running, you can ask your AI
|
|
|
53
53
|
|
|
54
54
|
## Available Tools
|
|
55
55
|
|
|
56
|
+
figma-pilot uses **code execution mode** for maximum efficiency:
|
|
57
|
+
|
|
56
58
|
| Tool | Description |
|
|
57
59
|
|------|-------------|
|
|
58
60
|
| `figma_status` | Check connection to Figma plugin |
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
| `figma_ensure_accessibility` | Check/fix accessibility issues |
|
|
70
|
-
| `figma_export` | Export as PNG/SVG/PDF (use after finishing a request to review PNG) |
|
|
61
|
+
| `figma_execute` | Execute JavaScript with full Figma API access |
|
|
62
|
+
| `figma_get_api_docs` | Get detailed API documentation |
|
|
63
|
+
|
|
64
|
+
### Why Only 3 Tools?
|
|
65
|
+
|
|
66
|
+
Traditional MCP servers expose many tools, but each tool definition consumes context tokens. With code execution:
|
|
67
|
+
- **90%+ fewer tokens** in tool definitions
|
|
68
|
+
- **Batch operations** in a single call
|
|
69
|
+
- **Data filtering** before returning results
|
|
70
|
+
- **Complex logic** with loops and conditionals
|
|
71
71
|
|
|
72
72
|
## Example Usage
|
|
73
73
|
|
|
74
|
-
```
|
|
75
|
-
// Create a card with auto-layout
|
|
76
|
-
|
|
74
|
+
```javascript
|
|
75
|
+
// figma_execute: Create a card with auto-layout
|
|
76
|
+
await figma.create({
|
|
77
77
|
type: "card",
|
|
78
78
|
name: "User Card",
|
|
79
79
|
width: 320,
|
|
@@ -82,18 +82,44 @@ figma_create({
|
|
|
82
82
|
{ type: "text", content: "John Doe", fontSize: 18, fontWeight: 600 },
|
|
83
83
|
{ type: "text", content: "john@example.com", fontSize: 14, fill: "#666666" }
|
|
84
84
|
]
|
|
85
|
-
})
|
|
85
|
+
});
|
|
86
86
|
|
|
87
|
-
//
|
|
88
|
-
|
|
87
|
+
// figma_execute: Batch modify all selected rectangles
|
|
88
|
+
const { nodes } = await figma.query({ target: "selection" });
|
|
89
|
+
for (const node of nodes.filter(n => n.type === "RECTANGLE")) {
|
|
90
|
+
await figma.modify({ target: node.id, fill: "#0066FF", cornerRadius: 8 });
|
|
91
|
+
}
|
|
89
92
|
|
|
90
|
-
// Check accessibility
|
|
91
|
-
|
|
93
|
+
// figma_execute: Check and fix accessibility
|
|
94
|
+
const result = await figma.accessibility({ target: "page", level: "AA", autoFix: true });
|
|
95
|
+
console.log(`Fixed ${result.fixedCount} issues`);
|
|
92
96
|
|
|
93
|
-
//
|
|
94
|
-
|
|
97
|
+
// figma_execute: Export for review
|
|
98
|
+
await figma.export({ target: "selection", format: "png", scale: 2 });
|
|
95
99
|
```
|
|
96
100
|
|
|
101
|
+
## Available APIs
|
|
102
|
+
|
|
103
|
+
All operations are available on the `figma` object inside `figma_execute`:
|
|
104
|
+
|
|
105
|
+
- `figma.status()` - Check connection
|
|
106
|
+
- `figma.query({ target })` - Query elements
|
|
107
|
+
- `figma.create({ type, ... })` - Create elements
|
|
108
|
+
- `figma.modify({ target, ... })` - Modify elements
|
|
109
|
+
- `figma.delete({ target })` - Delete elements
|
|
110
|
+
- `figma.append({ target, parent })` - Move into container
|
|
111
|
+
- `figma.listComponents({ filter? })` - List components
|
|
112
|
+
- `figma.instantiate({ component })` - Create instance
|
|
113
|
+
- `figma.toComponent({ target })` - Convert to component
|
|
114
|
+
- `figma.createVariants({ ... })` - Create variants
|
|
115
|
+
- `figma.accessibility({ target })` - WCAG checking
|
|
116
|
+
- `figma.createToken({ ... })` - Create design token
|
|
117
|
+
- `figma.bindToken({ ... })` - Bind token
|
|
118
|
+
- `figma.syncTokens({ ... })` - Import/export tokens
|
|
119
|
+
- `figma.export({ target, format })` - Export image
|
|
120
|
+
|
|
121
|
+
Use `figma_get_api_docs` to get detailed parameter documentation.
|
|
122
|
+
|
|
97
123
|
## How It Works
|
|
98
124
|
|
|
99
125
|
```
|