@biolab/talk-to-figma 0.3.3
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/LICENSE +21 -0
- package/README.md +263 -0
- package/dist/server.cjs +2620 -0
- package/dist/server.cjs.map +1 -0
- package/dist/server.d.cts +1 -0
- package/dist/server.d.ts +1 -0
- package/dist/server.js +2598 -0
- package/dist/server.js.map +1 -0
- package/package.json +40 -0
package/dist/server.js
ADDED
|
@@ -0,0 +1,2598 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
// src/talk_to_figma_mcp/server.ts
|
|
4
|
+
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
5
|
+
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
|
|
6
|
+
import { z } from "zod";
|
|
7
|
+
import WebSocket from "ws";
|
|
8
|
+
import { v4 as uuidv4 } from "uuid";
|
|
9
|
+
var logger = {
|
|
10
|
+
info: (message) => process.stderr.write(`[INFO] ${message}
|
|
11
|
+
`),
|
|
12
|
+
debug: (message) => process.stderr.write(`[DEBUG] ${message}
|
|
13
|
+
`),
|
|
14
|
+
warn: (message) => process.stderr.write(`[WARN] ${message}
|
|
15
|
+
`),
|
|
16
|
+
error: (message) => process.stderr.write(`[ERROR] ${message}
|
|
17
|
+
`),
|
|
18
|
+
log: (message) => process.stderr.write(`[LOG] ${message}
|
|
19
|
+
`)
|
|
20
|
+
};
|
|
21
|
+
var ws = null;
|
|
22
|
+
var pendingRequests = /* @__PURE__ */ new Map();
|
|
23
|
+
var currentChannel = null;
|
|
24
|
+
var server = new McpServer({
|
|
25
|
+
name: "TalkToFigmaMCP",
|
|
26
|
+
version: "1.0.0"
|
|
27
|
+
});
|
|
28
|
+
var args = process.argv.slice(2);
|
|
29
|
+
var serverArg = args.find((arg) => arg.startsWith("--server="));
|
|
30
|
+
var serverUrl = serverArg ? serverArg.split("=")[1] : "localhost";
|
|
31
|
+
var WS_URL = serverUrl === "localhost" ? `ws://${serverUrl}` : `wss://${serverUrl}`;
|
|
32
|
+
server.tool(
|
|
33
|
+
"get_document_info",
|
|
34
|
+
"Get detailed information about the current Figma document",
|
|
35
|
+
{},
|
|
36
|
+
async () => {
|
|
37
|
+
try {
|
|
38
|
+
const result = await sendCommandToFigma("get_document_info");
|
|
39
|
+
return {
|
|
40
|
+
content: [
|
|
41
|
+
{
|
|
42
|
+
type: "text",
|
|
43
|
+
text: JSON.stringify(result)
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
};
|
|
47
|
+
} catch (error) {
|
|
48
|
+
return {
|
|
49
|
+
content: [
|
|
50
|
+
{
|
|
51
|
+
type: "text",
|
|
52
|
+
text: `Error getting document info: ${error instanceof Error ? error.message : String(error)}`
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
server.tool(
|
|
60
|
+
"get_selection",
|
|
61
|
+
"Get information about the current selection in Figma",
|
|
62
|
+
{},
|
|
63
|
+
async () => {
|
|
64
|
+
try {
|
|
65
|
+
const result = await sendCommandToFigma("get_selection");
|
|
66
|
+
return {
|
|
67
|
+
content: [
|
|
68
|
+
{
|
|
69
|
+
type: "text",
|
|
70
|
+
text: JSON.stringify(result)
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
};
|
|
74
|
+
} catch (error) {
|
|
75
|
+
return {
|
|
76
|
+
content: [
|
|
77
|
+
{
|
|
78
|
+
type: "text",
|
|
79
|
+
text: `Error getting selection: ${error instanceof Error ? error.message : String(error)}`
|
|
80
|
+
}
|
|
81
|
+
]
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
server.tool(
|
|
87
|
+
"read_my_design",
|
|
88
|
+
"Get detailed information about the current selection in Figma, including all node details",
|
|
89
|
+
{},
|
|
90
|
+
async () => {
|
|
91
|
+
try {
|
|
92
|
+
const result = await sendCommandToFigma("read_my_design", {});
|
|
93
|
+
return {
|
|
94
|
+
content: [
|
|
95
|
+
{
|
|
96
|
+
type: "text",
|
|
97
|
+
text: JSON.stringify(result)
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
};
|
|
101
|
+
} catch (error) {
|
|
102
|
+
return {
|
|
103
|
+
content: [
|
|
104
|
+
{
|
|
105
|
+
type: "text",
|
|
106
|
+
text: `Error getting node info: ${error instanceof Error ? error.message : String(error)}`
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
server.tool(
|
|
114
|
+
"get_node_info",
|
|
115
|
+
"Get detailed information about a specific node in Figma",
|
|
116
|
+
{
|
|
117
|
+
nodeId: z.string().describe("The ID of the node to get information about")
|
|
118
|
+
},
|
|
119
|
+
async ({ nodeId }) => {
|
|
120
|
+
try {
|
|
121
|
+
const result = await sendCommandToFigma("get_node_info", { nodeId });
|
|
122
|
+
return {
|
|
123
|
+
content: [
|
|
124
|
+
{
|
|
125
|
+
type: "text",
|
|
126
|
+
text: JSON.stringify(filterFigmaNode(result))
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
};
|
|
130
|
+
} catch (error) {
|
|
131
|
+
return {
|
|
132
|
+
content: [
|
|
133
|
+
{
|
|
134
|
+
type: "text",
|
|
135
|
+
text: `Error getting node info: ${error instanceof Error ? error.message : String(error)}`
|
|
136
|
+
}
|
|
137
|
+
]
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
);
|
|
142
|
+
function rgbaToHex(color) {
|
|
143
|
+
if (color.startsWith("#")) {
|
|
144
|
+
return color;
|
|
145
|
+
}
|
|
146
|
+
const r = Math.round(color.r * 255);
|
|
147
|
+
const g = Math.round(color.g * 255);
|
|
148
|
+
const b = Math.round(color.b * 255);
|
|
149
|
+
const a = Math.round(color.a * 255);
|
|
150
|
+
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}${a === 255 ? "" : a.toString(16).padStart(2, "0")}`;
|
|
151
|
+
}
|
|
152
|
+
function filterFigmaNode(node) {
|
|
153
|
+
if (node.type === "VECTOR") {
|
|
154
|
+
return null;
|
|
155
|
+
}
|
|
156
|
+
const filtered = {
|
|
157
|
+
id: node.id,
|
|
158
|
+
name: node.name,
|
|
159
|
+
type: node.type
|
|
160
|
+
};
|
|
161
|
+
if (node.fills && node.fills.length > 0) {
|
|
162
|
+
filtered.fills = node.fills.map((fill) => {
|
|
163
|
+
const processedFill = { ...fill };
|
|
164
|
+
delete processedFill.imageRef;
|
|
165
|
+
if (processedFill.gradientStops) {
|
|
166
|
+
processedFill.gradientStops = processedFill.gradientStops.map((stop) => {
|
|
167
|
+
const processedStop = { ...stop };
|
|
168
|
+
if (processedStop.color) {
|
|
169
|
+
processedStop.color = rgbaToHex(processedStop.color);
|
|
170
|
+
}
|
|
171
|
+
return processedStop;
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
if (processedFill.color) {
|
|
175
|
+
processedFill.color = rgbaToHex(processedFill.color);
|
|
176
|
+
}
|
|
177
|
+
return processedFill;
|
|
178
|
+
});
|
|
179
|
+
}
|
|
180
|
+
if (node.strokes && node.strokes.length > 0) {
|
|
181
|
+
filtered.strokes = node.strokes.map((stroke) => {
|
|
182
|
+
const processedStroke = { ...stroke };
|
|
183
|
+
if (processedStroke.color) {
|
|
184
|
+
processedStroke.color = rgbaToHex(processedStroke.color);
|
|
185
|
+
}
|
|
186
|
+
return processedStroke;
|
|
187
|
+
});
|
|
188
|
+
}
|
|
189
|
+
if (node.cornerRadius !== void 0) {
|
|
190
|
+
filtered.cornerRadius = node.cornerRadius;
|
|
191
|
+
}
|
|
192
|
+
if (node.absoluteBoundingBox) {
|
|
193
|
+
filtered.absoluteBoundingBox = node.absoluteBoundingBox;
|
|
194
|
+
}
|
|
195
|
+
if (node.characters) {
|
|
196
|
+
filtered.characters = node.characters;
|
|
197
|
+
}
|
|
198
|
+
if (node.style) {
|
|
199
|
+
filtered.style = {
|
|
200
|
+
fontFamily: node.style.fontFamily,
|
|
201
|
+
fontStyle: node.style.fontStyle,
|
|
202
|
+
fontWeight: node.style.fontWeight,
|
|
203
|
+
fontSize: node.style.fontSize,
|
|
204
|
+
textAlignHorizontal: node.style.textAlignHorizontal,
|
|
205
|
+
letterSpacing: node.style.letterSpacing,
|
|
206
|
+
lineHeightPx: node.style.lineHeightPx
|
|
207
|
+
};
|
|
208
|
+
}
|
|
209
|
+
if (node.children) {
|
|
210
|
+
filtered.children = node.children.map((child) => filterFigmaNode(child)).filter((child) => child !== null);
|
|
211
|
+
}
|
|
212
|
+
return filtered;
|
|
213
|
+
}
|
|
214
|
+
server.tool(
|
|
215
|
+
"get_nodes_info",
|
|
216
|
+
"Get detailed information about multiple nodes in Figma",
|
|
217
|
+
{
|
|
218
|
+
nodeIds: z.array(z.string()).describe("Array of node IDs to get information about")
|
|
219
|
+
},
|
|
220
|
+
async ({ nodeIds }) => {
|
|
221
|
+
try {
|
|
222
|
+
const results = await Promise.all(
|
|
223
|
+
nodeIds.map(async (nodeId) => {
|
|
224
|
+
const result = await sendCommandToFigma("get_node_info", { nodeId });
|
|
225
|
+
return { nodeId, info: result };
|
|
226
|
+
})
|
|
227
|
+
);
|
|
228
|
+
return {
|
|
229
|
+
content: [
|
|
230
|
+
{
|
|
231
|
+
type: "text",
|
|
232
|
+
text: JSON.stringify(results.map((result) => filterFigmaNode(result.info)))
|
|
233
|
+
}
|
|
234
|
+
]
|
|
235
|
+
};
|
|
236
|
+
} catch (error) {
|
|
237
|
+
return {
|
|
238
|
+
content: [
|
|
239
|
+
{
|
|
240
|
+
type: "text",
|
|
241
|
+
text: `Error getting nodes info: ${error instanceof Error ? error.message : String(error)}`
|
|
242
|
+
}
|
|
243
|
+
]
|
|
244
|
+
};
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
);
|
|
248
|
+
server.tool(
|
|
249
|
+
"create_rectangle",
|
|
250
|
+
"Create a new rectangle in Figma",
|
|
251
|
+
{
|
|
252
|
+
x: z.number().describe("X position"),
|
|
253
|
+
y: z.number().describe("Y position"),
|
|
254
|
+
width: z.number().describe("Width of the rectangle"),
|
|
255
|
+
height: z.number().describe("Height of the rectangle"),
|
|
256
|
+
name: z.string().optional().describe("Optional name for the rectangle"),
|
|
257
|
+
parentId: z.string().optional().describe("Optional parent node ID to append the rectangle to")
|
|
258
|
+
},
|
|
259
|
+
async ({ x, y, width, height, name, parentId }) => {
|
|
260
|
+
try {
|
|
261
|
+
const result = await sendCommandToFigma("create_rectangle", {
|
|
262
|
+
x,
|
|
263
|
+
y,
|
|
264
|
+
width,
|
|
265
|
+
height,
|
|
266
|
+
name: name || "Rectangle",
|
|
267
|
+
parentId
|
|
268
|
+
});
|
|
269
|
+
return {
|
|
270
|
+
content: [
|
|
271
|
+
{
|
|
272
|
+
type: "text",
|
|
273
|
+
text: `Created rectangle "${JSON.stringify(result)}"`
|
|
274
|
+
}
|
|
275
|
+
]
|
|
276
|
+
};
|
|
277
|
+
} catch (error) {
|
|
278
|
+
return {
|
|
279
|
+
content: [
|
|
280
|
+
{
|
|
281
|
+
type: "text",
|
|
282
|
+
text: `Error creating rectangle: ${error instanceof Error ? error.message : String(error)}`
|
|
283
|
+
}
|
|
284
|
+
]
|
|
285
|
+
};
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
);
|
|
289
|
+
server.tool(
|
|
290
|
+
"create_frame",
|
|
291
|
+
"Create a new frame in Figma",
|
|
292
|
+
{
|
|
293
|
+
x: z.number().describe("X position"),
|
|
294
|
+
y: z.number().describe("Y position"),
|
|
295
|
+
width: z.number().describe("Width of the frame"),
|
|
296
|
+
height: z.number().describe("Height of the frame"),
|
|
297
|
+
name: z.string().optional().describe("Optional name for the frame"),
|
|
298
|
+
parentId: z.string().optional().describe("Optional parent node ID to append the frame to"),
|
|
299
|
+
fillColor: z.object({
|
|
300
|
+
r: z.number().min(0).max(1).describe("Red component (0-1)"),
|
|
301
|
+
g: z.number().min(0).max(1).describe("Green component (0-1)"),
|
|
302
|
+
b: z.number().min(0).max(1).describe("Blue component (0-1)"),
|
|
303
|
+
a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)")
|
|
304
|
+
}).optional().describe("Fill color in RGBA format"),
|
|
305
|
+
strokeColor: z.object({
|
|
306
|
+
r: z.number().min(0).max(1).describe("Red component (0-1)"),
|
|
307
|
+
g: z.number().min(0).max(1).describe("Green component (0-1)"),
|
|
308
|
+
b: z.number().min(0).max(1).describe("Blue component (0-1)"),
|
|
309
|
+
a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)")
|
|
310
|
+
}).optional().describe("Stroke color in RGBA format"),
|
|
311
|
+
strokeWeight: z.number().positive().optional().describe("Stroke weight"),
|
|
312
|
+
layoutMode: z.enum(["NONE", "HORIZONTAL", "VERTICAL"]).optional().describe("Auto-layout mode for the frame"),
|
|
313
|
+
layoutWrap: z.enum(["NO_WRAP", "WRAP"]).optional().describe("Whether the auto-layout frame wraps its children"),
|
|
314
|
+
paddingTop: z.number().optional().describe("Top padding for auto-layout frame"),
|
|
315
|
+
paddingRight: z.number().optional().describe("Right padding for auto-layout frame"),
|
|
316
|
+
paddingBottom: z.number().optional().describe("Bottom padding for auto-layout frame"),
|
|
317
|
+
paddingLeft: z.number().optional().describe("Left padding for auto-layout frame"),
|
|
318
|
+
primaryAxisAlignItems: z.enum(["MIN", "MAX", "CENTER", "SPACE_BETWEEN"]).optional().describe("Primary axis alignment for auto-layout frame. Note: When set to SPACE_BETWEEN, itemSpacing will be ignored as children will be evenly spaced."),
|
|
319
|
+
counterAxisAlignItems: z.enum(["MIN", "MAX", "CENTER", "BASELINE"]).optional().describe("Counter axis alignment for auto-layout frame"),
|
|
320
|
+
layoutSizingHorizontal: z.enum(["FIXED", "HUG", "FILL"]).optional().describe("Horizontal sizing mode for auto-layout frame"),
|
|
321
|
+
layoutSizingVertical: z.enum(["FIXED", "HUG", "FILL"]).optional().describe("Vertical sizing mode for auto-layout frame"),
|
|
322
|
+
itemSpacing: z.number().optional().describe("Distance between children in auto-layout frame. Note: This value will be ignored if primaryAxisAlignItems is set to SPACE_BETWEEN.")
|
|
323
|
+
},
|
|
324
|
+
async ({
|
|
325
|
+
x,
|
|
326
|
+
y,
|
|
327
|
+
width,
|
|
328
|
+
height,
|
|
329
|
+
name,
|
|
330
|
+
parentId,
|
|
331
|
+
fillColor,
|
|
332
|
+
strokeColor,
|
|
333
|
+
strokeWeight,
|
|
334
|
+
layoutMode,
|
|
335
|
+
layoutWrap,
|
|
336
|
+
paddingTop,
|
|
337
|
+
paddingRight,
|
|
338
|
+
paddingBottom,
|
|
339
|
+
paddingLeft,
|
|
340
|
+
primaryAxisAlignItems,
|
|
341
|
+
counterAxisAlignItems,
|
|
342
|
+
layoutSizingHorizontal,
|
|
343
|
+
layoutSizingVertical,
|
|
344
|
+
itemSpacing
|
|
345
|
+
}) => {
|
|
346
|
+
try {
|
|
347
|
+
const result = await sendCommandToFigma("create_frame", {
|
|
348
|
+
x,
|
|
349
|
+
y,
|
|
350
|
+
width,
|
|
351
|
+
height,
|
|
352
|
+
name: name || "Frame",
|
|
353
|
+
parentId,
|
|
354
|
+
fillColor: fillColor || { r: 1, g: 1, b: 1, a: 1 },
|
|
355
|
+
strokeColor,
|
|
356
|
+
strokeWeight,
|
|
357
|
+
layoutMode,
|
|
358
|
+
layoutWrap,
|
|
359
|
+
paddingTop,
|
|
360
|
+
paddingRight,
|
|
361
|
+
paddingBottom,
|
|
362
|
+
paddingLeft,
|
|
363
|
+
primaryAxisAlignItems,
|
|
364
|
+
counterAxisAlignItems,
|
|
365
|
+
layoutSizingHorizontal,
|
|
366
|
+
layoutSizingVertical,
|
|
367
|
+
itemSpacing
|
|
368
|
+
});
|
|
369
|
+
const typedResult = result;
|
|
370
|
+
return {
|
|
371
|
+
content: [
|
|
372
|
+
{
|
|
373
|
+
type: "text",
|
|
374
|
+
text: `Created frame "${typedResult.name}" with ID: ${typedResult.id}. Use the ID as the parentId to appendChild inside this frame.`
|
|
375
|
+
}
|
|
376
|
+
]
|
|
377
|
+
};
|
|
378
|
+
} catch (error) {
|
|
379
|
+
return {
|
|
380
|
+
content: [
|
|
381
|
+
{
|
|
382
|
+
type: "text",
|
|
383
|
+
text: `Error creating frame: ${error instanceof Error ? error.message : String(error)}`
|
|
384
|
+
}
|
|
385
|
+
]
|
|
386
|
+
};
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
);
|
|
390
|
+
server.tool(
|
|
391
|
+
"create_text",
|
|
392
|
+
"Create a new text element in Figma",
|
|
393
|
+
{
|
|
394
|
+
x: z.number().describe("X position"),
|
|
395
|
+
y: z.number().describe("Y position"),
|
|
396
|
+
text: z.string().describe("Text content"),
|
|
397
|
+
fontSize: z.number().optional().describe("Font size (default: 14)"),
|
|
398
|
+
fontWeight: z.number().optional().describe("Font weight (e.g., 400 for Regular, 700 for Bold)"),
|
|
399
|
+
fontColor: z.object({
|
|
400
|
+
r: z.number().min(0).max(1).describe("Red component (0-1)"),
|
|
401
|
+
g: z.number().min(0).max(1).describe("Green component (0-1)"),
|
|
402
|
+
b: z.number().min(0).max(1).describe("Blue component (0-1)"),
|
|
403
|
+
a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)")
|
|
404
|
+
}).optional().describe("Font color in RGBA format"),
|
|
405
|
+
name: z.string().optional().describe("Semantic layer name for the text node"),
|
|
406
|
+
parentId: z.string().optional().describe("Optional parent node ID to append the text to")
|
|
407
|
+
},
|
|
408
|
+
async ({ x, y, text, fontSize, fontWeight, fontColor, name, parentId }) => {
|
|
409
|
+
try {
|
|
410
|
+
const result = await sendCommandToFigma("create_text", {
|
|
411
|
+
x,
|
|
412
|
+
y,
|
|
413
|
+
text,
|
|
414
|
+
fontSize: fontSize || 14,
|
|
415
|
+
fontWeight: fontWeight || 400,
|
|
416
|
+
fontColor: fontColor || { r: 0, g: 0, b: 0, a: 1 },
|
|
417
|
+
name: name || "Text",
|
|
418
|
+
parentId
|
|
419
|
+
});
|
|
420
|
+
const typedResult = result;
|
|
421
|
+
return {
|
|
422
|
+
content: [
|
|
423
|
+
{
|
|
424
|
+
type: "text",
|
|
425
|
+
text: `Created text "${typedResult.name}" with ID: ${typedResult.id}`
|
|
426
|
+
}
|
|
427
|
+
]
|
|
428
|
+
};
|
|
429
|
+
} catch (error) {
|
|
430
|
+
return {
|
|
431
|
+
content: [
|
|
432
|
+
{
|
|
433
|
+
type: "text",
|
|
434
|
+
text: `Error creating text: ${error instanceof Error ? error.message : String(error)}`
|
|
435
|
+
}
|
|
436
|
+
]
|
|
437
|
+
};
|
|
438
|
+
}
|
|
439
|
+
}
|
|
440
|
+
);
|
|
441
|
+
server.tool(
|
|
442
|
+
"set_fill_color",
|
|
443
|
+
"Set the fill color of a node in Figma can be TextNode or FrameNode",
|
|
444
|
+
{
|
|
445
|
+
nodeId: z.string().describe("The ID of the node to modify"),
|
|
446
|
+
r: z.number().min(0).max(1).describe("Red component (0-1)"),
|
|
447
|
+
g: z.number().min(0).max(1).describe("Green component (0-1)"),
|
|
448
|
+
b: z.number().min(0).max(1).describe("Blue component (0-1)"),
|
|
449
|
+
a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)")
|
|
450
|
+
},
|
|
451
|
+
async ({ nodeId, r, g, b, a }) => {
|
|
452
|
+
try {
|
|
453
|
+
const result = await sendCommandToFigma("set_fill_color", {
|
|
454
|
+
nodeId,
|
|
455
|
+
color: { r, g, b, a: a || 1 }
|
|
456
|
+
});
|
|
457
|
+
const typedResult = result;
|
|
458
|
+
return {
|
|
459
|
+
content: [
|
|
460
|
+
{
|
|
461
|
+
type: "text",
|
|
462
|
+
text: `Set fill color of node "${typedResult.name}" to RGBA(${r}, ${g}, ${b}, ${a || 1})`
|
|
463
|
+
}
|
|
464
|
+
]
|
|
465
|
+
};
|
|
466
|
+
} catch (error) {
|
|
467
|
+
return {
|
|
468
|
+
content: [
|
|
469
|
+
{
|
|
470
|
+
type: "text",
|
|
471
|
+
text: `Error setting fill color: ${error instanceof Error ? error.message : String(error)}`
|
|
472
|
+
}
|
|
473
|
+
]
|
|
474
|
+
};
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
);
|
|
478
|
+
server.tool(
|
|
479
|
+
"set_stroke_color",
|
|
480
|
+
"Set the stroke color of a node in Figma",
|
|
481
|
+
{
|
|
482
|
+
nodeId: z.string().describe("The ID of the node to modify"),
|
|
483
|
+
r: z.number().min(0).max(1).describe("Red component (0-1)"),
|
|
484
|
+
g: z.number().min(0).max(1).describe("Green component (0-1)"),
|
|
485
|
+
b: z.number().min(0).max(1).describe("Blue component (0-1)"),
|
|
486
|
+
a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)"),
|
|
487
|
+
weight: z.number().positive().optional().describe("Stroke weight")
|
|
488
|
+
},
|
|
489
|
+
async ({ nodeId, r, g, b, a, weight }) => {
|
|
490
|
+
try {
|
|
491
|
+
const result = await sendCommandToFigma("set_stroke_color", {
|
|
492
|
+
nodeId,
|
|
493
|
+
color: { r, g, b, a: a || 1 },
|
|
494
|
+
weight: weight || 1
|
|
495
|
+
});
|
|
496
|
+
const typedResult = result;
|
|
497
|
+
return {
|
|
498
|
+
content: [
|
|
499
|
+
{
|
|
500
|
+
type: "text",
|
|
501
|
+
text: `Set stroke color of node "${typedResult.name}" to RGBA(${r}, ${g}, ${b}, ${a || 1}) with weight ${weight || 1}`
|
|
502
|
+
}
|
|
503
|
+
]
|
|
504
|
+
};
|
|
505
|
+
} catch (error) {
|
|
506
|
+
return {
|
|
507
|
+
content: [
|
|
508
|
+
{
|
|
509
|
+
type: "text",
|
|
510
|
+
text: `Error setting stroke color: ${error instanceof Error ? error.message : String(error)}`
|
|
511
|
+
}
|
|
512
|
+
]
|
|
513
|
+
};
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
);
|
|
517
|
+
server.tool(
|
|
518
|
+
"move_node",
|
|
519
|
+
"Move a node to a new position in Figma",
|
|
520
|
+
{
|
|
521
|
+
nodeId: z.string().describe("The ID of the node to move"),
|
|
522
|
+
x: z.number().describe("New X position"),
|
|
523
|
+
y: z.number().describe("New Y position")
|
|
524
|
+
},
|
|
525
|
+
async ({ nodeId, x, y }) => {
|
|
526
|
+
try {
|
|
527
|
+
const result = await sendCommandToFigma("move_node", { nodeId, x, y });
|
|
528
|
+
const typedResult = result;
|
|
529
|
+
return {
|
|
530
|
+
content: [
|
|
531
|
+
{
|
|
532
|
+
type: "text",
|
|
533
|
+
text: `Moved node "${typedResult.name}" to position (${x}, ${y})`
|
|
534
|
+
}
|
|
535
|
+
]
|
|
536
|
+
};
|
|
537
|
+
} catch (error) {
|
|
538
|
+
return {
|
|
539
|
+
content: [
|
|
540
|
+
{
|
|
541
|
+
type: "text",
|
|
542
|
+
text: `Error moving node: ${error instanceof Error ? error.message : String(error)}`
|
|
543
|
+
}
|
|
544
|
+
]
|
|
545
|
+
};
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
);
|
|
549
|
+
server.tool(
|
|
550
|
+
"clone_node",
|
|
551
|
+
"Clone an existing node in Figma",
|
|
552
|
+
{
|
|
553
|
+
nodeId: z.string().describe("The ID of the node to clone"),
|
|
554
|
+
x: z.number().optional().describe("New X position for the clone"),
|
|
555
|
+
y: z.number().optional().describe("New Y position for the clone")
|
|
556
|
+
},
|
|
557
|
+
async ({ nodeId, x, y }) => {
|
|
558
|
+
try {
|
|
559
|
+
const result = await sendCommandToFigma("clone_node", { nodeId, x, y });
|
|
560
|
+
const typedResult = result;
|
|
561
|
+
return {
|
|
562
|
+
content: [
|
|
563
|
+
{
|
|
564
|
+
type: "text",
|
|
565
|
+
text: `Cloned node "${typedResult.name}" with new ID: ${typedResult.id}${x !== void 0 && y !== void 0 ? ` at position (${x}, ${y})` : ""}`
|
|
566
|
+
}
|
|
567
|
+
]
|
|
568
|
+
};
|
|
569
|
+
} catch (error) {
|
|
570
|
+
return {
|
|
571
|
+
content: [
|
|
572
|
+
{
|
|
573
|
+
type: "text",
|
|
574
|
+
text: `Error cloning node: ${error instanceof Error ? error.message : String(error)}`
|
|
575
|
+
}
|
|
576
|
+
]
|
|
577
|
+
};
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
);
|
|
581
|
+
server.tool(
|
|
582
|
+
"resize_node",
|
|
583
|
+
"Resize a node in Figma",
|
|
584
|
+
{
|
|
585
|
+
nodeId: z.string().describe("The ID of the node to resize"),
|
|
586
|
+
width: z.number().positive().describe("New width"),
|
|
587
|
+
height: z.number().positive().describe("New height")
|
|
588
|
+
},
|
|
589
|
+
async ({ nodeId, width, height }) => {
|
|
590
|
+
try {
|
|
591
|
+
const result = await sendCommandToFigma("resize_node", {
|
|
592
|
+
nodeId,
|
|
593
|
+
width,
|
|
594
|
+
height
|
|
595
|
+
});
|
|
596
|
+
const typedResult = result;
|
|
597
|
+
return {
|
|
598
|
+
content: [
|
|
599
|
+
{
|
|
600
|
+
type: "text",
|
|
601
|
+
text: `Resized node "${typedResult.name}" to width ${width} and height ${height}`
|
|
602
|
+
}
|
|
603
|
+
]
|
|
604
|
+
};
|
|
605
|
+
} catch (error) {
|
|
606
|
+
return {
|
|
607
|
+
content: [
|
|
608
|
+
{
|
|
609
|
+
type: "text",
|
|
610
|
+
text: `Error resizing node: ${error instanceof Error ? error.message : String(error)}`
|
|
611
|
+
}
|
|
612
|
+
]
|
|
613
|
+
};
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
);
|
|
617
|
+
server.tool(
|
|
618
|
+
"delete_node",
|
|
619
|
+
"Delete a node from Figma",
|
|
620
|
+
{
|
|
621
|
+
nodeId: z.string().describe("The ID of the node to delete")
|
|
622
|
+
},
|
|
623
|
+
async ({ nodeId }) => {
|
|
624
|
+
try {
|
|
625
|
+
await sendCommandToFigma("delete_node", { nodeId });
|
|
626
|
+
return {
|
|
627
|
+
content: [
|
|
628
|
+
{
|
|
629
|
+
type: "text",
|
|
630
|
+
text: `Deleted node with ID: ${nodeId}`
|
|
631
|
+
}
|
|
632
|
+
]
|
|
633
|
+
};
|
|
634
|
+
} catch (error) {
|
|
635
|
+
return {
|
|
636
|
+
content: [
|
|
637
|
+
{
|
|
638
|
+
type: "text",
|
|
639
|
+
text: `Error deleting node: ${error instanceof Error ? error.message : String(error)}`
|
|
640
|
+
}
|
|
641
|
+
]
|
|
642
|
+
};
|
|
643
|
+
}
|
|
644
|
+
}
|
|
645
|
+
);
|
|
646
|
+
server.tool(
|
|
647
|
+
"delete_multiple_nodes",
|
|
648
|
+
"Delete multiple nodes from Figma at once",
|
|
649
|
+
{
|
|
650
|
+
nodeIds: z.array(z.string()).describe("Array of node IDs to delete")
|
|
651
|
+
},
|
|
652
|
+
async ({ nodeIds }) => {
|
|
653
|
+
try {
|
|
654
|
+
const result = await sendCommandToFigma("delete_multiple_nodes", { nodeIds });
|
|
655
|
+
return {
|
|
656
|
+
content: [
|
|
657
|
+
{
|
|
658
|
+
type: "text",
|
|
659
|
+
text: JSON.stringify(result)
|
|
660
|
+
}
|
|
661
|
+
]
|
|
662
|
+
};
|
|
663
|
+
} catch (error) {
|
|
664
|
+
return {
|
|
665
|
+
content: [
|
|
666
|
+
{
|
|
667
|
+
type: "text",
|
|
668
|
+
text: `Error deleting multiple nodes: ${error instanceof Error ? error.message : String(error)}`
|
|
669
|
+
}
|
|
670
|
+
]
|
|
671
|
+
};
|
|
672
|
+
}
|
|
673
|
+
}
|
|
674
|
+
);
|
|
675
|
+
server.tool(
|
|
676
|
+
"export_node_as_image",
|
|
677
|
+
"Export a node as an image from Figma",
|
|
678
|
+
{
|
|
679
|
+
nodeId: z.string().describe("The ID of the node to export"),
|
|
680
|
+
format: z.enum(["PNG", "JPG", "SVG", "PDF"]).optional().describe("Export format"),
|
|
681
|
+
scale: z.number().positive().optional().describe("Export scale")
|
|
682
|
+
},
|
|
683
|
+
async ({ nodeId, format, scale }) => {
|
|
684
|
+
try {
|
|
685
|
+
const result = await sendCommandToFigma("export_node_as_image", {
|
|
686
|
+
nodeId,
|
|
687
|
+
format: format || "PNG",
|
|
688
|
+
scale: scale || 1
|
|
689
|
+
});
|
|
690
|
+
const typedResult = result;
|
|
691
|
+
return {
|
|
692
|
+
content: [
|
|
693
|
+
{
|
|
694
|
+
type: "image",
|
|
695
|
+
data: typedResult.imageData,
|
|
696
|
+
mimeType: typedResult.mimeType || "image/png"
|
|
697
|
+
}
|
|
698
|
+
]
|
|
699
|
+
};
|
|
700
|
+
} catch (error) {
|
|
701
|
+
return {
|
|
702
|
+
content: [
|
|
703
|
+
{
|
|
704
|
+
type: "text",
|
|
705
|
+
text: `Error exporting node as image: ${error instanceof Error ? error.message : String(error)}`
|
|
706
|
+
}
|
|
707
|
+
]
|
|
708
|
+
};
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
);
|
|
712
|
+
server.tool(
|
|
713
|
+
"set_text_content",
|
|
714
|
+
"Set the text content of an existing text node in Figma",
|
|
715
|
+
{
|
|
716
|
+
nodeId: z.string().describe("The ID of the text node to modify"),
|
|
717
|
+
text: z.string().describe("New text content")
|
|
718
|
+
},
|
|
719
|
+
async ({ nodeId, text }) => {
|
|
720
|
+
try {
|
|
721
|
+
const result = await sendCommandToFigma("set_text_content", {
|
|
722
|
+
nodeId,
|
|
723
|
+
text
|
|
724
|
+
});
|
|
725
|
+
const typedResult = result;
|
|
726
|
+
return {
|
|
727
|
+
content: [
|
|
728
|
+
{
|
|
729
|
+
type: "text",
|
|
730
|
+
text: `Updated text content of node "${typedResult.name}" to "${text}"`
|
|
731
|
+
}
|
|
732
|
+
]
|
|
733
|
+
};
|
|
734
|
+
} catch (error) {
|
|
735
|
+
return {
|
|
736
|
+
content: [
|
|
737
|
+
{
|
|
738
|
+
type: "text",
|
|
739
|
+
text: `Error setting text content: ${error instanceof Error ? error.message : String(error)}`
|
|
740
|
+
}
|
|
741
|
+
]
|
|
742
|
+
};
|
|
743
|
+
}
|
|
744
|
+
}
|
|
745
|
+
);
|
|
746
|
+
server.tool(
|
|
747
|
+
"get_styles",
|
|
748
|
+
"Get all styles from the current Figma document",
|
|
749
|
+
{},
|
|
750
|
+
async () => {
|
|
751
|
+
try {
|
|
752
|
+
const result = await sendCommandToFigma("get_styles");
|
|
753
|
+
return {
|
|
754
|
+
content: [
|
|
755
|
+
{
|
|
756
|
+
type: "text",
|
|
757
|
+
text: JSON.stringify(result)
|
|
758
|
+
}
|
|
759
|
+
]
|
|
760
|
+
};
|
|
761
|
+
} catch (error) {
|
|
762
|
+
return {
|
|
763
|
+
content: [
|
|
764
|
+
{
|
|
765
|
+
type: "text",
|
|
766
|
+
text: `Error getting styles: ${error instanceof Error ? error.message : String(error)}`
|
|
767
|
+
}
|
|
768
|
+
]
|
|
769
|
+
};
|
|
770
|
+
}
|
|
771
|
+
}
|
|
772
|
+
);
|
|
773
|
+
server.tool(
|
|
774
|
+
"get_local_components",
|
|
775
|
+
"Get all local components from the Figma document",
|
|
776
|
+
{},
|
|
777
|
+
async () => {
|
|
778
|
+
try {
|
|
779
|
+
const result = await sendCommandToFigma("get_local_components");
|
|
780
|
+
return {
|
|
781
|
+
content: [
|
|
782
|
+
{
|
|
783
|
+
type: "text",
|
|
784
|
+
text: JSON.stringify(result)
|
|
785
|
+
}
|
|
786
|
+
]
|
|
787
|
+
};
|
|
788
|
+
} catch (error) {
|
|
789
|
+
return {
|
|
790
|
+
content: [
|
|
791
|
+
{
|
|
792
|
+
type: "text",
|
|
793
|
+
text: `Error getting local components: ${error instanceof Error ? error.message : String(error)}`
|
|
794
|
+
}
|
|
795
|
+
]
|
|
796
|
+
};
|
|
797
|
+
}
|
|
798
|
+
}
|
|
799
|
+
);
|
|
800
|
+
server.tool(
|
|
801
|
+
"get_local_variables",
|
|
802
|
+
"Get all local variables and variable collections from the Figma document, including values per mode",
|
|
803
|
+
{},
|
|
804
|
+
async () => {
|
|
805
|
+
try {
|
|
806
|
+
const result = await sendCommandToFigma("get_local_variables");
|
|
807
|
+
return {
|
|
808
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
809
|
+
};
|
|
810
|
+
} catch (error) {
|
|
811
|
+
return {
|
|
812
|
+
content: [{ type: "text", text: `Error getting local variables: ${error instanceof Error ? error.message : String(error)}` }]
|
|
813
|
+
};
|
|
814
|
+
}
|
|
815
|
+
}
|
|
816
|
+
);
|
|
817
|
+
server.tool(
|
|
818
|
+
"get_local_variable_collections",
|
|
819
|
+
"Get all local variable collections with their modes",
|
|
820
|
+
{},
|
|
821
|
+
async () => {
|
|
822
|
+
try {
|
|
823
|
+
const result = await sendCommandToFigma("get_local_variable_collections");
|
|
824
|
+
return {
|
|
825
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
826
|
+
};
|
|
827
|
+
} catch (error) {
|
|
828
|
+
return {
|
|
829
|
+
content: [{ type: "text", text: `Error getting local variable collections: ${error instanceof Error ? error.message : String(error)}` }]
|
|
830
|
+
};
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
);
|
|
834
|
+
server.tool(
|
|
835
|
+
"get_variable_by_id",
|
|
836
|
+
"Get detailed information about a specific variable by its ID, including values per mode, scopes, and code syntax",
|
|
837
|
+
{
|
|
838
|
+
variableId: z.string().describe("The ID of the variable to retrieve")
|
|
839
|
+
},
|
|
840
|
+
async ({ variableId }) => {
|
|
841
|
+
try {
|
|
842
|
+
const result = await sendCommandToFigma("get_variable_by_id", { variableId });
|
|
843
|
+
return {
|
|
844
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
845
|
+
};
|
|
846
|
+
} catch (error) {
|
|
847
|
+
return {
|
|
848
|
+
content: [{ type: "text", text: `Error getting variable: ${error instanceof Error ? error.message : String(error)}` }]
|
|
849
|
+
};
|
|
850
|
+
}
|
|
851
|
+
}
|
|
852
|
+
);
|
|
853
|
+
server.tool(
|
|
854
|
+
"create_variable_collection",
|
|
855
|
+
"Create a new variable collection in the Figma document",
|
|
856
|
+
{
|
|
857
|
+
name: z.string().describe("Name for the new variable collection")
|
|
858
|
+
},
|
|
859
|
+
async ({ name }) => {
|
|
860
|
+
try {
|
|
861
|
+
const result = await sendCommandToFigma("create_variable_collection", { name });
|
|
862
|
+
return {
|
|
863
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
864
|
+
};
|
|
865
|
+
} catch (error) {
|
|
866
|
+
return {
|
|
867
|
+
content: [{ type: "text", text: `Error creating variable collection: ${error instanceof Error ? error.message : String(error)}` }]
|
|
868
|
+
};
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
);
|
|
872
|
+
server.tool(
|
|
873
|
+
"create_variable",
|
|
874
|
+
"Create a new variable in a variable collection",
|
|
875
|
+
{
|
|
876
|
+
name: z.string().describe("Name for the new variable"),
|
|
877
|
+
collectionId: z.string().describe("ID of the variable collection to add the variable to"),
|
|
878
|
+
resolvedType: z.enum(["COLOR", "FLOAT", "STRING", "BOOLEAN"]).describe("The resolved type of the variable")
|
|
879
|
+
},
|
|
880
|
+
async ({ name, collectionId, resolvedType }) => {
|
|
881
|
+
try {
|
|
882
|
+
const result = await sendCommandToFigma("create_variable", { name, collectionId, resolvedType });
|
|
883
|
+
return {
|
|
884
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
885
|
+
};
|
|
886
|
+
} catch (error) {
|
|
887
|
+
return {
|
|
888
|
+
content: [{ type: "text", text: `Error creating variable: ${error instanceof Error ? error.message : String(error)}` }]
|
|
889
|
+
};
|
|
890
|
+
}
|
|
891
|
+
}
|
|
892
|
+
);
|
|
893
|
+
server.tool(
|
|
894
|
+
"set_variable_value",
|
|
895
|
+
"Set the value of a variable for a specific mode. For COLOR type use {r, g, b, a} with 0-1 range. For FLOAT use a number. For STRING use a string. For BOOLEAN use true/false.",
|
|
896
|
+
{
|
|
897
|
+
variableId: z.string().describe("The ID of the variable"),
|
|
898
|
+
modeId: z.string().describe("The mode ID to set the value for"),
|
|
899
|
+
value: z.any().describe("The value to set - type depends on variable resolvedType (COLOR: {r,g,b,a}, FLOAT: number, STRING: string, BOOLEAN: boolean)")
|
|
900
|
+
},
|
|
901
|
+
async ({ variableId, modeId, value }) => {
|
|
902
|
+
try {
|
|
903
|
+
const result = await sendCommandToFigma("set_variable_value", { variableId, modeId, value });
|
|
904
|
+
return {
|
|
905
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
906
|
+
};
|
|
907
|
+
} catch (error) {
|
|
908
|
+
return {
|
|
909
|
+
content: [{ type: "text", text: `Error setting variable value: ${error instanceof Error ? error.message : String(error)}` }]
|
|
910
|
+
};
|
|
911
|
+
}
|
|
912
|
+
}
|
|
913
|
+
);
|
|
914
|
+
server.tool(
|
|
915
|
+
"set_variable_mode_name",
|
|
916
|
+
"Rename a mode in a variable collection",
|
|
917
|
+
{
|
|
918
|
+
collectionId: z.string().describe("The ID of the variable collection"),
|
|
919
|
+
modeId: z.string().describe("The ID of the mode to rename"),
|
|
920
|
+
newName: z.string().describe("The new name for the mode")
|
|
921
|
+
},
|
|
922
|
+
async ({ collectionId, modeId, newName }) => {
|
|
923
|
+
try {
|
|
924
|
+
const result = await sendCommandToFigma("set_variable_mode_name", { collectionId, modeId, newName });
|
|
925
|
+
return {
|
|
926
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
927
|
+
};
|
|
928
|
+
} catch (error) {
|
|
929
|
+
return {
|
|
930
|
+
content: [{ type: "text", text: `Error renaming variable mode: ${error instanceof Error ? error.message : String(error)}` }]
|
|
931
|
+
};
|
|
932
|
+
}
|
|
933
|
+
}
|
|
934
|
+
);
|
|
935
|
+
server.tool(
|
|
936
|
+
"set_variable_binding",
|
|
937
|
+
"Bind a variable to a node property. Fields include 'fills/0/color', 'strokes/0/color', 'width', 'height', 'itemSpacing', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', etc.",
|
|
938
|
+
{
|
|
939
|
+
nodeId: z.string().describe("The ID of the node to bind the variable to"),
|
|
940
|
+
field: z.string().describe("The property field to bind (e.g. 'fills/0/color', 'width', 'itemSpacing')"),
|
|
941
|
+
variableId: z.string().describe("The ID of the variable to bind")
|
|
942
|
+
},
|
|
943
|
+
async ({ nodeId, field, variableId }) => {
|
|
944
|
+
try {
|
|
945
|
+
const result = await sendCommandToFigma("set_variable_binding", { nodeId, field, variableId });
|
|
946
|
+
return {
|
|
947
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
948
|
+
};
|
|
949
|
+
} catch (error) {
|
|
950
|
+
return {
|
|
951
|
+
content: [{ type: "text", text: `Error setting variable binding: ${error instanceof Error ? error.message : String(error)}` }]
|
|
952
|
+
};
|
|
953
|
+
}
|
|
954
|
+
}
|
|
955
|
+
);
|
|
956
|
+
server.tool(
|
|
957
|
+
"get_team_library_components",
|
|
958
|
+
"Get all available components from team libraries",
|
|
959
|
+
{},
|
|
960
|
+
async () => {
|
|
961
|
+
try {
|
|
962
|
+
const result = await sendCommandToFigma("get_team_library_components");
|
|
963
|
+
return {
|
|
964
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
965
|
+
};
|
|
966
|
+
} catch (error) {
|
|
967
|
+
return {
|
|
968
|
+
content: [{ type: "text", text: `Error getting team library components: ${error instanceof Error ? error.message : String(error)}` }]
|
|
969
|
+
};
|
|
970
|
+
}
|
|
971
|
+
}
|
|
972
|
+
);
|
|
973
|
+
server.tool(
|
|
974
|
+
"get_team_library_variables",
|
|
975
|
+
"Get all available variables from team libraries",
|
|
976
|
+
{},
|
|
977
|
+
async () => {
|
|
978
|
+
try {
|
|
979
|
+
const result = await sendCommandToFigma("get_team_library_variables");
|
|
980
|
+
return {
|
|
981
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
982
|
+
};
|
|
983
|
+
} catch (error) {
|
|
984
|
+
return {
|
|
985
|
+
content: [{ type: "text", text: `Error getting team library variables: ${error instanceof Error ? error.message : String(error)}` }]
|
|
986
|
+
};
|
|
987
|
+
}
|
|
988
|
+
}
|
|
989
|
+
);
|
|
990
|
+
server.tool(
|
|
991
|
+
"import_variable_by_key",
|
|
992
|
+
"Import a variable from a team library by its key",
|
|
993
|
+
{
|
|
994
|
+
key: z.string().describe("The key of the variable to import from the team library")
|
|
995
|
+
},
|
|
996
|
+
async ({ key }) => {
|
|
997
|
+
try {
|
|
998
|
+
const result = await sendCommandToFigma("import_variable_by_key", { key });
|
|
999
|
+
return {
|
|
1000
|
+
content: [{ type: "text", text: JSON.stringify(result) }]
|
|
1001
|
+
};
|
|
1002
|
+
} catch (error) {
|
|
1003
|
+
return {
|
|
1004
|
+
content: [{ type: "text", text: `Error importing variable: ${error instanceof Error ? error.message : String(error)}` }]
|
|
1005
|
+
};
|
|
1006
|
+
}
|
|
1007
|
+
}
|
|
1008
|
+
);
|
|
1009
|
+
server.tool(
|
|
1010
|
+
"get_annotations",
|
|
1011
|
+
"Get all annotations in the current document or specific node",
|
|
1012
|
+
{
|
|
1013
|
+
nodeId: z.string().describe("node ID to get annotations for specific node"),
|
|
1014
|
+
includeCategories: z.boolean().optional().default(true).describe("Whether to include category information")
|
|
1015
|
+
},
|
|
1016
|
+
async ({ nodeId, includeCategories }) => {
|
|
1017
|
+
try {
|
|
1018
|
+
const result = await sendCommandToFigma("get_annotations", {
|
|
1019
|
+
nodeId,
|
|
1020
|
+
includeCategories
|
|
1021
|
+
});
|
|
1022
|
+
return {
|
|
1023
|
+
content: [
|
|
1024
|
+
{
|
|
1025
|
+
type: "text",
|
|
1026
|
+
text: JSON.stringify(result)
|
|
1027
|
+
}
|
|
1028
|
+
]
|
|
1029
|
+
};
|
|
1030
|
+
} catch (error) {
|
|
1031
|
+
return {
|
|
1032
|
+
content: [
|
|
1033
|
+
{
|
|
1034
|
+
type: "text",
|
|
1035
|
+
text: `Error getting annotations: ${error instanceof Error ? error.message : String(error)}`
|
|
1036
|
+
}
|
|
1037
|
+
]
|
|
1038
|
+
};
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
);
|
|
1042
|
+
server.tool(
|
|
1043
|
+
"set_annotation",
|
|
1044
|
+
"Create or update an annotation",
|
|
1045
|
+
{
|
|
1046
|
+
nodeId: z.string().describe("The ID of the node to annotate"),
|
|
1047
|
+
annotationId: z.string().optional().describe("The ID of the annotation to update (if updating existing annotation)"),
|
|
1048
|
+
labelMarkdown: z.string().describe("The annotation text in markdown format"),
|
|
1049
|
+
categoryId: z.string().optional().describe("The ID of the annotation category"),
|
|
1050
|
+
properties: z.array(z.object({
|
|
1051
|
+
type: z.string()
|
|
1052
|
+
})).optional().describe("Additional properties for the annotation")
|
|
1053
|
+
},
|
|
1054
|
+
async ({ nodeId, annotationId, labelMarkdown, categoryId, properties }) => {
|
|
1055
|
+
try {
|
|
1056
|
+
const result = await sendCommandToFigma("set_annotation", {
|
|
1057
|
+
nodeId,
|
|
1058
|
+
annotationId,
|
|
1059
|
+
labelMarkdown,
|
|
1060
|
+
categoryId,
|
|
1061
|
+
properties
|
|
1062
|
+
});
|
|
1063
|
+
return {
|
|
1064
|
+
content: [
|
|
1065
|
+
{
|
|
1066
|
+
type: "text",
|
|
1067
|
+
text: JSON.stringify(result)
|
|
1068
|
+
}
|
|
1069
|
+
]
|
|
1070
|
+
};
|
|
1071
|
+
} catch (error) {
|
|
1072
|
+
return {
|
|
1073
|
+
content: [
|
|
1074
|
+
{
|
|
1075
|
+
type: "text",
|
|
1076
|
+
text: `Error setting annotation: ${error instanceof Error ? error.message : String(error)}`
|
|
1077
|
+
}
|
|
1078
|
+
]
|
|
1079
|
+
};
|
|
1080
|
+
}
|
|
1081
|
+
}
|
|
1082
|
+
);
|
|
1083
|
+
server.tool(
|
|
1084
|
+
"set_multiple_annotations",
|
|
1085
|
+
"Set multiple annotations parallelly in a node",
|
|
1086
|
+
{
|
|
1087
|
+
nodeId: z.string().describe("The ID of the node containing the elements to annotate"),
|
|
1088
|
+
annotations: z.array(
|
|
1089
|
+
z.object({
|
|
1090
|
+
nodeId: z.string().describe("The ID of the node to annotate"),
|
|
1091
|
+
labelMarkdown: z.string().describe("The annotation text in markdown format"),
|
|
1092
|
+
categoryId: z.string().optional().describe("The ID of the annotation category"),
|
|
1093
|
+
annotationId: z.string().optional().describe("The ID of the annotation to update (if updating existing annotation)"),
|
|
1094
|
+
properties: z.array(z.object({
|
|
1095
|
+
type: z.string()
|
|
1096
|
+
})).optional().describe("Additional properties for the annotation")
|
|
1097
|
+
})
|
|
1098
|
+
).describe("Array of annotations to apply")
|
|
1099
|
+
},
|
|
1100
|
+
async ({ nodeId, annotations }) => {
|
|
1101
|
+
try {
|
|
1102
|
+
if (!annotations || annotations.length === 0) {
|
|
1103
|
+
return {
|
|
1104
|
+
content: [
|
|
1105
|
+
{
|
|
1106
|
+
type: "text",
|
|
1107
|
+
text: "No annotations provided"
|
|
1108
|
+
}
|
|
1109
|
+
]
|
|
1110
|
+
};
|
|
1111
|
+
}
|
|
1112
|
+
const initialStatus = {
|
|
1113
|
+
type: "text",
|
|
1114
|
+
text: `Starting annotation process for ${annotations.length} nodes. This will be processed in batches of 5...`
|
|
1115
|
+
};
|
|
1116
|
+
let totalProcessed = 0;
|
|
1117
|
+
const totalToProcess = annotations.length;
|
|
1118
|
+
const result = await sendCommandToFigma("set_multiple_annotations", {
|
|
1119
|
+
nodeId,
|
|
1120
|
+
annotations
|
|
1121
|
+
});
|
|
1122
|
+
const typedResult = result;
|
|
1123
|
+
const success = typedResult.annotationsApplied && typedResult.annotationsApplied > 0;
|
|
1124
|
+
const progressText = `
|
|
1125
|
+
Annotation process completed:
|
|
1126
|
+
- ${typedResult.annotationsApplied || 0} of ${totalToProcess} successfully applied
|
|
1127
|
+
- ${typedResult.annotationsFailed || 0} failed
|
|
1128
|
+
- Processed in ${typedResult.completedInChunks || 1} batches
|
|
1129
|
+
`;
|
|
1130
|
+
const detailedResults = typedResult.results || [];
|
|
1131
|
+
const failedResults = detailedResults.filter((item) => !item.success);
|
|
1132
|
+
let detailedResponse = "";
|
|
1133
|
+
if (failedResults.length > 0) {
|
|
1134
|
+
detailedResponse = `
|
|
1135
|
+
|
|
1136
|
+
Nodes that failed:
|
|
1137
|
+
${failedResults.map(
|
|
1138
|
+
(item) => `- ${item.nodeId}: ${item.error || "Unknown error"}`
|
|
1139
|
+
).join("\n")}`;
|
|
1140
|
+
}
|
|
1141
|
+
return {
|
|
1142
|
+
content: [
|
|
1143
|
+
initialStatus,
|
|
1144
|
+
{
|
|
1145
|
+
type: "text",
|
|
1146
|
+
text: progressText + detailedResponse
|
|
1147
|
+
}
|
|
1148
|
+
]
|
|
1149
|
+
};
|
|
1150
|
+
} catch (error) {
|
|
1151
|
+
return {
|
|
1152
|
+
content: [
|
|
1153
|
+
{
|
|
1154
|
+
type: "text",
|
|
1155
|
+
text: `Error setting multiple annotations: ${error instanceof Error ? error.message : String(error)}`
|
|
1156
|
+
}
|
|
1157
|
+
]
|
|
1158
|
+
};
|
|
1159
|
+
}
|
|
1160
|
+
}
|
|
1161
|
+
);
|
|
1162
|
+
server.tool(
|
|
1163
|
+
"create_component_instance",
|
|
1164
|
+
"Create an instance of a component in Figma",
|
|
1165
|
+
{
|
|
1166
|
+
componentKey: z.string().describe("Key of the component to instantiate"),
|
|
1167
|
+
x: z.number().describe("X position"),
|
|
1168
|
+
y: z.number().describe("Y position")
|
|
1169
|
+
},
|
|
1170
|
+
async ({ componentKey, x, y }) => {
|
|
1171
|
+
try {
|
|
1172
|
+
const result = await sendCommandToFigma("create_component_instance", {
|
|
1173
|
+
componentKey,
|
|
1174
|
+
x,
|
|
1175
|
+
y
|
|
1176
|
+
});
|
|
1177
|
+
const typedResult = result;
|
|
1178
|
+
return {
|
|
1179
|
+
content: [
|
|
1180
|
+
{
|
|
1181
|
+
type: "text",
|
|
1182
|
+
text: JSON.stringify(typedResult)
|
|
1183
|
+
}
|
|
1184
|
+
]
|
|
1185
|
+
};
|
|
1186
|
+
} catch (error) {
|
|
1187
|
+
return {
|
|
1188
|
+
content: [
|
|
1189
|
+
{
|
|
1190
|
+
type: "text",
|
|
1191
|
+
text: `Error creating component instance: ${error instanceof Error ? error.message : String(error)}`
|
|
1192
|
+
}
|
|
1193
|
+
]
|
|
1194
|
+
};
|
|
1195
|
+
}
|
|
1196
|
+
}
|
|
1197
|
+
);
|
|
1198
|
+
server.tool(
|
|
1199
|
+
"get_instance_overrides",
|
|
1200
|
+
"Get all override properties from a selected component instance. These overrides can be applied to other instances, which will swap them to match the source component.",
|
|
1201
|
+
{
|
|
1202
|
+
nodeId: z.string().optional().describe("Optional ID of the component instance to get overrides from. If not provided, currently selected instance will be used.")
|
|
1203
|
+
},
|
|
1204
|
+
async ({ nodeId }) => {
|
|
1205
|
+
try {
|
|
1206
|
+
const result = await sendCommandToFigma("get_instance_overrides", {
|
|
1207
|
+
instanceNodeId: nodeId || null
|
|
1208
|
+
});
|
|
1209
|
+
const typedResult = result;
|
|
1210
|
+
return {
|
|
1211
|
+
content: [
|
|
1212
|
+
{
|
|
1213
|
+
type: "text",
|
|
1214
|
+
text: typedResult.success ? `Successfully got instance overrides: ${typedResult.message}` : `Failed to get instance overrides: ${typedResult.message}`
|
|
1215
|
+
}
|
|
1216
|
+
]
|
|
1217
|
+
};
|
|
1218
|
+
} catch (error) {
|
|
1219
|
+
return {
|
|
1220
|
+
content: [
|
|
1221
|
+
{
|
|
1222
|
+
type: "text",
|
|
1223
|
+
text: `Error copying instance overrides: ${error instanceof Error ? error.message : String(error)}`
|
|
1224
|
+
}
|
|
1225
|
+
]
|
|
1226
|
+
};
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
);
|
|
1230
|
+
server.tool(
|
|
1231
|
+
"set_instance_overrides",
|
|
1232
|
+
"Apply previously copied overrides to selected component instances. Target instances will be swapped to the source component and all copied override properties will be applied.",
|
|
1233
|
+
{
|
|
1234
|
+
sourceInstanceId: z.string().describe("ID of the source component instance"),
|
|
1235
|
+
targetNodeIds: z.array(z.string()).describe("Array of target instance IDs. Currently selected instances will be used.")
|
|
1236
|
+
},
|
|
1237
|
+
async ({ sourceInstanceId, targetNodeIds }) => {
|
|
1238
|
+
try {
|
|
1239
|
+
const result = await sendCommandToFigma("set_instance_overrides", {
|
|
1240
|
+
sourceInstanceId,
|
|
1241
|
+
targetNodeIds: targetNodeIds || []
|
|
1242
|
+
});
|
|
1243
|
+
const typedResult = result;
|
|
1244
|
+
if (typedResult.success) {
|
|
1245
|
+
const successCount = typedResult.results?.filter((r) => r.success).length || 0;
|
|
1246
|
+
return {
|
|
1247
|
+
content: [
|
|
1248
|
+
{
|
|
1249
|
+
type: "text",
|
|
1250
|
+
text: `Successfully applied ${typedResult.totalCount || 0} overrides to ${successCount} instances.`
|
|
1251
|
+
}
|
|
1252
|
+
]
|
|
1253
|
+
};
|
|
1254
|
+
} else {
|
|
1255
|
+
return {
|
|
1256
|
+
content: [
|
|
1257
|
+
{
|
|
1258
|
+
type: "text",
|
|
1259
|
+
text: `Failed to set instance overrides: ${typedResult.message}`
|
|
1260
|
+
}
|
|
1261
|
+
]
|
|
1262
|
+
};
|
|
1263
|
+
}
|
|
1264
|
+
} catch (error) {
|
|
1265
|
+
return {
|
|
1266
|
+
content: [
|
|
1267
|
+
{
|
|
1268
|
+
type: "text",
|
|
1269
|
+
text: `Error setting instance overrides: ${error instanceof Error ? error.message : String(error)}`
|
|
1270
|
+
}
|
|
1271
|
+
]
|
|
1272
|
+
};
|
|
1273
|
+
}
|
|
1274
|
+
}
|
|
1275
|
+
);
|
|
1276
|
+
server.tool(
|
|
1277
|
+
"set_corner_radius",
|
|
1278
|
+
"Set the corner radius of a node in Figma",
|
|
1279
|
+
{
|
|
1280
|
+
nodeId: z.string().describe("The ID of the node to modify"),
|
|
1281
|
+
radius: z.number().min(0).describe("Corner radius value"),
|
|
1282
|
+
corners: z.array(z.boolean()).length(4).optional().describe(
|
|
1283
|
+
"Optional array of 4 booleans to specify which corners to round [topLeft, topRight, bottomRight, bottomLeft]"
|
|
1284
|
+
)
|
|
1285
|
+
},
|
|
1286
|
+
async ({ nodeId, radius, corners }) => {
|
|
1287
|
+
try {
|
|
1288
|
+
const result = await sendCommandToFigma("set_corner_radius", {
|
|
1289
|
+
nodeId,
|
|
1290
|
+
radius,
|
|
1291
|
+
corners: corners || [true, true, true, true]
|
|
1292
|
+
});
|
|
1293
|
+
const typedResult = result;
|
|
1294
|
+
return {
|
|
1295
|
+
content: [
|
|
1296
|
+
{
|
|
1297
|
+
type: "text",
|
|
1298
|
+
text: `Set corner radius of node "${typedResult.name}" to ${radius}px`
|
|
1299
|
+
}
|
|
1300
|
+
]
|
|
1301
|
+
};
|
|
1302
|
+
} catch (error) {
|
|
1303
|
+
return {
|
|
1304
|
+
content: [
|
|
1305
|
+
{
|
|
1306
|
+
type: "text",
|
|
1307
|
+
text: `Error setting corner radius: ${error instanceof Error ? error.message : String(error)}`
|
|
1308
|
+
}
|
|
1309
|
+
]
|
|
1310
|
+
};
|
|
1311
|
+
}
|
|
1312
|
+
}
|
|
1313
|
+
);
|
|
1314
|
+
server.prompt(
|
|
1315
|
+
"design_strategy",
|
|
1316
|
+
"Best practices for working with Figma designs",
|
|
1317
|
+
(extra) => {
|
|
1318
|
+
return {
|
|
1319
|
+
messages: [
|
|
1320
|
+
{
|
|
1321
|
+
role: "assistant",
|
|
1322
|
+
content: {
|
|
1323
|
+
type: "text",
|
|
1324
|
+
text: `When working with Figma designs, follow these best practices:
|
|
1325
|
+
|
|
1326
|
+
1. Start with Document Structure:
|
|
1327
|
+
- First use get_document_info() to understand the current document
|
|
1328
|
+
- Plan your layout hierarchy before creating elements
|
|
1329
|
+
- Create a main container frame for each screen/section
|
|
1330
|
+
|
|
1331
|
+
2. Naming Conventions:
|
|
1332
|
+
- Use descriptive, semantic names for all elements
|
|
1333
|
+
- Follow a consistent naming pattern (e.g., "Login Screen", "Logo Container", "Email Input")
|
|
1334
|
+
- Group related elements with meaningful names
|
|
1335
|
+
|
|
1336
|
+
3. Layout Hierarchy:
|
|
1337
|
+
- Create parent frames first, then add child elements
|
|
1338
|
+
- For forms/login screens:
|
|
1339
|
+
* Start with the main screen container frame
|
|
1340
|
+
* Create a logo container at the top
|
|
1341
|
+
* Group input fields in their own containers
|
|
1342
|
+
* Place action buttons (login, submit) after inputs
|
|
1343
|
+
* Add secondary elements (forgot password, signup links) last
|
|
1344
|
+
|
|
1345
|
+
4. Input Fields Structure:
|
|
1346
|
+
- Create a container frame for each input field
|
|
1347
|
+
- Include a label text above or inside the input
|
|
1348
|
+
- Group related inputs (e.g., username/password) together
|
|
1349
|
+
|
|
1350
|
+
5. Element Creation:
|
|
1351
|
+
- Use create_frame() for containers and input fields
|
|
1352
|
+
- Use create_text() for labels, buttons text, and links
|
|
1353
|
+
- Set appropriate colors and styles:
|
|
1354
|
+
* Use fillColor for backgrounds
|
|
1355
|
+
* Use strokeColor for borders
|
|
1356
|
+
* Set proper fontWeight for different text elements
|
|
1357
|
+
|
|
1358
|
+
6. Mofifying existing elements:
|
|
1359
|
+
- use set_text_content() to modify text content.
|
|
1360
|
+
|
|
1361
|
+
7. Visual Hierarchy:
|
|
1362
|
+
- Position elements in logical reading order (top to bottom)
|
|
1363
|
+
- Maintain consistent spacing between elements
|
|
1364
|
+
- Use appropriate font sizes for different text types:
|
|
1365
|
+
* Larger for headings/welcome text
|
|
1366
|
+
* Medium for input labels
|
|
1367
|
+
* Standard for button text
|
|
1368
|
+
* Smaller for helper text/links
|
|
1369
|
+
|
|
1370
|
+
8. Best Practices:
|
|
1371
|
+
- Verify each creation with get_node_info()
|
|
1372
|
+
- Use parentId to maintain proper hierarchy
|
|
1373
|
+
- Group related elements together in frames
|
|
1374
|
+
- Keep consistent spacing and alignment
|
|
1375
|
+
|
|
1376
|
+
Example Login Screen Structure:
|
|
1377
|
+
- Login Screen (main frame)
|
|
1378
|
+
- Logo Container (frame)
|
|
1379
|
+
- Logo (image/text)
|
|
1380
|
+
- Welcome Text (text)
|
|
1381
|
+
- Input Container (frame)
|
|
1382
|
+
- Email Input (frame)
|
|
1383
|
+
- Email Label (text)
|
|
1384
|
+
- Email Field (frame)
|
|
1385
|
+
- Password Input (frame)
|
|
1386
|
+
- Password Label (text)
|
|
1387
|
+
- Password Field (frame)
|
|
1388
|
+
- Login Button (frame)
|
|
1389
|
+
- Button Text (text)
|
|
1390
|
+
- Helper Links (frame)
|
|
1391
|
+
- Forgot Password (text)
|
|
1392
|
+
- Don't have account (text)`
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1395
|
+
],
|
|
1396
|
+
description: "Best practices for working with Figma designs"
|
|
1397
|
+
};
|
|
1398
|
+
}
|
|
1399
|
+
);
|
|
1400
|
+
server.prompt(
|
|
1401
|
+
"read_design_strategy",
|
|
1402
|
+
"Best practices for reading Figma designs",
|
|
1403
|
+
(extra) => {
|
|
1404
|
+
return {
|
|
1405
|
+
messages: [
|
|
1406
|
+
{
|
|
1407
|
+
role: "assistant",
|
|
1408
|
+
content: {
|
|
1409
|
+
type: "text",
|
|
1410
|
+
text: `When reading Figma designs, follow these best practices:
|
|
1411
|
+
|
|
1412
|
+
1. Start with selection:
|
|
1413
|
+
- First use read_my_design() to understand the current selection
|
|
1414
|
+
- If no selection ask user to select single or multiple nodes
|
|
1415
|
+
`
|
|
1416
|
+
}
|
|
1417
|
+
}
|
|
1418
|
+
],
|
|
1419
|
+
description: "Best practices for reading Figma designs"
|
|
1420
|
+
};
|
|
1421
|
+
}
|
|
1422
|
+
);
|
|
1423
|
+
server.tool(
|
|
1424
|
+
"scan_text_nodes",
|
|
1425
|
+
"Scan all text nodes in the selected Figma node",
|
|
1426
|
+
{
|
|
1427
|
+
nodeId: z.string().describe("ID of the node to scan")
|
|
1428
|
+
},
|
|
1429
|
+
async ({ nodeId }) => {
|
|
1430
|
+
try {
|
|
1431
|
+
const initialStatus = {
|
|
1432
|
+
type: "text",
|
|
1433
|
+
text: "Starting text node scanning. This may take a moment for large designs..."
|
|
1434
|
+
};
|
|
1435
|
+
const result = await sendCommandToFigma("scan_text_nodes", {
|
|
1436
|
+
nodeId,
|
|
1437
|
+
useChunking: true,
|
|
1438
|
+
// Enable chunking on the plugin side
|
|
1439
|
+
chunkSize: 10
|
|
1440
|
+
// Process 10 nodes at a time
|
|
1441
|
+
});
|
|
1442
|
+
if (result && typeof result === "object" && "chunks" in result) {
|
|
1443
|
+
const typedResult = result;
|
|
1444
|
+
const summaryText = `
|
|
1445
|
+
Scan completed:
|
|
1446
|
+
- Found ${typedResult.totalNodes} text nodes
|
|
1447
|
+
- Processed in ${typedResult.chunks} chunks
|
|
1448
|
+
`;
|
|
1449
|
+
return {
|
|
1450
|
+
content: [
|
|
1451
|
+
initialStatus,
|
|
1452
|
+
{
|
|
1453
|
+
type: "text",
|
|
1454
|
+
text: summaryText
|
|
1455
|
+
},
|
|
1456
|
+
{
|
|
1457
|
+
type: "text",
|
|
1458
|
+
text: JSON.stringify(typedResult.textNodes, null, 2)
|
|
1459
|
+
}
|
|
1460
|
+
]
|
|
1461
|
+
};
|
|
1462
|
+
}
|
|
1463
|
+
return {
|
|
1464
|
+
content: [
|
|
1465
|
+
initialStatus,
|
|
1466
|
+
{
|
|
1467
|
+
type: "text",
|
|
1468
|
+
text: JSON.stringify(result, null, 2)
|
|
1469
|
+
}
|
|
1470
|
+
]
|
|
1471
|
+
};
|
|
1472
|
+
} catch (error) {
|
|
1473
|
+
return {
|
|
1474
|
+
content: [
|
|
1475
|
+
{
|
|
1476
|
+
type: "text",
|
|
1477
|
+
text: `Error scanning text nodes: ${error instanceof Error ? error.message : String(error)}`
|
|
1478
|
+
}
|
|
1479
|
+
]
|
|
1480
|
+
};
|
|
1481
|
+
}
|
|
1482
|
+
}
|
|
1483
|
+
);
|
|
1484
|
+
server.tool(
|
|
1485
|
+
"scan_nodes_by_types",
|
|
1486
|
+
"Scan for child nodes with specific types in the selected Figma node",
|
|
1487
|
+
{
|
|
1488
|
+
nodeId: z.string().describe("ID of the node to scan"),
|
|
1489
|
+
types: z.array(z.string()).describe("Array of node types to find in the child nodes (e.g. ['COMPONENT', 'FRAME'])")
|
|
1490
|
+
},
|
|
1491
|
+
async ({ nodeId, types }) => {
|
|
1492
|
+
try {
|
|
1493
|
+
const initialStatus = {
|
|
1494
|
+
type: "text",
|
|
1495
|
+
text: `Starting node type scanning for types: ${types.join(", ")}...`
|
|
1496
|
+
};
|
|
1497
|
+
const result = await sendCommandToFigma("scan_nodes_by_types", {
|
|
1498
|
+
nodeId,
|
|
1499
|
+
types
|
|
1500
|
+
});
|
|
1501
|
+
if (result && typeof result === "object" && "matchingNodes" in result) {
|
|
1502
|
+
const typedResult = result;
|
|
1503
|
+
const summaryText = `Scan completed: Found ${typedResult.count} nodes matching types: ${typedResult.searchedTypes.join(", ")}`;
|
|
1504
|
+
return {
|
|
1505
|
+
content: [
|
|
1506
|
+
initialStatus,
|
|
1507
|
+
{
|
|
1508
|
+
type: "text",
|
|
1509
|
+
text: summaryText
|
|
1510
|
+
},
|
|
1511
|
+
{
|
|
1512
|
+
type: "text",
|
|
1513
|
+
text: JSON.stringify(typedResult.matchingNodes, null, 2)
|
|
1514
|
+
}
|
|
1515
|
+
]
|
|
1516
|
+
};
|
|
1517
|
+
}
|
|
1518
|
+
return {
|
|
1519
|
+
content: [
|
|
1520
|
+
initialStatus,
|
|
1521
|
+
{
|
|
1522
|
+
type: "text",
|
|
1523
|
+
text: JSON.stringify(result, null, 2)
|
|
1524
|
+
}
|
|
1525
|
+
]
|
|
1526
|
+
};
|
|
1527
|
+
} catch (error) {
|
|
1528
|
+
return {
|
|
1529
|
+
content: [
|
|
1530
|
+
{
|
|
1531
|
+
type: "text",
|
|
1532
|
+
text: `Error scanning nodes by types: ${error instanceof Error ? error.message : String(error)}`
|
|
1533
|
+
}
|
|
1534
|
+
]
|
|
1535
|
+
};
|
|
1536
|
+
}
|
|
1537
|
+
}
|
|
1538
|
+
);
|
|
1539
|
+
server.prompt(
|
|
1540
|
+
"text_replacement_strategy",
|
|
1541
|
+
"Systematic approach for replacing text in Figma designs",
|
|
1542
|
+
(extra) => {
|
|
1543
|
+
return {
|
|
1544
|
+
messages: [
|
|
1545
|
+
{
|
|
1546
|
+
role: "assistant",
|
|
1547
|
+
content: {
|
|
1548
|
+
type: "text",
|
|
1549
|
+
text: `# Intelligent Text Replacement Strategy
|
|
1550
|
+
|
|
1551
|
+
## 1. Analyze Design & Identify Structure
|
|
1552
|
+
- Scan text nodes to understand the overall structure of the design
|
|
1553
|
+
- Use AI pattern recognition to identify logical groupings:
|
|
1554
|
+
* Tables (rows, columns, headers, cells)
|
|
1555
|
+
* Lists (items, headers, nested lists)
|
|
1556
|
+
* Card groups (similar cards with recurring text fields)
|
|
1557
|
+
* Forms (labels, input fields, validation text)
|
|
1558
|
+
* Navigation (menu items, breadcrumbs)
|
|
1559
|
+
\`\`\`
|
|
1560
|
+
scan_text_nodes(nodeId: "node-id")
|
|
1561
|
+
get_node_info(nodeId: "node-id") // optional
|
|
1562
|
+
\`\`\`
|
|
1563
|
+
|
|
1564
|
+
## 2. Strategic Chunking for Complex Designs
|
|
1565
|
+
- Divide replacement tasks into logical content chunks based on design structure
|
|
1566
|
+
- Use one of these chunking strategies that best fits the design:
|
|
1567
|
+
* **Structural Chunking**: Table rows/columns, list sections, card groups
|
|
1568
|
+
* **Spatial Chunking**: Top-to-bottom, left-to-right in screen areas
|
|
1569
|
+
* **Semantic Chunking**: Content related to the same topic or functionality
|
|
1570
|
+
* **Component-Based Chunking**: Process similar component instances together
|
|
1571
|
+
|
|
1572
|
+
## 3. Progressive Replacement with Verification
|
|
1573
|
+
- Create a safe copy of the node for text replacement
|
|
1574
|
+
- Replace text chunk by chunk with continuous progress updates
|
|
1575
|
+
- After each chunk is processed:
|
|
1576
|
+
* Export that section as a small, manageable image
|
|
1577
|
+
* Verify text fits properly and maintain design integrity
|
|
1578
|
+
* Fix issues before proceeding to the next chunk
|
|
1579
|
+
|
|
1580
|
+
\`\`\`
|
|
1581
|
+
// Clone the node to create a safe copy
|
|
1582
|
+
clone_node(nodeId: "selected-node-id", x: [new-x], y: [new-y])
|
|
1583
|
+
|
|
1584
|
+
// Replace text chunk by chunk
|
|
1585
|
+
set_multiple_text_contents(
|
|
1586
|
+
nodeId: "parent-node-id",
|
|
1587
|
+
text: [
|
|
1588
|
+
{ nodeId: "node-id-1", text: "New text 1" },
|
|
1589
|
+
// More nodes in this chunk...
|
|
1590
|
+
]
|
|
1591
|
+
)
|
|
1592
|
+
|
|
1593
|
+
// Verify chunk with small, targeted image exports
|
|
1594
|
+
export_node_as_image(nodeId: "chunk-node-id", format: "PNG", scale: 0.5)
|
|
1595
|
+
\`\`\`
|
|
1596
|
+
|
|
1597
|
+
## 4. Intelligent Handling for Table Data
|
|
1598
|
+
- For tabular content:
|
|
1599
|
+
* Process one row or column at a time
|
|
1600
|
+
* Maintain alignment and spacing between cells
|
|
1601
|
+
* Consider conditional formatting based on cell content
|
|
1602
|
+
* Preserve header/data relationships
|
|
1603
|
+
|
|
1604
|
+
## 5. Smart Text Adaptation
|
|
1605
|
+
- Adaptively handle text based on container constraints:
|
|
1606
|
+
* Auto-detect space constraints and adjust text length
|
|
1607
|
+
* Apply line breaks at appropriate linguistic points
|
|
1608
|
+
* Maintain text hierarchy and emphasis
|
|
1609
|
+
* Consider font scaling for critical content that must fit
|
|
1610
|
+
|
|
1611
|
+
## 6. Progressive Feedback Loop
|
|
1612
|
+
- Establish a continuous feedback loop during replacement:
|
|
1613
|
+
* Real-time progress updates (0-100%)
|
|
1614
|
+
* Small image exports after each chunk for verification
|
|
1615
|
+
* Issues identified early and resolved incrementally
|
|
1616
|
+
* Quick adjustments applied to subsequent chunks
|
|
1617
|
+
|
|
1618
|
+
## 7. Final Verification & Context-Aware QA
|
|
1619
|
+
- After all chunks are processed:
|
|
1620
|
+
* Export the entire design at reduced scale for final verification
|
|
1621
|
+
* Check for cross-chunk consistency issues
|
|
1622
|
+
* Verify proper text flow between different sections
|
|
1623
|
+
* Ensure design harmony across the full composition
|
|
1624
|
+
|
|
1625
|
+
## 8. Chunk-Specific Export Scale Guidelines
|
|
1626
|
+
- Scale exports appropriately based on chunk size:
|
|
1627
|
+
* Small chunks (1-5 elements): scale 1.0
|
|
1628
|
+
* Medium chunks (6-20 elements): scale 0.7
|
|
1629
|
+
* Large chunks (21-50 elements): scale 0.5
|
|
1630
|
+
* Very large chunks (50+ elements): scale 0.3
|
|
1631
|
+
* Full design verification: scale 0.2
|
|
1632
|
+
|
|
1633
|
+
## Sample Chunking Strategy for Common Design Types
|
|
1634
|
+
|
|
1635
|
+
### Tables
|
|
1636
|
+
- Process by logical rows (5-10 rows per chunk)
|
|
1637
|
+
- Alternative: Process by column for columnar analysis
|
|
1638
|
+
- Tip: Always include header row in first chunk for reference
|
|
1639
|
+
|
|
1640
|
+
### Card Lists
|
|
1641
|
+
- Group 3-5 similar cards per chunk
|
|
1642
|
+
- Process entire cards to maintain internal consistency
|
|
1643
|
+
- Verify text-to-image ratio within cards after each chunk
|
|
1644
|
+
|
|
1645
|
+
### Forms
|
|
1646
|
+
- Group related fields (e.g., "Personal Information", "Payment Details")
|
|
1647
|
+
- Process labels and input fields together
|
|
1648
|
+
- Ensure validation messages and hints are updated with their fields
|
|
1649
|
+
|
|
1650
|
+
### Navigation & Menus
|
|
1651
|
+
- Process hierarchical levels together (main menu, submenu)
|
|
1652
|
+
- Respect information architecture relationships
|
|
1653
|
+
- Verify menu fit and alignment after replacement
|
|
1654
|
+
|
|
1655
|
+
## Best Practices
|
|
1656
|
+
- **Preserve Design Intent**: Always prioritize design integrity
|
|
1657
|
+
- **Structural Consistency**: Maintain alignment, spacing, and hierarchy
|
|
1658
|
+
- **Visual Feedback**: Verify each chunk visually before proceeding
|
|
1659
|
+
- **Incremental Improvement**: Learn from each chunk to improve subsequent ones
|
|
1660
|
+
- **Balance Automation & Control**: Let AI handle repetitive replacements but maintain oversight
|
|
1661
|
+
- **Respect Content Relationships**: Keep related content consistent across chunks
|
|
1662
|
+
|
|
1663
|
+
Remember that text is never just text\u2014it's a core design element that must work harmoniously with the overall composition. This chunk-based strategy allows you to methodically transform text while maintaining design integrity.`
|
|
1664
|
+
}
|
|
1665
|
+
}
|
|
1666
|
+
],
|
|
1667
|
+
description: "Systematic approach for replacing text in Figma designs"
|
|
1668
|
+
};
|
|
1669
|
+
}
|
|
1670
|
+
);
|
|
1671
|
+
server.tool(
|
|
1672
|
+
"set_multiple_text_contents",
|
|
1673
|
+
"Set multiple text contents parallelly in a node",
|
|
1674
|
+
{
|
|
1675
|
+
nodeId: z.string().describe("The ID of the node containing the text nodes to replace"),
|
|
1676
|
+
text: z.array(
|
|
1677
|
+
z.object({
|
|
1678
|
+
nodeId: z.string().describe("The ID of the text node"),
|
|
1679
|
+
text: z.string().describe("The replacement text")
|
|
1680
|
+
})
|
|
1681
|
+
).describe("Array of text node IDs and their replacement texts")
|
|
1682
|
+
},
|
|
1683
|
+
async ({ nodeId, text }) => {
|
|
1684
|
+
try {
|
|
1685
|
+
if (!text || text.length === 0) {
|
|
1686
|
+
return {
|
|
1687
|
+
content: [
|
|
1688
|
+
{
|
|
1689
|
+
type: "text",
|
|
1690
|
+
text: "No text provided"
|
|
1691
|
+
}
|
|
1692
|
+
]
|
|
1693
|
+
};
|
|
1694
|
+
}
|
|
1695
|
+
const initialStatus = {
|
|
1696
|
+
type: "text",
|
|
1697
|
+
text: `Starting text replacement for ${text.length} nodes. This will be processed in batches of 5...`
|
|
1698
|
+
};
|
|
1699
|
+
let totalProcessed = 0;
|
|
1700
|
+
const totalToProcess = text.length;
|
|
1701
|
+
const result = await sendCommandToFigma("set_multiple_text_contents", {
|
|
1702
|
+
nodeId,
|
|
1703
|
+
text
|
|
1704
|
+
});
|
|
1705
|
+
const typedResult = result;
|
|
1706
|
+
const success = typedResult.replacementsApplied && typedResult.replacementsApplied > 0;
|
|
1707
|
+
const progressText = `
|
|
1708
|
+
Text replacement completed:
|
|
1709
|
+
- ${typedResult.replacementsApplied || 0} of ${totalToProcess} successfully updated
|
|
1710
|
+
- ${typedResult.replacementsFailed || 0} failed
|
|
1711
|
+
- Processed in ${typedResult.completedInChunks || 1} batches
|
|
1712
|
+
`;
|
|
1713
|
+
const detailedResults = typedResult.results || [];
|
|
1714
|
+
const failedResults = detailedResults.filter((item) => !item.success);
|
|
1715
|
+
let detailedResponse = "";
|
|
1716
|
+
if (failedResults.length > 0) {
|
|
1717
|
+
detailedResponse = `
|
|
1718
|
+
|
|
1719
|
+
Nodes that failed:
|
|
1720
|
+
${failedResults.map(
|
|
1721
|
+
(item) => `- ${item.nodeId}: ${item.error || "Unknown error"}`
|
|
1722
|
+
).join("\n")}`;
|
|
1723
|
+
}
|
|
1724
|
+
return {
|
|
1725
|
+
content: [
|
|
1726
|
+
initialStatus,
|
|
1727
|
+
{
|
|
1728
|
+
type: "text",
|
|
1729
|
+
text: progressText + detailedResponse
|
|
1730
|
+
}
|
|
1731
|
+
]
|
|
1732
|
+
};
|
|
1733
|
+
} catch (error) {
|
|
1734
|
+
return {
|
|
1735
|
+
content: [
|
|
1736
|
+
{
|
|
1737
|
+
type: "text",
|
|
1738
|
+
text: `Error setting multiple text contents: ${error instanceof Error ? error.message : String(error)}`
|
|
1739
|
+
}
|
|
1740
|
+
]
|
|
1741
|
+
};
|
|
1742
|
+
}
|
|
1743
|
+
}
|
|
1744
|
+
);
|
|
1745
|
+
server.prompt(
|
|
1746
|
+
"annotation_conversion_strategy",
|
|
1747
|
+
"Strategy for converting manual annotations to Figma's native annotations",
|
|
1748
|
+
(extra) => {
|
|
1749
|
+
return {
|
|
1750
|
+
messages: [
|
|
1751
|
+
{
|
|
1752
|
+
role: "assistant",
|
|
1753
|
+
content: {
|
|
1754
|
+
type: "text",
|
|
1755
|
+
text: `# Automatic Annotation Conversion
|
|
1756
|
+
|
|
1757
|
+
## Process Overview
|
|
1758
|
+
|
|
1759
|
+
The process of converting manual annotations (numbered/alphabetical indicators with connected descriptions) to Figma's native annotations:
|
|
1760
|
+
|
|
1761
|
+
1. Get selected frame/component information
|
|
1762
|
+
2. Scan and collect all annotation text nodes
|
|
1763
|
+
3. Scan target UI elements (components, instances, frames)
|
|
1764
|
+
4. Match annotations to appropriate UI elements
|
|
1765
|
+
5. Apply native Figma annotations
|
|
1766
|
+
|
|
1767
|
+
## Step 1: Get Selection and Initial Setup
|
|
1768
|
+
|
|
1769
|
+
First, get the selected frame or component that contains annotations:
|
|
1770
|
+
|
|
1771
|
+
\`\`\`typescript
|
|
1772
|
+
// Get the selected frame/component
|
|
1773
|
+
const selection = await get_selection();
|
|
1774
|
+
const selectedNodeId = selection[0].id
|
|
1775
|
+
|
|
1776
|
+
// Get available annotation categories for later use
|
|
1777
|
+
const annotationData = await get_annotations({
|
|
1778
|
+
nodeId: selectedNodeId,
|
|
1779
|
+
includeCategories: true
|
|
1780
|
+
});
|
|
1781
|
+
const categories = annotationData.categories;
|
|
1782
|
+
\`\`\`
|
|
1783
|
+
|
|
1784
|
+
## Step 2: Scan Annotation Text Nodes
|
|
1785
|
+
|
|
1786
|
+
Scan all text nodes to identify annotations and their descriptions:
|
|
1787
|
+
|
|
1788
|
+
\`\`\`typescript
|
|
1789
|
+
// Get all text nodes in the selection
|
|
1790
|
+
const textNodes = await scan_text_nodes({
|
|
1791
|
+
nodeId: selectedNodeId
|
|
1792
|
+
});
|
|
1793
|
+
|
|
1794
|
+
// Filter and group annotation markers and descriptions
|
|
1795
|
+
|
|
1796
|
+
// Markers typically have these characteristics:
|
|
1797
|
+
// - Short text content (usually single digit/letter)
|
|
1798
|
+
// - Specific font styles (often bold)
|
|
1799
|
+
// - Located in a container with "Marker" or "Dot" in the name
|
|
1800
|
+
// - Have a clear naming pattern (e.g., "1", "2", "3" or "A", "B", "C")
|
|
1801
|
+
|
|
1802
|
+
|
|
1803
|
+
// Identify description nodes
|
|
1804
|
+
// Usually longer text nodes near markers or with matching numbers in path
|
|
1805
|
+
|
|
1806
|
+
\`\`\`
|
|
1807
|
+
|
|
1808
|
+
## Step 3: Scan Target UI Elements
|
|
1809
|
+
|
|
1810
|
+
Get all potential target elements that annotations might refer to:
|
|
1811
|
+
|
|
1812
|
+
\`\`\`typescript
|
|
1813
|
+
// Scan for all UI elements that could be annotation targets
|
|
1814
|
+
const targetNodes = await scan_nodes_by_types({
|
|
1815
|
+
nodeId: selectedNodeId,
|
|
1816
|
+
types: [
|
|
1817
|
+
"COMPONENT",
|
|
1818
|
+
"INSTANCE",
|
|
1819
|
+
"FRAME"
|
|
1820
|
+
]
|
|
1821
|
+
});
|
|
1822
|
+
\`\`\`
|
|
1823
|
+
|
|
1824
|
+
## Step 4: Match Annotations to Targets
|
|
1825
|
+
|
|
1826
|
+
Match each annotation to its target UI element using these strategies in order of priority:
|
|
1827
|
+
|
|
1828
|
+
1. **Path-Based Matching**:
|
|
1829
|
+
- Look at the marker's parent container name in the Figma layer hierarchy
|
|
1830
|
+
- Remove any "Marker:" or "Annotation:" prefixes from the parent name
|
|
1831
|
+
- Find UI elements that share the same parent name or have it in their path
|
|
1832
|
+
- This works well when markers are grouped with their target elements
|
|
1833
|
+
|
|
1834
|
+
2. **Name-Based Matching**:
|
|
1835
|
+
- Extract key terms from the annotation description
|
|
1836
|
+
- Look for UI elements whose names contain these key terms
|
|
1837
|
+
- Consider both exact matches and semantic similarities
|
|
1838
|
+
- Particularly effective for form fields, buttons, and labeled components
|
|
1839
|
+
|
|
1840
|
+
3. **Proximity-Based Matching** (fallback):
|
|
1841
|
+
- Calculate the center point of the marker
|
|
1842
|
+
- Find the closest UI element by measuring distances to element centers
|
|
1843
|
+
- Consider the marker's position relative to nearby elements
|
|
1844
|
+
- Use this method when other matching strategies fail
|
|
1845
|
+
|
|
1846
|
+
Additional Matching Considerations:
|
|
1847
|
+
- Give higher priority to matches found through path-based matching
|
|
1848
|
+
- Consider the type of UI element when evaluating matches
|
|
1849
|
+
- Take into account the annotation's context and content
|
|
1850
|
+
- Use a combination of strategies for more accurate matching
|
|
1851
|
+
|
|
1852
|
+
## Step 5: Apply Native Annotations
|
|
1853
|
+
|
|
1854
|
+
Convert matched annotations to Figma's native annotations using batch processing:
|
|
1855
|
+
|
|
1856
|
+
\`\`\`typescript
|
|
1857
|
+
// Prepare annotations array for batch processing
|
|
1858
|
+
const annotationsToApply = Object.values(annotations).map(({ marker, description }) => {
|
|
1859
|
+
// Find target using multiple strategies
|
|
1860
|
+
const target =
|
|
1861
|
+
findTargetByPath(marker, targetNodes) ||
|
|
1862
|
+
findTargetByName(description, targetNodes) ||
|
|
1863
|
+
findTargetByProximity(marker, targetNodes);
|
|
1864
|
+
|
|
1865
|
+
if (target) {
|
|
1866
|
+
// Determine appropriate category based on content
|
|
1867
|
+
const category = determineCategory(description.characters, categories);
|
|
1868
|
+
|
|
1869
|
+
// Determine appropriate additional annotationProperty based on content
|
|
1870
|
+
const annotationProperty = determineProperties(description.characters, target.type);
|
|
1871
|
+
|
|
1872
|
+
return {
|
|
1873
|
+
nodeId: target.id,
|
|
1874
|
+
labelMarkdown: description.characters,
|
|
1875
|
+
categoryId: category.id,
|
|
1876
|
+
properties: annotationProperty
|
|
1877
|
+
};
|
|
1878
|
+
}
|
|
1879
|
+
return null;
|
|
1880
|
+
}).filter(Boolean); // Remove null entries
|
|
1881
|
+
|
|
1882
|
+
// Apply annotations in batches using set_multiple_annotations
|
|
1883
|
+
if (annotationsToApply.length > 0) {
|
|
1884
|
+
await set_multiple_annotations({
|
|
1885
|
+
nodeId: selectedNodeId,
|
|
1886
|
+
annotations: annotationsToApply
|
|
1887
|
+
});
|
|
1888
|
+
}
|
|
1889
|
+
\`\`\`
|
|
1890
|
+
|
|
1891
|
+
|
|
1892
|
+
This strategy focuses on practical implementation based on real-world usage patterns, emphasizing the importance of handling various UI elements as annotation targets, not just text nodes.`
|
|
1893
|
+
}
|
|
1894
|
+
}
|
|
1895
|
+
],
|
|
1896
|
+
description: "Strategy for converting manual annotations to Figma's native annotations"
|
|
1897
|
+
};
|
|
1898
|
+
}
|
|
1899
|
+
);
|
|
1900
|
+
server.prompt(
|
|
1901
|
+
"swap_overrides_instances",
|
|
1902
|
+
"Guide to swap instance overrides between instances",
|
|
1903
|
+
(extra) => {
|
|
1904
|
+
return {
|
|
1905
|
+
messages: [
|
|
1906
|
+
{
|
|
1907
|
+
role: "assistant",
|
|
1908
|
+
content: {
|
|
1909
|
+
type: "text",
|
|
1910
|
+
text: `# Swap Component Instance and Override Strategy
|
|
1911
|
+
|
|
1912
|
+
## Overview
|
|
1913
|
+
This strategy enables transferring content and property overrides from a source instance to one or more target instances in Figma, maintaining design consistency while reducing manual work.
|
|
1914
|
+
|
|
1915
|
+
## Step-by-Step Process
|
|
1916
|
+
|
|
1917
|
+
### 1. Selection Analysis
|
|
1918
|
+
- Use \`get_selection()\` to identify the parent component or selected instances
|
|
1919
|
+
- For parent components, scan for instances with \`scan_nodes_by_types({ nodeId: "parent-id", types: ["INSTANCE"] })\`
|
|
1920
|
+
- Identify custom slots by name patterns (e.g. "Custom Slot*" or "Instance Slot") or by examining text content
|
|
1921
|
+
- Determine which is the source instance (with content to copy) and which are targets (where to apply content)
|
|
1922
|
+
|
|
1923
|
+
### 2. Extract Source Overrides
|
|
1924
|
+
- Use \`get_instance_overrides()\` to extract customizations from the source instance
|
|
1925
|
+
- This captures text content, property values, and style overrides
|
|
1926
|
+
- Command syntax: \`get_instance_overrides({ nodeId: "source-instance-id" })\`
|
|
1927
|
+
- Look for successful response like "Got component information from [instance name]"
|
|
1928
|
+
|
|
1929
|
+
### 3. Apply Overrides to Targets
|
|
1930
|
+
- Apply captured overrides using \`set_instance_overrides()\`
|
|
1931
|
+
- Command syntax:
|
|
1932
|
+
\`\`\`
|
|
1933
|
+
set_instance_overrides({
|
|
1934
|
+
sourceInstanceId: "source-instance-id",
|
|
1935
|
+
targetNodeIds: ["target-id-1", "target-id-2", ...]
|
|
1936
|
+
})
|
|
1937
|
+
\`\`\`
|
|
1938
|
+
|
|
1939
|
+
### 4. Verification
|
|
1940
|
+
- Verify results with \`get_node_info()\` or \`read_my_design()\`
|
|
1941
|
+
- Confirm text content and style overrides have transferred successfully
|
|
1942
|
+
|
|
1943
|
+
## Key Tips
|
|
1944
|
+
- Always join the appropriate channel first with \`join_channel()\`
|
|
1945
|
+
- When working with multiple targets, check the full selection with \`get_selection()\`
|
|
1946
|
+
- Preserve component relationships by using instance overrides rather than direct text manipulation`
|
|
1947
|
+
}
|
|
1948
|
+
}
|
|
1949
|
+
],
|
|
1950
|
+
description: "Strategy for transferring overrides between component instances in Figma"
|
|
1951
|
+
};
|
|
1952
|
+
}
|
|
1953
|
+
);
|
|
1954
|
+
server.tool(
|
|
1955
|
+
"set_layout_mode",
|
|
1956
|
+
"Set the layout mode and wrap behavior of a frame in Figma",
|
|
1957
|
+
{
|
|
1958
|
+
nodeId: z.string().describe("The ID of the frame to modify"),
|
|
1959
|
+
layoutMode: z.enum(["NONE", "HORIZONTAL", "VERTICAL"]).describe("Layout mode for the frame"),
|
|
1960
|
+
layoutWrap: z.enum(["NO_WRAP", "WRAP"]).optional().describe("Whether the auto-layout frame wraps its children")
|
|
1961
|
+
},
|
|
1962
|
+
async ({ nodeId, layoutMode, layoutWrap }) => {
|
|
1963
|
+
try {
|
|
1964
|
+
const result = await sendCommandToFigma("set_layout_mode", {
|
|
1965
|
+
nodeId,
|
|
1966
|
+
layoutMode,
|
|
1967
|
+
layoutWrap: layoutWrap || "NO_WRAP"
|
|
1968
|
+
});
|
|
1969
|
+
const typedResult = result;
|
|
1970
|
+
return {
|
|
1971
|
+
content: [
|
|
1972
|
+
{
|
|
1973
|
+
type: "text",
|
|
1974
|
+
text: `Set layout mode of frame "${typedResult.name}" to ${layoutMode}${layoutWrap ? ` with ${layoutWrap}` : ""}`
|
|
1975
|
+
}
|
|
1976
|
+
]
|
|
1977
|
+
};
|
|
1978
|
+
} catch (error) {
|
|
1979
|
+
return {
|
|
1980
|
+
content: [
|
|
1981
|
+
{
|
|
1982
|
+
type: "text",
|
|
1983
|
+
text: `Error setting layout mode: ${error instanceof Error ? error.message : String(error)}`
|
|
1984
|
+
}
|
|
1985
|
+
]
|
|
1986
|
+
};
|
|
1987
|
+
}
|
|
1988
|
+
}
|
|
1989
|
+
);
|
|
1990
|
+
server.tool(
|
|
1991
|
+
"set_padding",
|
|
1992
|
+
"Set padding values for an auto-layout frame in Figma",
|
|
1993
|
+
{
|
|
1994
|
+
nodeId: z.string().describe("The ID of the frame to modify"),
|
|
1995
|
+
paddingTop: z.number().optional().describe("Top padding value"),
|
|
1996
|
+
paddingRight: z.number().optional().describe("Right padding value"),
|
|
1997
|
+
paddingBottom: z.number().optional().describe("Bottom padding value"),
|
|
1998
|
+
paddingLeft: z.number().optional().describe("Left padding value")
|
|
1999
|
+
},
|
|
2000
|
+
async ({ nodeId, paddingTop, paddingRight, paddingBottom, paddingLeft }) => {
|
|
2001
|
+
try {
|
|
2002
|
+
const result = await sendCommandToFigma("set_padding", {
|
|
2003
|
+
nodeId,
|
|
2004
|
+
paddingTop,
|
|
2005
|
+
paddingRight,
|
|
2006
|
+
paddingBottom,
|
|
2007
|
+
paddingLeft
|
|
2008
|
+
});
|
|
2009
|
+
const typedResult = result;
|
|
2010
|
+
const paddingMessages = [];
|
|
2011
|
+
if (paddingTop !== void 0) paddingMessages.push(`top: ${paddingTop}`);
|
|
2012
|
+
if (paddingRight !== void 0) paddingMessages.push(`right: ${paddingRight}`);
|
|
2013
|
+
if (paddingBottom !== void 0) paddingMessages.push(`bottom: ${paddingBottom}`);
|
|
2014
|
+
if (paddingLeft !== void 0) paddingMessages.push(`left: ${paddingLeft}`);
|
|
2015
|
+
const paddingText = paddingMessages.length > 0 ? `padding (${paddingMessages.join(", ")})` : "padding";
|
|
2016
|
+
return {
|
|
2017
|
+
content: [
|
|
2018
|
+
{
|
|
2019
|
+
type: "text",
|
|
2020
|
+
text: `Set ${paddingText} for frame "${typedResult.name}"`
|
|
2021
|
+
}
|
|
2022
|
+
]
|
|
2023
|
+
};
|
|
2024
|
+
} catch (error) {
|
|
2025
|
+
return {
|
|
2026
|
+
content: [
|
|
2027
|
+
{
|
|
2028
|
+
type: "text",
|
|
2029
|
+
text: `Error setting padding: ${error instanceof Error ? error.message : String(error)}`
|
|
2030
|
+
}
|
|
2031
|
+
]
|
|
2032
|
+
};
|
|
2033
|
+
}
|
|
2034
|
+
}
|
|
2035
|
+
);
|
|
2036
|
+
server.tool(
|
|
2037
|
+
"set_axis_align",
|
|
2038
|
+
"Set primary and counter axis alignment for an auto-layout frame in Figma",
|
|
2039
|
+
{
|
|
2040
|
+
nodeId: z.string().describe("The ID of the frame to modify"),
|
|
2041
|
+
primaryAxisAlignItems: z.enum(["MIN", "MAX", "CENTER", "SPACE_BETWEEN"]).optional().describe("Primary axis alignment (MIN/MAX = left/right in horizontal, top/bottom in vertical). Note: When set to SPACE_BETWEEN, itemSpacing will be ignored as children will be evenly spaced."),
|
|
2042
|
+
counterAxisAlignItems: z.enum(["MIN", "MAX", "CENTER", "BASELINE"]).optional().describe("Counter axis alignment (MIN/MAX = top/bottom in horizontal, left/right in vertical)")
|
|
2043
|
+
},
|
|
2044
|
+
async ({ nodeId, primaryAxisAlignItems, counterAxisAlignItems }) => {
|
|
2045
|
+
try {
|
|
2046
|
+
const result = await sendCommandToFigma("set_axis_align", {
|
|
2047
|
+
nodeId,
|
|
2048
|
+
primaryAxisAlignItems,
|
|
2049
|
+
counterAxisAlignItems
|
|
2050
|
+
});
|
|
2051
|
+
const typedResult = result;
|
|
2052
|
+
const alignMessages = [];
|
|
2053
|
+
if (primaryAxisAlignItems !== void 0) alignMessages.push(`primary: ${primaryAxisAlignItems}`);
|
|
2054
|
+
if (counterAxisAlignItems !== void 0) alignMessages.push(`counter: ${counterAxisAlignItems}`);
|
|
2055
|
+
const alignText = alignMessages.length > 0 ? `axis alignment (${alignMessages.join(", ")})` : "axis alignment";
|
|
2056
|
+
return {
|
|
2057
|
+
content: [
|
|
2058
|
+
{
|
|
2059
|
+
type: "text",
|
|
2060
|
+
text: `Set ${alignText} for frame "${typedResult.name}"`
|
|
2061
|
+
}
|
|
2062
|
+
]
|
|
2063
|
+
};
|
|
2064
|
+
} catch (error) {
|
|
2065
|
+
return {
|
|
2066
|
+
content: [
|
|
2067
|
+
{
|
|
2068
|
+
type: "text",
|
|
2069
|
+
text: `Error setting axis alignment: ${error instanceof Error ? error.message : String(error)}`
|
|
2070
|
+
}
|
|
2071
|
+
]
|
|
2072
|
+
};
|
|
2073
|
+
}
|
|
2074
|
+
}
|
|
2075
|
+
);
|
|
2076
|
+
server.tool(
|
|
2077
|
+
"set_layout_sizing",
|
|
2078
|
+
"Set horizontal and vertical sizing modes for an auto-layout frame in Figma",
|
|
2079
|
+
{
|
|
2080
|
+
nodeId: z.string().describe("The ID of the frame to modify"),
|
|
2081
|
+
layoutSizingHorizontal: z.enum(["FIXED", "HUG", "FILL"]).optional().describe("Horizontal sizing mode (HUG for frames/text only, FILL for auto-layout children only)"),
|
|
2082
|
+
layoutSizingVertical: z.enum(["FIXED", "HUG", "FILL"]).optional().describe("Vertical sizing mode (HUG for frames/text only, FILL for auto-layout children only)")
|
|
2083
|
+
},
|
|
2084
|
+
async ({ nodeId, layoutSizingHorizontal, layoutSizingVertical }) => {
|
|
2085
|
+
try {
|
|
2086
|
+
const result = await sendCommandToFigma("set_layout_sizing", {
|
|
2087
|
+
nodeId,
|
|
2088
|
+
layoutSizingHorizontal,
|
|
2089
|
+
layoutSizingVertical
|
|
2090
|
+
});
|
|
2091
|
+
const typedResult = result;
|
|
2092
|
+
const sizingMessages = [];
|
|
2093
|
+
if (layoutSizingHorizontal !== void 0) sizingMessages.push(`horizontal: ${layoutSizingHorizontal}`);
|
|
2094
|
+
if (layoutSizingVertical !== void 0) sizingMessages.push(`vertical: ${layoutSizingVertical}`);
|
|
2095
|
+
const sizingText = sizingMessages.length > 0 ? `layout sizing (${sizingMessages.join(", ")})` : "layout sizing";
|
|
2096
|
+
return {
|
|
2097
|
+
content: [
|
|
2098
|
+
{
|
|
2099
|
+
type: "text",
|
|
2100
|
+
text: `Set ${sizingText} for frame "${typedResult.name}"`
|
|
2101
|
+
}
|
|
2102
|
+
]
|
|
2103
|
+
};
|
|
2104
|
+
} catch (error) {
|
|
2105
|
+
return {
|
|
2106
|
+
content: [
|
|
2107
|
+
{
|
|
2108
|
+
type: "text",
|
|
2109
|
+
text: `Error setting layout sizing: ${error instanceof Error ? error.message : String(error)}`
|
|
2110
|
+
}
|
|
2111
|
+
]
|
|
2112
|
+
};
|
|
2113
|
+
}
|
|
2114
|
+
}
|
|
2115
|
+
);
|
|
2116
|
+
server.tool(
|
|
2117
|
+
"set_item_spacing",
|
|
2118
|
+
"Set distance between children in an auto-layout frame",
|
|
2119
|
+
{
|
|
2120
|
+
nodeId: z.string().describe("The ID of the frame to modify"),
|
|
2121
|
+
itemSpacing: z.number().optional().describe("Distance between children. Note: This value will be ignored if primaryAxisAlignItems is set to SPACE_BETWEEN."),
|
|
2122
|
+
counterAxisSpacing: z.number().optional().describe("Distance between wrapped rows/columns. Only works when layoutWrap is set to WRAP.")
|
|
2123
|
+
},
|
|
2124
|
+
async ({ nodeId, itemSpacing, counterAxisSpacing }) => {
|
|
2125
|
+
try {
|
|
2126
|
+
const params = { nodeId };
|
|
2127
|
+
if (itemSpacing !== void 0) params.itemSpacing = itemSpacing;
|
|
2128
|
+
if (counterAxisSpacing !== void 0) params.counterAxisSpacing = counterAxisSpacing;
|
|
2129
|
+
const result = await sendCommandToFigma("set_item_spacing", params);
|
|
2130
|
+
const typedResult = result;
|
|
2131
|
+
let message = `Updated spacing for frame "${typedResult.name}":`;
|
|
2132
|
+
if (itemSpacing !== void 0) message += ` itemSpacing=${itemSpacing}`;
|
|
2133
|
+
if (counterAxisSpacing !== void 0) message += ` counterAxisSpacing=${counterAxisSpacing}`;
|
|
2134
|
+
return {
|
|
2135
|
+
content: [
|
|
2136
|
+
{
|
|
2137
|
+
type: "text",
|
|
2138
|
+
text: message
|
|
2139
|
+
}
|
|
2140
|
+
]
|
|
2141
|
+
};
|
|
2142
|
+
} catch (error) {
|
|
2143
|
+
return {
|
|
2144
|
+
content: [
|
|
2145
|
+
{
|
|
2146
|
+
type: "text",
|
|
2147
|
+
text: `Error setting spacing: ${error instanceof Error ? error.message : String(error)}`
|
|
2148
|
+
}
|
|
2149
|
+
]
|
|
2150
|
+
};
|
|
2151
|
+
}
|
|
2152
|
+
}
|
|
2153
|
+
);
|
|
2154
|
+
server.tool(
|
|
2155
|
+
"get_reactions",
|
|
2156
|
+
"Get Figma Prototyping Reactions from multiple nodes. CRITICAL: The output MUST be processed using the 'reaction_to_connector_strategy' prompt IMMEDIATELY to generate parameters for connector lines via the 'create_connections' tool.",
|
|
2157
|
+
{
|
|
2158
|
+
nodeIds: z.array(z.string()).describe("Array of node IDs to get reactions from")
|
|
2159
|
+
},
|
|
2160
|
+
async ({ nodeIds }) => {
|
|
2161
|
+
try {
|
|
2162
|
+
const result = await sendCommandToFigma("get_reactions", { nodeIds });
|
|
2163
|
+
return {
|
|
2164
|
+
content: [
|
|
2165
|
+
{
|
|
2166
|
+
type: "text",
|
|
2167
|
+
text: JSON.stringify(result)
|
|
2168
|
+
},
|
|
2169
|
+
{
|
|
2170
|
+
type: "text",
|
|
2171
|
+
text: "IMPORTANT: You MUST now use the reaction data above and follow the `reaction_to_connector_strategy` prompt to prepare the parameters for the `create_connections` tool call. This is a required next step."
|
|
2172
|
+
}
|
|
2173
|
+
],
|
|
2174
|
+
followUp: {
|
|
2175
|
+
type: "prompt",
|
|
2176
|
+
prompt: "reaction_to_connector_strategy"
|
|
2177
|
+
}
|
|
2178
|
+
};
|
|
2179
|
+
} catch (error) {
|
|
2180
|
+
return {
|
|
2181
|
+
content: [
|
|
2182
|
+
{
|
|
2183
|
+
type: "text",
|
|
2184
|
+
text: `Error getting reactions: ${error instanceof Error ? error.message : String(error)}`
|
|
2185
|
+
}
|
|
2186
|
+
]
|
|
2187
|
+
};
|
|
2188
|
+
}
|
|
2189
|
+
}
|
|
2190
|
+
);
|
|
2191
|
+
server.tool(
|
|
2192
|
+
"set_default_connector",
|
|
2193
|
+
"Set a copied connector node as the default connector",
|
|
2194
|
+
{
|
|
2195
|
+
connectorId: z.string().optional().describe("The ID of the connector node to set as default")
|
|
2196
|
+
},
|
|
2197
|
+
async ({ connectorId }) => {
|
|
2198
|
+
try {
|
|
2199
|
+
const result = await sendCommandToFigma("set_default_connector", {
|
|
2200
|
+
connectorId
|
|
2201
|
+
});
|
|
2202
|
+
return {
|
|
2203
|
+
content: [
|
|
2204
|
+
{
|
|
2205
|
+
type: "text",
|
|
2206
|
+
text: `Default connector set: ${JSON.stringify(result)}`
|
|
2207
|
+
}
|
|
2208
|
+
]
|
|
2209
|
+
};
|
|
2210
|
+
} catch (error) {
|
|
2211
|
+
return {
|
|
2212
|
+
content: [
|
|
2213
|
+
{
|
|
2214
|
+
type: "text",
|
|
2215
|
+
text: `Error setting default connector: ${error instanceof Error ? error.message : String(error)}`
|
|
2216
|
+
}
|
|
2217
|
+
]
|
|
2218
|
+
};
|
|
2219
|
+
}
|
|
2220
|
+
}
|
|
2221
|
+
);
|
|
2222
|
+
server.tool(
|
|
2223
|
+
"create_connections",
|
|
2224
|
+
"Create connections between nodes using the default connector style",
|
|
2225
|
+
{
|
|
2226
|
+
connections: z.array(z.object({
|
|
2227
|
+
startNodeId: z.string().describe("ID of the starting node"),
|
|
2228
|
+
endNodeId: z.string().describe("ID of the ending node"),
|
|
2229
|
+
text: z.string().optional().describe("Optional text to display on the connector")
|
|
2230
|
+
})).describe("Array of node connections to create")
|
|
2231
|
+
},
|
|
2232
|
+
async ({ connections }) => {
|
|
2233
|
+
try {
|
|
2234
|
+
if (!connections || connections.length === 0) {
|
|
2235
|
+
return {
|
|
2236
|
+
content: [
|
|
2237
|
+
{
|
|
2238
|
+
type: "text",
|
|
2239
|
+
text: "No connections provided"
|
|
2240
|
+
}
|
|
2241
|
+
]
|
|
2242
|
+
};
|
|
2243
|
+
}
|
|
2244
|
+
const result = await sendCommandToFigma("create_connections", {
|
|
2245
|
+
connections
|
|
2246
|
+
});
|
|
2247
|
+
return {
|
|
2248
|
+
content: [
|
|
2249
|
+
{
|
|
2250
|
+
type: "text",
|
|
2251
|
+
text: `Created ${connections.length} connections: ${JSON.stringify(result)}`
|
|
2252
|
+
}
|
|
2253
|
+
]
|
|
2254
|
+
};
|
|
2255
|
+
} catch (error) {
|
|
2256
|
+
return {
|
|
2257
|
+
content: [
|
|
2258
|
+
{
|
|
2259
|
+
type: "text",
|
|
2260
|
+
text: `Error creating connections: ${error instanceof Error ? error.message : String(error)}`
|
|
2261
|
+
}
|
|
2262
|
+
]
|
|
2263
|
+
};
|
|
2264
|
+
}
|
|
2265
|
+
}
|
|
2266
|
+
);
|
|
2267
|
+
server.tool(
|
|
2268
|
+
"set_focus",
|
|
2269
|
+
"Set focus on a specific node in Figma by selecting it and scrolling viewport to it",
|
|
2270
|
+
{
|
|
2271
|
+
nodeId: z.string().describe("The ID of the node to focus on")
|
|
2272
|
+
},
|
|
2273
|
+
async ({ nodeId }) => {
|
|
2274
|
+
try {
|
|
2275
|
+
const result = await sendCommandToFigma("set_focus", { nodeId });
|
|
2276
|
+
const typedResult = result;
|
|
2277
|
+
return {
|
|
2278
|
+
content: [
|
|
2279
|
+
{
|
|
2280
|
+
type: "text",
|
|
2281
|
+
text: `Focused on node "${typedResult.name}" (ID: ${typedResult.id})`
|
|
2282
|
+
}
|
|
2283
|
+
]
|
|
2284
|
+
};
|
|
2285
|
+
} catch (error) {
|
|
2286
|
+
return {
|
|
2287
|
+
content: [
|
|
2288
|
+
{
|
|
2289
|
+
type: "text",
|
|
2290
|
+
text: `Error setting focus: ${error instanceof Error ? error.message : String(error)}`
|
|
2291
|
+
}
|
|
2292
|
+
]
|
|
2293
|
+
};
|
|
2294
|
+
}
|
|
2295
|
+
}
|
|
2296
|
+
);
|
|
2297
|
+
server.tool(
|
|
2298
|
+
"set_selections",
|
|
2299
|
+
"Set selection to multiple nodes in Figma and scroll viewport to show them",
|
|
2300
|
+
{
|
|
2301
|
+
nodeIds: z.array(z.string()).describe("Array of node IDs to select")
|
|
2302
|
+
},
|
|
2303
|
+
async ({ nodeIds }) => {
|
|
2304
|
+
try {
|
|
2305
|
+
const result = await sendCommandToFigma("set_selections", { nodeIds });
|
|
2306
|
+
const typedResult = result;
|
|
2307
|
+
return {
|
|
2308
|
+
content: [
|
|
2309
|
+
{
|
|
2310
|
+
type: "text",
|
|
2311
|
+
text: `Selected ${typedResult.count} nodes: ${typedResult.selectedNodes.map((node) => `"${node.name}" (${node.id})`).join(", ")}`
|
|
2312
|
+
}
|
|
2313
|
+
]
|
|
2314
|
+
};
|
|
2315
|
+
} catch (error) {
|
|
2316
|
+
return {
|
|
2317
|
+
content: [
|
|
2318
|
+
{
|
|
2319
|
+
type: "text",
|
|
2320
|
+
text: `Error setting selections: ${error instanceof Error ? error.message : String(error)}`
|
|
2321
|
+
}
|
|
2322
|
+
]
|
|
2323
|
+
};
|
|
2324
|
+
}
|
|
2325
|
+
}
|
|
2326
|
+
);
|
|
2327
|
+
server.prompt(
|
|
2328
|
+
"reaction_to_connector_strategy",
|
|
2329
|
+
"Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions'",
|
|
2330
|
+
(extra) => {
|
|
2331
|
+
return {
|
|
2332
|
+
messages: [
|
|
2333
|
+
{
|
|
2334
|
+
role: "assistant",
|
|
2335
|
+
content: {
|
|
2336
|
+
type: "text",
|
|
2337
|
+
text: `# Strategy: Convert Figma Prototype Reactions to Connector Lines
|
|
2338
|
+
|
|
2339
|
+
## Goal
|
|
2340
|
+
Process the JSON output from the \`get_reactions\` tool to generate an array of connection objects suitable for the \`create_connections\` tool. This visually represents prototype flows as connector lines on the Figma canvas.
|
|
2341
|
+
|
|
2342
|
+
## Input Data
|
|
2343
|
+
You will receive JSON data from the \`get_reactions\` tool. This data contains an array of nodes, each with potential reactions. A typical reaction object looks like this:
|
|
2344
|
+
\`\`\`json
|
|
2345
|
+
{
|
|
2346
|
+
"trigger": { "type": "ON_CLICK" },
|
|
2347
|
+
"action": {
|
|
2348
|
+
"type": "NAVIGATE",
|
|
2349
|
+
"destinationId": "destination-node-id",
|
|
2350
|
+
"navigationTransition": { ... },
|
|
2351
|
+
"preserveScrollPosition": false
|
|
2352
|
+
}
|
|
2353
|
+
}
|
|
2354
|
+
\`\`\`
|
|
2355
|
+
|
|
2356
|
+
## Step-by-Step Process
|
|
2357
|
+
|
|
2358
|
+
### 1. Preparation & Context Gathering
|
|
2359
|
+
- **Action:** Call \`read_my_design\` on the relevant node(s) to get context about the nodes involved (names, types, etc.). This helps in generating meaningful connector labels later.
|
|
2360
|
+
- **Action:** Call \`set_default_connector\` **without** the \`connectorId\` parameter.
|
|
2361
|
+
- **Check Result:** Analyze the response from \`set_default_connector\`.
|
|
2362
|
+
- If it confirms a default connector is already set (e.g., "Default connector is already set"), proceed to Step 2.
|
|
2363
|
+
- If it indicates no default connector is set (e.g., "No default connector set..."), you **cannot** proceed with \`create_connections\` yet. Inform the user they need to manually copy a connector from FigJam, paste it onto the current page, select it, and then you can run \`set_default_connector({ connectorId: "SELECTED_NODE_ID" })\` before attempting \`create_connections\`. **Do not proceed to Step 2 until a default connector is confirmed.**
|
|
2364
|
+
|
|
2365
|
+
### 2. Filter and Transform Reactions from \`get_reactions\` Output
|
|
2366
|
+
- **Iterate:** Go through the JSON array provided by \`get_reactions\`. For each node in the array:
|
|
2367
|
+
- Iterate through its \`reactions\` array.
|
|
2368
|
+
- **Filter:** Keep only reactions where the \`action\` meets these criteria:
|
|
2369
|
+
- Has a \`type\` that implies a connection (e.g., \`NAVIGATE\`, \`OPEN_OVERLAY\`, \`SWAP_OVERLAY\`). **Ignore** types like \`CHANGE_TO\`, \`CLOSE_OVERLAY\`, etc.
|
|
2370
|
+
- Has a valid \`destinationId\` property.
|
|
2371
|
+
- **Extract:** For each valid reaction, extract the following information:
|
|
2372
|
+
- \`sourceNodeId\`: The ID of the node the reaction belongs to (from the outer loop).
|
|
2373
|
+
- \`destinationNodeId\`: The value of \`action.destinationId\`.
|
|
2374
|
+
- \`actionType\`: The value of \`action.type\`.
|
|
2375
|
+
- \`triggerType\`: The value of \`trigger.type\`.
|
|
2376
|
+
|
|
2377
|
+
### 3. Generate Connector Text Labels
|
|
2378
|
+
- **For each extracted connection:** Create a concise, descriptive text label string.
|
|
2379
|
+
- **Combine Information:** Use the \`actionType\`, \`triggerType\`, and potentially the names of the source/destination nodes (obtained from Step 1's \`read_my_design\` or by calling \`get_node_info\` if necessary) to generate the label.
|
|
2380
|
+
- **Example Labels:**
|
|
2381
|
+
- If \`triggerType\` is "ON_CLICK" and \`actionType\` is "NAVIGATE": "On click, navigate to [Destination Node Name]"
|
|
2382
|
+
- If \`triggerType\` is "ON_DRAG" and \`actionType\` is "OPEN_OVERLAY": "On drag, open [Destination Node Name] overlay"
|
|
2383
|
+
- **Keep it brief and informative.** Let this generated string be \`generatedText\`.
|
|
2384
|
+
|
|
2385
|
+
### 4. Prepare the \`connections\` Array for \`create_connections\`
|
|
2386
|
+
- **Structure:** Create a JSON array where each element is an object representing a connection.
|
|
2387
|
+
- **Format:** Each object in the array must have the following structure:
|
|
2388
|
+
\`\`\`json
|
|
2389
|
+
{
|
|
2390
|
+
"startNodeId": "sourceNodeId_from_step_2",
|
|
2391
|
+
"endNodeId": "destinationNodeId_from_step_2",
|
|
2392
|
+
"text": "generatedText_from_step_3"
|
|
2393
|
+
}
|
|
2394
|
+
\`\`\`
|
|
2395
|
+
- **Result:** This final array is the value you will pass to the \`connections\` parameter when calling the \`create_connections\` tool.
|
|
2396
|
+
|
|
2397
|
+
### 5. Execute Connection Creation
|
|
2398
|
+
- **Action:** Call the \`create_connections\` tool, passing the array generated in Step 4 as the \`connections\` argument.
|
|
2399
|
+
- **Verify:** Check the response from \`create_connections\` to confirm success or failure.
|
|
2400
|
+
|
|
2401
|
+
This detailed process ensures you correctly interpret the reaction data, prepare the necessary information, and use the appropriate tools to create the connector lines.`
|
|
2402
|
+
}
|
|
2403
|
+
}
|
|
2404
|
+
],
|
|
2405
|
+
description: "Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions'"
|
|
2406
|
+
};
|
|
2407
|
+
}
|
|
2408
|
+
);
|
|
2409
|
+
function connectToFigma(port = 3055) {
|
|
2410
|
+
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
2411
|
+
logger.info("Already connected to Figma");
|
|
2412
|
+
return;
|
|
2413
|
+
}
|
|
2414
|
+
const wsUrl = serverUrl === "localhost" ? `${WS_URL}:${port}` : WS_URL;
|
|
2415
|
+
logger.info(`Connecting to Figma socket server at ${wsUrl}...`);
|
|
2416
|
+
ws = new WebSocket(wsUrl);
|
|
2417
|
+
ws.on("open", () => {
|
|
2418
|
+
logger.info("Connected to Figma socket server");
|
|
2419
|
+
currentChannel = null;
|
|
2420
|
+
});
|
|
2421
|
+
ws.on("message", (data) => {
|
|
2422
|
+
try {
|
|
2423
|
+
const json = JSON.parse(data);
|
|
2424
|
+
if (json.type === "progress_update") {
|
|
2425
|
+
const progressData = json.message.data;
|
|
2426
|
+
const requestId = json.id || "";
|
|
2427
|
+
if (requestId && pendingRequests.has(requestId)) {
|
|
2428
|
+
const request = pendingRequests.get(requestId);
|
|
2429
|
+
request.lastActivity = Date.now();
|
|
2430
|
+
clearTimeout(request.timeout);
|
|
2431
|
+
request.timeout = setTimeout(() => {
|
|
2432
|
+
if (pendingRequests.has(requestId)) {
|
|
2433
|
+
logger.error(`Request ${requestId} timed out after extended period of inactivity`);
|
|
2434
|
+
pendingRequests.delete(requestId);
|
|
2435
|
+
request.reject(new Error("Request to Figma timed out"));
|
|
2436
|
+
}
|
|
2437
|
+
}, 6e4);
|
|
2438
|
+
logger.info(`Progress update for ${progressData.commandType}: ${progressData.progress}% - ${progressData.message}`);
|
|
2439
|
+
if (progressData.status === "completed" && progressData.progress === 100) {
|
|
2440
|
+
logger.info(`Operation ${progressData.commandType} completed, waiting for final result`);
|
|
2441
|
+
}
|
|
2442
|
+
}
|
|
2443
|
+
return;
|
|
2444
|
+
}
|
|
2445
|
+
const myResponse = json.message;
|
|
2446
|
+
logger.debug(`Received message: ${JSON.stringify(myResponse)}`);
|
|
2447
|
+
logger.log("myResponse" + JSON.stringify(myResponse));
|
|
2448
|
+
if (myResponse.id && pendingRequests.has(myResponse.id) && myResponse.result) {
|
|
2449
|
+
const request = pendingRequests.get(myResponse.id);
|
|
2450
|
+
clearTimeout(request.timeout);
|
|
2451
|
+
if (myResponse.error) {
|
|
2452
|
+
logger.error(`Error from Figma: ${myResponse.error}`);
|
|
2453
|
+
request.reject(new Error(myResponse.error));
|
|
2454
|
+
} else {
|
|
2455
|
+
if (myResponse.result) {
|
|
2456
|
+
request.resolve(myResponse.result);
|
|
2457
|
+
}
|
|
2458
|
+
}
|
|
2459
|
+
pendingRequests.delete(myResponse.id);
|
|
2460
|
+
} else {
|
|
2461
|
+
logger.info(`Received broadcast message: ${JSON.stringify(myResponse)}`);
|
|
2462
|
+
}
|
|
2463
|
+
} catch (error) {
|
|
2464
|
+
logger.error(`Error parsing message: ${error instanceof Error ? error.message : String(error)}`);
|
|
2465
|
+
}
|
|
2466
|
+
});
|
|
2467
|
+
ws.on("error", (error) => {
|
|
2468
|
+
logger.error(`Socket error: ${error}`);
|
|
2469
|
+
});
|
|
2470
|
+
ws.on("close", () => {
|
|
2471
|
+
logger.info("Disconnected from Figma socket server");
|
|
2472
|
+
ws = null;
|
|
2473
|
+
for (const [id, request] of pendingRequests.entries()) {
|
|
2474
|
+
clearTimeout(request.timeout);
|
|
2475
|
+
request.reject(new Error("Connection closed"));
|
|
2476
|
+
pendingRequests.delete(id);
|
|
2477
|
+
}
|
|
2478
|
+
logger.info("Attempting to reconnect in 2 seconds...");
|
|
2479
|
+
setTimeout(() => connectToFigma(port), 2e3);
|
|
2480
|
+
});
|
|
2481
|
+
}
|
|
2482
|
+
async function joinChannel(channelName) {
|
|
2483
|
+
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
|
2484
|
+
throw new Error("Not connected to Figma");
|
|
2485
|
+
}
|
|
2486
|
+
try {
|
|
2487
|
+
await sendCommandToFigma("join", { channel: channelName });
|
|
2488
|
+
currentChannel = channelName;
|
|
2489
|
+
logger.info(`Joined channel: ${channelName}`);
|
|
2490
|
+
} catch (error) {
|
|
2491
|
+
logger.error(`Failed to join channel: ${error instanceof Error ? error.message : String(error)}`);
|
|
2492
|
+
throw error;
|
|
2493
|
+
}
|
|
2494
|
+
}
|
|
2495
|
+
function sendCommandToFigma(command, params = {}, timeoutMs = 3e4) {
|
|
2496
|
+
return new Promise((resolve, reject) => {
|
|
2497
|
+
if (!ws || ws.readyState !== WebSocket.OPEN) {
|
|
2498
|
+
connectToFigma();
|
|
2499
|
+
reject(new Error("Not connected to Figma. Attempting to connect..."));
|
|
2500
|
+
return;
|
|
2501
|
+
}
|
|
2502
|
+
const requiresChannel = command !== "join";
|
|
2503
|
+
if (requiresChannel && !currentChannel) {
|
|
2504
|
+
reject(new Error("Must join a channel before sending commands"));
|
|
2505
|
+
return;
|
|
2506
|
+
}
|
|
2507
|
+
const id = uuidv4();
|
|
2508
|
+
const request = {
|
|
2509
|
+
id,
|
|
2510
|
+
type: command === "join" ? "join" : "message",
|
|
2511
|
+
...command === "join" ? { channel: params.channel } : { channel: currentChannel },
|
|
2512
|
+
message: {
|
|
2513
|
+
id,
|
|
2514
|
+
command,
|
|
2515
|
+
params: {
|
|
2516
|
+
...params,
|
|
2517
|
+
commandId: id
|
|
2518
|
+
// Include the command ID in params
|
|
2519
|
+
}
|
|
2520
|
+
}
|
|
2521
|
+
};
|
|
2522
|
+
const timeout = setTimeout(() => {
|
|
2523
|
+
if (pendingRequests.has(id)) {
|
|
2524
|
+
pendingRequests.delete(id);
|
|
2525
|
+
logger.error(`Request ${id} to Figma timed out after ${timeoutMs / 1e3} seconds`);
|
|
2526
|
+
reject(new Error("Request to Figma timed out"));
|
|
2527
|
+
}
|
|
2528
|
+
}, timeoutMs);
|
|
2529
|
+
pendingRequests.set(id, {
|
|
2530
|
+
resolve,
|
|
2531
|
+
reject,
|
|
2532
|
+
timeout,
|
|
2533
|
+
lastActivity: Date.now()
|
|
2534
|
+
});
|
|
2535
|
+
logger.info(`Sending command to Figma: ${command}`);
|
|
2536
|
+
logger.debug(`Request details: ${JSON.stringify(request)}`);
|
|
2537
|
+
ws.send(JSON.stringify(request));
|
|
2538
|
+
});
|
|
2539
|
+
}
|
|
2540
|
+
server.tool(
|
|
2541
|
+
"join_channel",
|
|
2542
|
+
"Join a specific channel to communicate with Figma",
|
|
2543
|
+
{
|
|
2544
|
+
channel: z.string().describe("The name of the channel to join").default("")
|
|
2545
|
+
},
|
|
2546
|
+
async ({ channel }) => {
|
|
2547
|
+
try {
|
|
2548
|
+
if (!channel) {
|
|
2549
|
+
return {
|
|
2550
|
+
content: [
|
|
2551
|
+
{
|
|
2552
|
+
type: "text",
|
|
2553
|
+
text: "Please provide a channel name to join:"
|
|
2554
|
+
}
|
|
2555
|
+
],
|
|
2556
|
+
followUp: {
|
|
2557
|
+
tool: "join_channel",
|
|
2558
|
+
description: "Join the specified channel"
|
|
2559
|
+
}
|
|
2560
|
+
};
|
|
2561
|
+
}
|
|
2562
|
+
await joinChannel(channel);
|
|
2563
|
+
return {
|
|
2564
|
+
content: [
|
|
2565
|
+
{
|
|
2566
|
+
type: "text",
|
|
2567
|
+
text: `Successfully joined channel: ${channel}`
|
|
2568
|
+
}
|
|
2569
|
+
]
|
|
2570
|
+
};
|
|
2571
|
+
} catch (error) {
|
|
2572
|
+
return {
|
|
2573
|
+
content: [
|
|
2574
|
+
{
|
|
2575
|
+
type: "text",
|
|
2576
|
+
text: `Error joining channel: ${error instanceof Error ? error.message : String(error)}`
|
|
2577
|
+
}
|
|
2578
|
+
]
|
|
2579
|
+
};
|
|
2580
|
+
}
|
|
2581
|
+
}
|
|
2582
|
+
);
|
|
2583
|
+
async function main() {
|
|
2584
|
+
try {
|
|
2585
|
+
connectToFigma();
|
|
2586
|
+
} catch (error) {
|
|
2587
|
+
logger.warn(`Could not connect to Figma initially: ${error instanceof Error ? error.message : String(error)}`);
|
|
2588
|
+
logger.warn("Will try to connect when the first command is sent");
|
|
2589
|
+
}
|
|
2590
|
+
const transport = new StdioServerTransport();
|
|
2591
|
+
await server.connect(transport);
|
|
2592
|
+
logger.info("FigmaMCP server running on stdio");
|
|
2593
|
+
}
|
|
2594
|
+
main().catch((error) => {
|
|
2595
|
+
logger.error(`Error starting FigmaMCP server: ${error instanceof Error ? error.message : String(error)}`);
|
|
2596
|
+
process.exit(1);
|
|
2597
|
+
});
|
|
2598
|
+
//# sourceMappingURL=server.js.map
|