figma-code-agent-mcp 1.0.0

package/dist/tools/captureScreenshot.d.ts

@@ -0,0 +1,28 @@
+export declare const captureScreenshotSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            nodeId: {
+                type: string;
+                description: string;
+            };
+            scale: {
+                type: string;
+                description: string;
+                default: number;
+                minimum: number;
+                maximum: number;
+            };
+            format: {
+                type: string;
+                description: string;
+                enum: string[];
+                default: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare function captureScreenshot(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/captureScreenshot.js

@@ -0,0 +1,31 @@
+import { figmaWebSocket } from '../websocket.js';
+export const captureScreenshotSchema = {
+    name: 'capture_screenshot',
+    description: 'Capture a screenshot of a node as an image. Returns base64-encoded image data.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            nodeId: {
+                type: 'string',
+                description: 'ID of the node to capture',
+            },
+            scale: {
+                type: 'number',
+                description: 'Scale factor for the export (1 = 100%, 2 = 200%, etc.)',
+                default: 1,
+                minimum: 0.01,
+                maximum: 4,
+            },
+            format: {
+                type: 'string',
+                description: 'Export format',
+                enum: ['PNG', 'JPG', 'SVG', 'PDF'],
+                default: 'PNG',
+            },
+        },
+        required: ['nodeId'],
+    },
+};
+export async function captureScreenshot(params) {
+    return figmaWebSocket.sendCommand('captureScreenshot', params);
+}

package/dist/tools/cloneNode.d.ts

@@ -0,0 +1,43 @@
+export declare const cloneNodeSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            nodeId: {
+                type: string;
+                description: string;
+            };
+            count: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            parentId: {
+                type: string;
+                description: string;
+            };
+            offsetX: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            offsetY: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            modifications: {
+                type: string;
+                description: string;
+            };
+            returnScreenshot: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: string[];
+    };
+};
+export declare function cloneNode(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/cloneNode.js

@@ -0,0 +1,46 @@
+import { figmaWebSocket } from '../websocket.js';
+export const cloneNodeSchema = {
+    name: 'clone_node',
+    description: 'Clone/duplicate a node. Can optionally modify properties on the clone. Useful for creating multiple similar elements.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            nodeId: {
+                type: 'string',
+                description: 'ID of the node to clone',
+            },
+            count: {
+                type: 'number',
+                description: 'Number of clones to create (default 1)',
+                default: 1,
+            },
+            parentId: {
+                type: 'string',
+                description: 'Parent to place clones in (default: same as original)',
+            },
+            offsetX: {
+                type: 'number',
+                description: 'X offset for each clone (clones stack with this offset)',
+                default: 0,
+            },
+            offsetY: {
+                type: 'number',
+                description: 'Y offset for each clone (clones stack with this offset)',
+                default: 0,
+            },
+            modifications: {
+                type: 'object',
+                description: 'Properties to modify on clones (name, x, y, width, height, etc.)',
+            },
+            returnScreenshot: {
+                type: 'boolean',
+                description: 'If true, returns a screenshot of the cloned node(s) for visual verification',
+                default: false,
+            },
+        },
+        required: ['nodeId'],
+    },
+};
+export async function cloneNode(params) {
+    return figmaWebSocket.sendCommand('cloneNode', params);
+}

package/dist/tools/createFrame.d.ts

