figma-code-agent-mcp 1.0.0

package/dist/tools/createText.d.ts

@@ -0,0 +1,81 @@
+export declare const createTextSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            text: {
+                type: string;
+                description: string;
+            };
+            name: {
+                type: string;
+                description: string;
+            };
+            x: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            y: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            fontSize: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            fontFamily: {
+                type: string;
+                description: string;
+                default: string;
+            };
+            fontWeight: {
+                type: string;
+                description: string;
+                default: string;
+            };
+            fillColor: {
+                type: string;
+                description: string;
+                properties: {
+                    r: {
+                        type: string;
+                        minimum: number;
+                        maximum: number;
+                    };
+                    g: {
+                        type: string;
+                        minimum: number;
+                        maximum: number;
+                    };
+                    b: {
+                        type: string;
+                        minimum: number;
+                        maximum: number;
+                    };
+                    a: {
+                        type: string;
+                        minimum: number;
+                        maximum: number;
+                        default: number;
+                    };
+                };
+                required: string[];
+            };
+            parentId: {
+                type: string;
+                description: string;
+            };
+            returnScreenshot: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: string[];
+    };
+};
+export declare function createText(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/createText.js

@@ -0,0 +1,67 @@
+import { figmaWebSocket } from '../websocket.js';
+export const createTextSchema = {
+    name: 'create_text',
+    description: 'Create a new text node in Figma.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            text: {
+                type: 'string',
+                description: 'The text content to display',
+            },
+            name: {
+                type: 'string',
+                description: 'Name of the text node',
+            },
+            x: {
+                type: 'number',
+                description: 'X position of the text',
+                default: 0,
+            },
+            y: {
+                type: 'number',
+                description: 'Y position of the text',
+                default: 0,
+            },
+            fontSize: {
+                type: 'number',
+                description: 'Font size in pixels',
+                default: 16,
+            },
+            fontFamily: {
+                type: 'string',
+                description: 'Font family name (must be available in Figma)',
+                default: 'Inter',
+            },
+            fontWeight: {
+                type: 'string',
+                description: 'Font weight/style (e.g., "Regular", "Bold", "Medium", "Semi Bold")',
+                default: 'Regular',
+            },
+            fillColor: {
+                type: 'object',
+                description: 'Text color (RGB values from 0-1)',
+                properties: {
+                    r: { type: 'number', minimum: 0, maximum: 1 },
+                    g: { type: 'number', minimum: 0, maximum: 1 },
+                    b: { type: 'number', minimum: 0, maximum: 1 },
+                    a: { type: 'number', minimum: 0, maximum: 1, default: 1 },
+                },
+                required: ['r', 'g', 'b'],
+            },
+            parentId: {
+                type: 'string',
+                description: 'ID of the parent node to create the text in.',
+            },
+            returnScreenshot: {
+                type: 'boolean',
+                description: 'If true, returns a screenshot of the created element for visual verification',
+                default: false,
+            },
+        },
+        required: ['text'],
+    },
+};
+export async function createText(params) {
+    return figmaWebSocket.sendCommand('createText', params);
+}

package/dist/tools/deleteNode.d.ts

@@ -0,0 +1,15 @@
+export declare const deleteNodeSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            nodeId: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare function deleteNode(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/deleteNode.js

@@ -0,0 +1,18 @@
+import { figmaWebSocket } from '../websocket.js';
+export const deleteNodeSchema = {
+    name: 'delete_node',
+    description: 'Delete a node from Figma.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            nodeId: {
+                type: 'string',
+                description: 'ID of the node to delete',
+            },
+        },
+        required: ['nodeId'],
+    },
+};
+export async function deleteNode(params) {
+    return figmaWebSocket.sendCommand('deleteNode', params);
+}

package/dist/tools/execute.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Schema for the execute tool — runs JavaScript in a sandbox with figma.* API.
+ */
+export declare const executeSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            code: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};

package/dist/tools/execute.js

