figma-console-mcp 1.17.0 → 1.17.2

package/dist/cloudflare/core/cloud-websocket-connector.js

@@ -244,6 +244,81 @@ export class CloudWebSocketConnector {
         return this.sendCommand('LINT_DESIGN', params, 120000);
     }
     // ============================================================================
+    // FigJam operations
+    // ============================================================================
+    async createSticky(params) {
+        return this.sendCommand('CREATE_STICKY', params);
+    }
+    async createStickies(params) {
+        return this.sendCommand('CREATE_STICKIES', params, 30000);
+    }
+    async createConnector(params) {
+        return this.sendCommand('CREATE_CONNECTOR', params);
+    }
+    async createShapeWithText(params) {
+        return this.sendCommand('CREATE_SHAPE_WITH_TEXT', params);
+    }
+    async createTable(params) {
+        return this.sendCommand('CREATE_TABLE', params, 30000);
+    }
+    async createCodeBlock(params) {
+        return this.sendCommand('CREATE_CODE_BLOCK', params);
+    }
+    async getBoardContents(params) {
+        return this.sendCommand('GET_BOARD_CONTENTS', params, 30000);
+    }
+    async getConnections() {
+        return this.sendCommand('GET_CONNECTIONS', {}, 15000);
+    }
+    // ============================================================================
+    // Slides operations
+    // ============================================================================
+    async listSlides() {
+        return this.sendCommand('LIST_SLIDES', {}, 10000);
+    }
+    async getSlideContent(params) {
+        return this.sendCommand('GET_SLIDE_CONTENT', params, 10000);
+    }
+    async createSlide(params) {
+        return this.sendCommand('CREATE_SLIDE', params, 10000);
+    }
+    async deleteSlide(params) {
+        return this.sendCommand('DELETE_SLIDE', params, 5000);
+    }
+    async duplicateSlide(params) {
+        return this.sendCommand('DUPLICATE_SLIDE', params, 5000);
+    }
+    async getSlideGrid() {
+        return this.sendCommand('GET_SLIDE_GRID', {}, 10000);
+    }
+    async reorderSlides(params) {
+        return this.sendCommand('REORDER_SLIDES', params, 15000);
+    }
+    async setSlideTransition(params) {
+        return this.sendCommand('SET_SLIDE_TRANSITION', params, 5000);
+    }
+    async getSlideTransition(params) {
+        return this.sendCommand('GET_SLIDE_TRANSITION', params, 5000);
+    }
+    async setSlidesViewMode(params) {
+        return this.sendCommand('SET_SLIDES_VIEW_MODE', params, 5000);
+    }
+    async getFocusedSlide() {
+        return this.sendCommand('GET_FOCUSED_SLIDE', {}, 5000);
+    }
+    async focusSlide(params) {
+        return this.sendCommand('FOCUS_SLIDE', params, 5000);
+    }
+    async skipSlide(params) {
+        return this.sendCommand('SKIP_SLIDE', params, 5000);
+    }
+    async addTextToSlide(params) {
+        return this.sendCommand('ADD_TEXT_TO_SLIDE', params, 10000);
+    }
+    async addShapeToSlide(params) {
+        return this.sendCommand('ADD_SHAPE_TO_SLIDE', params, 5000);
+    }
+    // ============================================================================
     // Cache management (no-op for cloud relay)
     // ============================================================================
     clearFrameCache() {

package/dist/cloudflare/core/figjam-tools.js

@@ -0,0 +1,485 @@
+import { z } from "zod";
+import { createChildLogger } from "./logger.js";
+const logger = createChildLogger({ component: "figjam-tools" });
+/** Valid sticky note colors */
+const STICKY_COLORS = [
+    "YELLOW",
+    "BLUE",
+    "GREEN",
+    "PINK",
+    "ORANGE",
+    "PURPLE",
+    "RED",
+    "LIGHT_GRAY",
+    "GRAY",
+];
+/** Valid FigJam shape types */
+const SHAPE_TYPES = [
+    "ROUNDED_RECTANGLE",
+    "DIAMOND",
+    "ELLIPSE",
+    "TRIANGLE_UP",
+    "TRIANGLE_DOWN",
+    "PARALLELOGRAM_RIGHT",
+    "PARALLELOGRAM_LEFT",
+    "ENG_DATABASE",
+    "ENG_QUEUE",
+    "ENG_FILE",
+    "ENG_FOLDER",
+];
+/** Valid FigJam node types for board content filtering */
+const FIGJAM_NODE_TYPES = [
+    "STICKY",
+    "SHAPE_WITH_TEXT",
+    "CONNECTOR",
+    "TABLE",
+    "CODE_BLOCK",
+    "SECTION",
+    "FRAME",
+    "TEXT",
+];
+/** Maximum items for batch operations to prevent DoS / plugin timeouts */
+const MAX_BATCH_SIZE = 200;
+/** Maximum table dimensions */
+const MAX_TABLE_ROWS = 100;
+const MAX_TABLE_COLUMNS = 50;
+/** Maximum text length per field */
+const MAX_TEXT_LENGTH = 5000;
+/** Maximum code block length */
+const MAX_CODE_LENGTH = 50000;
+/** Maximum node IDs for arrangement */
+const MAX_ARRANGE_NODES = 500;
+/** Maximum nodes to return from board content reads */
+const MAX_READ_NODES = 1000;
+/**
+ * Register FigJam-specific tools.
+ * These tools only work when the connected file is a FigJam board (editorType === 'figjam').
+ * Used by both local mode (src/local.ts) and cloud mode (src/index.ts).
+ */
+export function registerFigJamTools(server, getDesktopConnector) {
+    // ============================================================================
+    // STICKY NOTE TOOLS
+    // ============================================================================
+    server.tool("figjam_create_sticky", `Create a sticky note on a FigJam board. Only works in FigJam files.
+
+**Colors:** YELLOW, BLUE, GREEN, PINK, ORANGE, PURPLE, RED, LIGHT_GRAY, GRAY (default: YELLOW)`, {
+        text: z
+            .string()
+            .max(MAX_TEXT_LENGTH)
+            .describe("Text content for the sticky note"),
+        color: z
+            .enum(STICKY_COLORS)
+            .optional()
+            .describe("Sticky color"),
+        x: z.number().optional().describe("X position on canvas"),
+        y: z.number().optional().describe("Y position on canvas"),
+    }, async ({ text, color, x, y }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.createSticky({ text, color, x, y });
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_create_sticky failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files. Make sure the Desktop Bridge plugin is running in a FigJam board.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    server.tool("figjam_create_stickies", `Batch create multiple sticky notes on a FigJam board (max ${MAX_BATCH_SIZE}). Use this to populate boards from structured data (meeting notes, brainstorm ideas, etc.).
+
+**Colors:** YELLOW, BLUE, GREEN, PINK, ORANGE, PURPLE, RED, LIGHT_GRAY, GRAY`, {
+        stickies: z
+            .array(z.object({
+            text: z.string().max(MAX_TEXT_LENGTH).describe("Text content"),
+            color: z.enum(STICKY_COLORS).optional().describe("Sticky color"),
+            x: z.number().optional().describe("X position"),
+            y: z.number().optional().describe("Y position"),
+        }))
+            .max(MAX_BATCH_SIZE)
+            .describe(`Array of sticky note specifications (max ${MAX_BATCH_SIZE})`),
+    }, async ({ stickies }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.createStickies({ stickies });
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_create_stickies failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // ============================================================================
+    // CONNECTOR TOOL
+    // ============================================================================
+    server.tool("figjam_create_connector", `Connect two nodes with a connector line in FigJam. Use to create flowcharts, diagrams, and relationship maps.
+
+Nodes must exist on the board (stickies, shapes, etc.). Use their node IDs from creation results.`, {
+        startNodeId: z.string().describe("Node ID of the start element"),
+        endNodeId: z.string().describe("Node ID of the end element"),
+        label: z
+            .string()
+            .max(MAX_TEXT_LENGTH)
+            .optional()
+            .describe("Optional text label on the connector"),
+    }, async ({ startNodeId, endNodeId, label }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.createConnector({
+                startNodeId,
+                endNodeId,
+                label,
+            });
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_create_connector failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files. Both start and end nodes must exist.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // ============================================================================
+    // SHAPE WITH TEXT TOOL
+    // ============================================================================
+    server.tool("figjam_create_shape_with_text", `Create a labeled shape on a FigJam board. Use for flowchart nodes, process diagrams, and visual organization.
+
+**Shape types:** ROUNDED_RECTANGLE (default), DIAMOND, ELLIPSE, TRIANGLE_UP, TRIANGLE_DOWN, PARALLELOGRAM_RIGHT, PARALLELOGRAM_LEFT, ENG_DATABASE, ENG_QUEUE, ENG_FILE, ENG_FOLDER`, {
+        text: z
+            .string()
+            .max(MAX_TEXT_LENGTH)
+            .optional()
+            .describe("Text label for the shape"),
+        shapeType: z
+            .enum(SHAPE_TYPES)
+            .optional()
+            .describe("Shape type"),
+        x: z.number().optional().describe("X position on canvas"),
+        y: z.number().optional().describe("Y position on canvas"),
+    }, async ({ text, shapeType, x, y }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.createShapeWithText({
+                text,
+                shapeType,
+                x,
+                y,
+            });
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_create_shape_with_text failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // ============================================================================
+    // TABLE TOOL
+    // ============================================================================
+    server.tool("figjam_create_table", `Create a table on a FigJam board with optional cell data. Use for structured data display, comparison matrices, and organized information.
+
+**Data format:** 2D array of strings, e.g. [["Header1", "Header2"], ["Row1Col1", "Row1Col2"]]`, {
+        rows: z
+            .number()
+            .min(1)
+            .max(MAX_TABLE_ROWS)
+            .describe(`Number of rows (1-${MAX_TABLE_ROWS})`),
+        columns: z
+            .number()
+            .min(1)
+            .max(MAX_TABLE_COLUMNS)
+            .describe(`Number of columns (1-${MAX_TABLE_COLUMNS})`),
+        data: z
+            .array(z.array(z.string().max(MAX_TEXT_LENGTH)))
+            .optional()
+            .describe("2D array of cell text content (row-major order)"),
+        x: z.number().optional().describe("X position on canvas"),
+        y: z.number().optional().describe("Y position on canvas"),
+    }, async ({ rows, columns, data, x, y }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.createTable({
+                rows,
+                columns,
+                data,
+                x,
+                y,
+            });
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_create_table failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // ============================================================================
+    // CODE BLOCK TOOL
+    // ============================================================================
+    server.tool("figjam_create_code_block", `Create a code block on a FigJam board. Use for sharing code snippets, config examples, or technical documentation in collaborative boards.`, {
+        code: z.string().max(MAX_CODE_LENGTH).describe("The code content"),
+        language: z
+            .string()
+            .optional()
+            .describe("Programming language (e.g., 'JAVASCRIPT', 'PYTHON', 'TYPESCRIPT', 'JSON', 'HTML', 'CSS')"),
+        x: z.number().optional().describe("X position on canvas"),
+        y: z.number().optional().describe("Y position on canvas"),
+    }, async ({ code, language, x, y }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.createCodeBlock({
+                code,
+                language,
+                x,
+                y,
+            });
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_create_code_block failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // ============================================================================
+    // LAYOUT HELPER TOOL
+    // ============================================================================
+    server.tool("figjam_auto_arrange", `Arrange nodes on a FigJam board in a grid, horizontal row, or vertical column layout. Use after batch-creating elements to organize them neatly.`, {
+        nodeIds: z
+            .array(z.string())
+            .max(MAX_ARRANGE_NODES)
+            .describe(`Array of node IDs to arrange (max ${MAX_ARRANGE_NODES})`),
+        layout: z
+            .enum(["grid", "horizontal", "vertical"])
+            .optional()
+            .default("grid")
+            .describe("Layout type: grid, horizontal, or vertical"),
+        spacing: z
+            .number()
+            .optional()
+            .default(40)
+            .describe("Spacing between nodes in pixels"),
+        columns: z
+            .number()
+            .optional()
+            .describe("Number of columns for grid layout (defaults to sqrt of node count)"),
+    }, async ({ nodeIds, layout, spacing, columns }) => {
+        try {
+            const connector = await getDesktopConnector();
+            // Compute grid columns safely on the server side — no string interpolation
+            const gridCols = columns || Math.ceil(Math.sqrt(nodeIds.length));
+            // Pass all parameters as a JSON object to avoid code injection.
+            // The plugin code reads from the params object, not interpolated strings.
+            const paramsJson = JSON.stringify({
+                nodeIds,
+                layout,
+                spacing,
+                gridCols,
+            });
+            // Use JSON.stringify to produce a properly-escaped double-quoted JS string literal.
+            // This handles all control characters including \u2028/\u2029 that manual
+            // single-quote escaping would miss.
+            const code = `
+					const params = JSON.parse(${JSON.stringify(paramsJson)});
+					const nodes = [];
+					for (const id of params.nodeIds) {
+						const node = await figma.getNodeByIdAsync(id);
+						if (node) nodes.push(node);
+					}
+					if (nodes.length === 0) throw new Error('No valid nodes found');
+
+					let x = nodes[0].x;
+					let y = nodes[0].y;
+					const startX = x;
+					let maxRowHeight = 0;
+
+					for (let i = 0; i < nodes.length; i++) {
+						const node = nodes[i];
+						if (params.layout === 'horizontal') {
+							node.x = x;
+							node.y = y;
+							x += node.width + params.spacing;
+						} else if (params.layout === 'vertical') {
+							node.x = x;
+							node.y = y;
+							y += node.height + params.spacing;
+						} else {
+							const col = i % params.gridCols;
+							if (col === 0 && i > 0) {
+								y += maxRowHeight + params.spacing;
+								maxRowHeight = 0;
+								x = startX;
+							}
+							node.x = x;
+							node.y = y;
+							maxRowHeight = Math.max(maxRowHeight, node.height);
+							x += node.width + params.spacing;
+						}
+					}
+					return { arranged: nodes.length, layout: params.layout };
+				`;
+            const result = await connector.executeCodeViaUI(code, 10000);
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_auto_arrange failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "Make sure all node IDs are valid and the Desktop Bridge plugin is running.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    // ============================================================================
+    // READ TOOLS — Query existing FigJam board content
+    // ============================================================================
+    server.tool("figjam_get_board_contents", `Read all content from a FigJam board. Returns stickies, shapes, connectors, tables, code blocks, and sections with their text content and positions.
+
+Use this to understand what's on a board before modifying it, or to extract structured data from collaborative sessions.
+
+**Filters:** Pass nodeTypes to limit results (e.g., ["STICKY"] for only stickies). Omit for everything.`, {
+        nodeTypes: z
+            .array(z.enum(FIGJAM_NODE_TYPES))
+            .optional()
+            .describe("Filter by node types. Omit for all."),
+        maxNodes: z
+            .number()
+            .min(1)
+            .max(MAX_READ_NODES)
+            .optional()
+            .default(500)
+            .describe(`Maximum nodes to return (1-${MAX_READ_NODES}, default: 500)`),
+    }, async ({ nodeTypes, maxNodes }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.getBoardContents({
+                nodeTypes,
+                maxNodes,
+            });
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_get_board_contents failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files. Make sure the Desktop Bridge plugin is running in a FigJam board.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+    server.tool("figjam_get_connections", `Read the connection graph from a FigJam board. Returns all connectors with their start/end node references and labels.
+
+Use this to understand relationships, flowcharts, and diagrams. Returns edges as {startNodeId, endNodeId, label} plus a summary of connected nodes.`, {}, async () => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.getConnections();
+            return {
+                content: [{ type: "text", text: JSON.stringify(result) }],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "figjam_get_connections failed");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "This tool only works in FigJam files. Make sure the Desktop Bridge plugin is running in a FigJam board.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
+}

package/dist/cloudflare/core/figma-desktop-connector.js

@@ -1180,5 +1180,30 @@ export class FigmaDesktopConnector {
             throw error;
         }
     }
+    // FigJam operations — not supported via legacy CDP transport
+    async createSticky() { throw new Error('FigJam operations require WebSocket transport'); }
+    async createStickies() { throw new Error('FigJam operations require WebSocket transport'); }
+    async createConnector() { throw new Error('FigJam operations require WebSocket transport'); }
+    async createShapeWithText() { throw new Error('FigJam operations require WebSocket transport'); }
+    async createTable() { throw new Error('FigJam operations require WebSocket transport'); }
+    async createCodeBlock() { throw new Error('FigJam operations require WebSocket transport'); }
+    async getBoardContents() { throw new Error('FigJam operations require WebSocket transport'); }
+    async getConnections() { throw new Error('FigJam operations require WebSocket transport'); }
+    // Slides operations — not supported via legacy CDP transport
+    async listSlides() { throw new Error('Slides operations require WebSocket transport'); }
+    async getSlideContent() { throw new Error('Slides operations require WebSocket transport'); }
+    async createSlide() { throw new Error('Slides operations require WebSocket transport'); }
+    async deleteSlide() { throw new Error('Slides operations require WebSocket transport'); }
+    async duplicateSlide() { throw new Error('Slides operations require WebSocket transport'); }
+    async getSlideGrid() { throw new Error('Slides operations require WebSocket transport'); }
+    async reorderSlides() { throw new Error('Slides operations require WebSocket transport'); }
+    async setSlideTransition() { throw new Error('Slides operations require WebSocket transport'); }
+    async getSlideTransition() { throw new Error('Slides operations require WebSocket transport'); }
+    async setSlidesViewMode() { throw new Error('Slides operations require WebSocket transport'); }
+    async getFocusedSlide() { throw new Error('Slides operations require WebSocket transport'); }
+    async focusSlide() { throw new Error('Slides operations require WebSocket transport'); }
+    async skipSlide() { throw new Error('Slides operations require WebSocket transport'); }
+    async addTextToSlide() { throw new Error('Slides operations require WebSocket transport'); }
+    async addShapeToSlide() { throw new Error('Slides operations require WebSocket transport'); }
 }
 FigmaDesktopConnector.DEBUG = process.env.DEBUG === '1' || process.env.DEBUG === 'true';

package/dist/cloudflare/core/figma-tools.js

@@ -551,11 +551,14 @@ function resolveVariableAliases(variables, allVariablesMap, collectionsMap) {
         const collection = collectionsMap.get(variable.variableCollectionId);
         const modes = collection?.modes || [];
         const resolvedValuesByMode = {};
+        // Use the full cached variable's valuesByMode if the response variable was stripped by verbosity filtering
+        const fullVariable = allVariablesMap.get(variable.id);
+        const valuesByMode = variable.valuesByMode || fullVariable?.valuesByMode;
         for (const mode of modes) {
             const modeId = getModeId(mode);
             if (!modeId)
                 continue;
-            const rawValue = variable.valuesByMode?.[modeId];
+            const rawValue = valuesByMode?.[modeId];
             if (rawValue === undefined)
                 continue;
             const { resolved, aliasChain } = resolveValue(rawValue, variable.resolvedType, new Set());