@@ -0,0 +1,157 @@
+export declare const createFrameSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            name: {
+                type: string;
+                description: string;
+            };
+            x: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            y: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            width: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            height: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            parentId: {
+                type: string;
+                description: string;
+            };
+            cornerRadius: {
+                type: string;
+                description: 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[];
+            };
+            strokeColor: {
+                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[];
+            };
+            strokeWeight: {
+                type: string;
+                description: string;
+            };
+            layoutMode: {
+                type: string;
+                enum: string[];
+                description: string;
+            };
+            primaryAxisSizingMode: {
+                type: string;
+                enum: string[];
+                description: string;
+            };
+            counterAxisSizingMode: {
+                type: string;
+                enum: string[];
+                description: string;
+            };
+            primaryAxisAlignItems: {
+                type: string;
+                enum: string[];
+                description: string;
+            };
+            counterAxisAlignItems: {
+                type: string;
+                enum: string[];
+                description: string;
+            };
+            itemSpacing: {
+                type: string;
+                description: string;
+            };
+            padding: {
+                type: string;
+                description: string;
+            };
+            paddingTop: {
+                type: string;
+                description: string;
+            };
+            paddingBottom: {
+                type: string;
+                description: string;
+            };
+            paddingLeft: {
+                type: string;
+                description: string;
+            };
+            paddingRight: {
+                type: string;
+                description: string;
+            };
+            returnScreenshot: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: string[];
+    };
+};
+export declare function createFrame(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/createFrame.js

@@ -0,0 +1,114 @@
+import { figmaWebSocket } from '../websocket.js';
+export const createFrameSchema = {
+    name: 'create_frame',
+    description: 'Create a new frame in Figma. Frames are containers that can hold other elements.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            name: {
+                type: 'string',
+                description: 'Name of the frame',
+            },
+            x: {
+                type: 'number',
+                description: 'X position of the frame',
+                default: 0,
+            },
+            y: {
+                type: 'number',
+                description: 'Y position of the frame',
+                default: 0,
+            },
+            width: {
+                type: 'number',
+                description: 'Width of the frame',
+                default: 100,
+            },
+            height: {
+                type: 'number',
+                description: 'Height of the frame',
+                default: 100,
+            },
+            parentId: {
+                type: 'string',
+                description: 'ID of the parent node to create the frame in. If not provided, creates at root level.',
+            },
+            cornerRadius: {
+                type: 'number',
+                description: 'Corner radius of the frame',
+            },
+            fillColor: {
+                type: 'object',
+                description: 'Fill color of the frame (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'],
+            },
+            strokeColor: {
+                type: 'object',
+                description: 'Stroke/border 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'],
+            },
+            strokeWeight: {
+                type: 'number',
+                description: 'Stroke/border width in pixels',
+            },
+            layoutMode: {
+                type: 'string',
+                enum: ['NONE', 'HORIZONTAL', 'VERTICAL'],
+                description: 'Auto-layout direction. HORIZONTAL = row, VERTICAL = column',
+            },
+            primaryAxisSizingMode: {
+                type: 'string',
+                enum: ['FIXED', 'AUTO'],
+                description: 'How the frame sizes along primary axis (FIXED = fixed size, AUTO = hug)',
+            },
+            counterAxisSizingMode: {
+                type: 'string',
+                enum: ['FIXED', 'AUTO'],
+                description: 'How the frame sizes along counter axis',
+            },
+            primaryAxisAlignItems: {
+                type: 'string',
+                enum: ['MIN', 'CENTER', 'MAX', 'SPACE_BETWEEN'],
+                description: 'Alignment of children along primary axis',
+            },
+            counterAxisAlignItems: {
+                type: 'string',
+                enum: ['MIN', 'CENTER', 'MAX', 'BASELINE'],
+                description: 'Alignment of children along counter axis',
+            },
+            itemSpacing: {
+                type: 'number',
+                description: 'Gap between children in pixels',
+            },
+            padding: {
+                type: 'number',
+                description: 'Padding on all sides in pixels',
+            },
+            paddingTop: { type: 'number', description: 'Top padding' },
+            paddingBottom: { type: 'number', description: 'Bottom padding' },
+            paddingLeft: { type: 'number', description: 'Left padding' },
+            paddingRight: { type: 'number', description: 'Right padding' },
+            returnScreenshot: {
+                type: 'boolean',
+                description: 'If true, returns a screenshot of the created frame for visual verification',
+                default: false,
+            },
+        },
+        required: ['name'],
+    },
+};
+export async function createFrame(params) {
+    return figmaWebSocket.sendCommand('createFrame', params);
+}