@@ -0,0 +1,68 @@
+/**
+ * Schema for the execute tool — runs JavaScript in a sandbox with figma.* API.
+ */
+export const executeSchema = {
+    name: 'execute',
+    description: `Execute JavaScript code in a sandbox with access to the figma.* API.
+Use this to batch multiple operations in a single call (create UIs, modify nodes, read data).
+Works in both Figma Design and FigJam files — use \`figma.getEditorType()\` to detect which.
+
+## Quick API Reference
+
+**Create (Figma Design):** figma.create(opts) [unified with presets], figma.createFrame, figma.createRectangle, figma.createEllipse, figma.createLine, figma.createText, figma.createInstance, figma.cloneNode
+**Create (FigJam):** figma.createSection, figma.createSticky, figma.createShape, figma.createConnector — also available via figma.create({ type: "section" | "sticky" | "shape" | "connector" })
+**Read:** figma.getNode, figma.getSelection(), figma.getCurrentPage, figma.getStyles, figma.getLocalComponents, figma.getVariables, figma.searchNodes, figma.captureScreenshot, figma.getEditorType()
+**Update:** figma.updateNode, figma.moveNode, figma.swapComponent
+**Delete:** figma.deleteNode
+**Tokens:** figma.createToken(opts), figma.bindToken(opts)
+**Components:** figma.toComponent(opts), figma.createVariants(opts), figma.addComponentProperty(opts), figma.setInstanceOverride(opts)
+**Accessibility:** figma.checkAccessibility(opts)
+
+All methods are async — use \`await\`. Use \`return\` to send results back.
+Use \`console.log()\` for debug output (captured in response).
+Use \`search_tools\` to discover full parameter details for any method (try category "figjam").
+
+**Colors** accept hex strings ("#FF0000"), rgb("rgb(255,0,0)"), or {r,g,b} objects. Use \`fill\`/\`stroke\` as aliases for fillColor/strokeColor.
+**Target specifiers:** use "selection", "name:NodeName", or "page" instead of node IDs.
+**Layout (Figma Design):** use CSS-like \`layout: { direction: "row", gap: 12, padding: 16 }\` instead of raw Figma props.
+**Presets:** \`figma.create({ type: "card" })\` applies sensible defaults. Types: card, button, nav, input, form.
+
+## FigJam
+
+In FigJam, use sections (containers), stickies (notes), shapes (diagrams), connectors (lines between nodes), and text. Frames/rectangles are auto-remapped to sections/shapes as a fallback, but prefer explicit FigJam methods.
+
+## Example (Figma Design)
+
+\`\`\`js
+const card = await figma.create({
+  type: "card",
+  name: "Profile",
+  children: [
+    { type: "text", content: "Hello World", fontSize: 24, fontWeight: "Bold" },
+    { type: "button", children: [{ type: "text", content: "Click me", fill: "#FFF" }] }
+  ]
+});
+return card;
+\`\`\`
+
+## Example (FigJam)
+
+\`\`\`js
+const section = await figma.createSection({ name: "Sprint Planning", width: 800, height: 600 });
+const shapeA = await figma.createShape({ text: "Frontend", fillColor: "#E8F0FE", parentId: section.id });
+const shapeB = await figma.createShape({ text: "API", x: 400, fillColor: "#FCE8E6", parentId: section.id });
+await figma.createConnector({ startNodeId: shapeA.id, endNodeId: shapeB.id, endStrokeCap: "ARROW_EQUILATERAL", text: "REST calls" });
+await figma.createSticky({ text: "User story #1", fillColor: "#FFF9B1", parentId: section.id });
+return section;
+\`\`\``,
+    inputSchema: {
+        type: 'object',
+        properties: {
+            code: {
+                type: 'string',
+                description: 'JavaScript code to execute. All figma.* methods are async. Use return to send back results.',
+            },
+        },
+        required: ['code'],
+    },
+};

package/dist/tools/getCurrentPage.d.ts

@@ -0,0 +1,16 @@
+export declare const getCurrentPageSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            depth: {
+                type: string;
+                description: string;
+                default: number;
+            };
+        };
+        required: never[];
+    };
+};
+export declare function getCurrentPage(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/getCurrentPage.js

@@ -0,0 +1,19 @@
+import { figmaWebSocket } from '../websocket.js';
+export const getCurrentPageSchema = {
+    name: 'get_current_page',
+    description: 'Get a lightweight tree structure of the current Figma page. Returns hierarchy with id, name, type, and text content (for text nodes). Use this to understand page structure before making changes. Use get_node for detailed properties of specific nodes.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            depth: {
+                type: 'number',
+                description: 'Maximum depth to traverse (default: 10). Use lower values for complex pages.',
+                default: 10,
+            },
+        },
+        required: [],
+    },
+};
+export async function getCurrentPage(params) {
+    return figmaWebSocket.sendCommand('getCurrentPage', params);
+}

