@biolab/talk-to-figma 0.3.3 → 0.4.1

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