package/dist/tools/createInstance.d.ts

@@ -0,0 +1,38 @@
+export declare const createInstanceSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            componentKey: {
+                type: string;
+                description: string;
+            };
+            componentId: {
+                type: string;
+                description: string;
+            };
+            x: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            y: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            parentId: {
+                type: string;
+                description: string;
+            };
+            returnScreenshot: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: never[];
+    };
+};
+export declare function createInstance(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/createInstance.js

@@ -0,0 +1,41 @@
+import { figmaWebSocket } from '../websocket.js';
+export const createInstanceSchema = {
+    name: 'create_instance',
+    description: 'Create an instance of a component in Figma. Works with both local (unpublished) and library (published) components.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            componentKey: {
+                type: 'string',
+                description: 'The key of the component (works for both local and published components)',
+            },
+            componentId: {
+                type: 'string',
+                description: 'The node ID of a local component (use this for unpublished components)',
+            },
+            x: {
+                type: 'number',
+                description: 'X position of the instance',
+                default: 0,
+            },
+            y: {
+                type: 'number',
+                description: 'Y position of the instance',
+                default: 0,
+            },
+            parentId: {
+                type: 'string',
+                description: 'ID of the parent node to create the instance in.',
+            },
+            returnScreenshot: {
+                type: 'boolean',
+                description: 'If true, returns a screenshot of the created instance for visual verification',
+                default: false,
+            },
+        },
+        required: [],
+    },
+};
+export async function createInstance(params) {
+    return figmaWebSocket.sendCommand('createInstance', params);
+}

package/dist/tools/createRectangle.d.ts

@@ -0,0 +1,108 @@
+export declare const createRectangleSchema: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            name: {
+                type: string;
+                description: string;
+            };
+            x: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            y: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            width: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            height: {
+                type: string;
+                description: string;
+                default: number;
+            };
+            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;
+            };
+            cornerRadius: {
+                type: string;
+                description: string;
+            };
+            strokeColor: {
+                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[];
+            };
+            strokeWeight: {
+                type: string;
+                description: string;
+            };
+            returnScreenshot: {
+                type: string;
+                description: string;
+                default: boolean;
+            };
+        };
+        required: never[];
+    };
+};
+export declare function createRectangle(params: Record<string, unknown>): Promise<unknown>;

package/dist/tools/createRectangle.js

@@ -0,0 +1,77 @@
+import { figmaWebSocket } from '../websocket.js';
+export const createRectangleSchema = {
+    name: 'create_rectangle',
+    description: 'Create a new rectangle shape in Figma.',
+    inputSchema: {
+        type: 'object',
+        properties: {
+            name: {
+                type: 'string',
+                description: 'Name of the rectangle',
+            },
+            x: {
+                type: 'number',
+                description: 'X position of the rectangle',
+                default: 0,
+            },
+            y: {
+                type: 'number',
+                description: 'Y position of the rectangle',
+                default: 0,
+            },
+            width: {
+                type: 'number',
+                description: 'Width of the rectangle',
+                default: 100,
+            },
+            height: {
+                type: 'number',
+                description: 'Height of the rectangle',
+                default: 100,
+            },
+            fillColor: {
+                type: 'object',
+                description: 'Fill color of the rectangle (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 rectangle in.',
+            },
+            cornerRadius: {
+                type: 'number',
+                description: 'Corner radius of the rectangle',
+            },
+            strokeColor: {
+                type: 'object',
+                description: 'Stroke/border 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'],
+            },
+            strokeWeight: {
+                type: 'number',
+                description: 'Stroke/border width in pixels',
+            },
+            returnScreenshot: {
+                type: 'boolean',
+                description: 'If true, returns a screenshot of the created element for visual verification',
+                default: false,
+            },
+        },
+        required: [],
+    },
+};
+export async function createRectangle(params) {
+    return figmaWebSocket.sendCommand('createRectangle', params);
+}