package/dist/tools/getDesignContext.d.ts

@@ -0,0 +1,42 @@
+export declare const getDesignContextSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            nodeId: {
+                type: string;
+                description: string;
+            };
+            depth: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            exportImages: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+            includeTokens: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+            generateNestedComponents: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: string[];
+    };
+};
+export interface GetDesignContextParams {
+    nodeId: string;
+    depth?: number;
+    exportImages?: boolean;
+    includeTokens?: boolean;
+    generateNestedComponents?: boolean;
+}
+export declare function getDesignContext(params: Record<string, unknown>): Promise<string>;

package/dist/tools/getDesignContext.js

@@ -0,0 +1,55 @@
+import { figmaWebSocket } from '../websocket.js';
+import { generateDesignContext, formatDesignContextResponse, } from '../codeGenerator/index.js';
+export const getDesignContextSchema = {
+    name: 'get_design_context',
+    description: `Generate React + Tailwind CSS code from a Figma design. This tool:
+- Extracts the full node tree with styling details
+- Converts Figma auto-layout to Flexbox
+- Maps Figma styles to Tailwind utility classes
+- Exports images to a local asset server
+- Detects component instances and generates their implementations
+- Extracts design tokens (colors, typography)
+- Includes component documentation links from Figma
+
+The generated code includes data-node-id attributes for traceability back to Figma.`,
+    inputSchema: {
+        type: 'object',
+        properties: {
+            nodeId: {
+                type: 'string',
+                description: 'ID of the Figma node to convert, or a Figma URL containing the node-id parameter',
+            },
+            depth: {
+                type: 'number',
+                description: 'How deep to traverse children. Default is 10.',
+                default: 10,
+            },
+            exportImages: {
+                type: 'boolean',
+                description: 'Whether to export images (nodes with image fills, vectors, icons). Default is true.',
+                default: true,
+            },
+            includeTokens: {
+                type: 'boolean',
+                description: 'Whether to include design tokens (colors, typography). Default is true.',
+                default: true,
+            },
+            generateNestedComponents: {
+                type: 'boolean',
+                description: 'Whether to generate stub implementations for nested component instances. Default is true.',
+                default: true,
+            },
+        },
+        required: ['nodeId'],
+    },
+};
+export async function getDesignContext(params) {
+    const nodeId = params.nodeId;
+    const generateNestedComponents = params.generateNestedComponents !== false;
+    // Get design context from Figma plugin
+    const result = (await figmaWebSocket.sendCommand('getDesignContext', params));
+    // Generate React + Tailwind code
+    const output = generateDesignContext(result, { generateNestedComponents });
+    // Format the response
+    return formatDesignContextResponse(output, nodeId);
+}

package/dist/tools/getLocalComponents.d.ts

@@ -0,0 +1,20 @@
+export declare const getLocalComponentsSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            nameFilter: {
+                type: string;
+                description: string;
+            };
+            limit: {
+                type: string;
+                description: string;
+                default: number;
+            };
+        };
+        required: never[];
+    };
+};
+export declare function getLocalComponents(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/getLocalComponents.js

@@ -0,0 +1,23 @@
+import { figmaWebSocket } from '../websocket.js';
+export const getLocalComponentsSchema = {
+    name: 'get_local_components',
+    description: 'Get all local components and component sets in the current file. Returns componentId for use with create_instance.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            nameFilter: {
+                type: 'string',
+                description: 'Filter components by name (case-insensitive contains match)',
+            },
+            limit: {
+                type: 'number',
+                description: 'Maximum number of components to return. Default is 50.',
+                default: 50,
+            },
+        },
+        required: [],
+    },
+};
+export async function getLocalComponents(params) {
+    return figmaWebSocket.sendCommand('getLocalComponents', params);
+}

package/dist/tools/getNode.d.ts

@@ -0,0 +1,30 @@
+export declare const getNodeSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            nodeId: {
+                type: string;
+                description: string;
+            };
+            depth: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            childLimit: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            detailed: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: string[];
+    };
+};
+export declare function getNode(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/getNode.js

@@ -0,0 +1,33 @@
+import { figmaWebSocket } from '../websocket.js';
+export const getNodeSchema = {
+    name: 'get_node',
+    description: 'Get information about a specific node in Figma. By default returns lightweight data (id, name, type, dimensions, text). Use detailed=true for full styling info (fills, strokes, layout, etc). WARNING: Using depth > 1 with detailed=true can return very large responses that fill up context quickly. Start with depth=0 or depth=1 and detailed=false, only increase if needed.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            nodeId: {
+                type: 'string',
+                description: 'ID of the node, or a Figma URL containing the node-id parameter',
+            },
+            depth: {
+                type: 'number',
+                description: 'How deep to traverse children (0 = no children, 1 = direct children only). Default is 0.',
+                default: 0,
+            },
+            childLimit: {
+                type: 'number',
+                description: 'Maximum number of children to return per node. Default is 20.',
+                default: 20,
+            },
+            detailed: {
+                type: 'boolean',
+                description: 'If true, include full styling details (fills, strokes, effects, layout properties). Default is false (lightweight response).',
+                default: false,
+            },
+        },
+        required: ['nodeId'],
+    },
+};
+export async function getNode(params) {
+    return figmaWebSocket.sendCommand('getNode', params);
+}

package/dist/tools/getSelection.d.ts

@@ -0,0 +1,10 @@
+export declare const getSelectionSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {};
+        required: never[];
+    };
+};
+export declare function getSelection(): Promise<unknown>;

package/dist/tools/getSelection.js

@@ -0,0 +1,13 @@
+import { figmaWebSocket } from '../websocket.js';
+export const getSelectionSchema = {
+    name: 'get_selection',
+    description: 'Get the currently selected nodes in Figma.',
+    inputSchema: {
+        type: 'object',
+        properties: {},
+        required: [],
+    },
+};
+export async function getSelection() {
+    return figmaWebSocket.sendCommand('getSelection', {});
+}

package/dist/tools/getStyles.d.ts

@@ -0,0 +1,17 @@
+export declare const getStylesSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            type: {
+                type: string;
+                enum: string[];
+                description: string;
+                default: string;
+            };
+        };
+        required: never[];
+    };
+};
+export declare function getStyles(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/getStyles.js

@@ -0,0 +1,20 @@
+import { figmaWebSocket } from '../websocket.js';
+export const getStylesSchema = {
+    name: 'get_styles',
+    description: 'Get all local styles (colors, text, effects, grids) from the current file.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            type: {
+                type: 'string',
+                enum: ['PAINT', 'TEXT', 'EFFECT', 'GRID', 'ALL'],
+                description: 'Type of styles to get. PAINT=colors, TEXT=typography, ALL=everything. Default is ALL.',
+                default: 'ALL',
+            },
+        },
+        required: [],
+    },
+};
+export async function getStyles(params) {
+    return figmaWebSocket.sendCommand('getStyles', params);
+}

package/dist/tools/getVariables.d.ts

@@ -0,0 +1,26 @@
+export declare const getVariablesSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            collectionName: {
+                type: string;
+                description: string;
+            };
+            type: {
+                type: string;
+                enum: string[];
+                description: string;
+                default: string;
+            };
+            limit: {
+                type: string;
+                description: string;
+                default: number;
+            };
+        };
+        required: never[];
+    };
+};
+export declare function getVariables(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/getVariables.js

@@ -0,0 +1,29 @@
+import { figmaWebSocket } from '../websocket.js';
+export const getVariablesSchema = {
+    name: 'get_variables',
+    description: 'Get variables and variable collections from the current file. Variables can be colors, numbers, strings, or booleans.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            collectionName: {
+                type: 'string',
+                description: 'Filter by collection name (case-insensitive contains match)',
+            },
+            type: {
+                type: 'string',
+                enum: ['COLOR', 'FLOAT', 'STRING', 'BOOLEAN', 'ALL'],
+                description: 'Filter by variable type. Default is ALL.',
+                default: 'ALL',
+            },
+            limit: {
+                type: 'number',
+                description: 'Maximum number of variables to return. Default is 100.',
+                default: 100,
+            },
+        },
+        required: [],
+    },
+};
+export async function getVariables(params) {
+    return figmaWebSocket.sendCommand('getVariables', params);
+}

package/dist/tools/moveNode.d.ts

@@ -0,0 +1,28 @@
+export declare const moveNodeSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            nodeId: {
+                type: string;
+                description: string;
+            };
+            parentId: {
+                type: string;
+                description: string;
+            };
+            index: {
+                type: string;
+                description: string;
+            };
+            returnScreenshot: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: string[];
+    };
+};
+export declare function moveNode(params: Record<string, unknown>): Promise<unknown>;