create_rectangle
Generate a rectangle in Figma by specifying its position, dimensions, and optional attributes like name or parent node ID using the MCP server for design automation.
Instructions
Create a new rectangle in Figma
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| height | Yes | Height of the rectangle | |
| name | No | Optional name for the rectangle | |
| parentId | No | Optional parent node ID to append the rectangle to | |
| width | Yes | Width of the rectangle | |
| x | Yes | X position | |
| y | Yes | Y position |
Implementation Reference
- src/cursor_mcp_plugin/code.js:207-246 (handler)The core handler function that creates a rectangle in Figma using figma.createRectangle(), sets its position, size, name, handles parent appending, and returns node details.async function createRectangle(params) { const { x = 0, y = 0, width = 100, height = 100, name = "Rectangle", parentId, } = params || {}; const rect = figma.createRectangle(); rect.x = x; rect.y = y; rect.resize(width, height); rect.name = name; // If parentId is provided, append to that node, otherwise append to current page if (parentId) { const parentNode = await figma.getNodeByIdAsync(parentId); if (!parentNode) { throw new Error(`Parent node not found with ID: ${parentId}`); } if (!("appendChild" in parentNode)) { throw new Error(`Parent node does not support children: ${parentId}`); } parentNode.appendChild(rect); } else { figma.currentPage.appendChild(rect); } return { id: rect.id, name: rect.name, x: rect.x, y: rect.y, width: rect.width, height: rect.height, parentId: rect.parent ? rect.parent.id : undefined, }; }
- src/talk_to_figma_mcp/server.ts:121-156 (registration)Registers the MCP tool 'create_rectangle' with Zod input schema, description, and handler that proxies the command to the Figma plugin via WebSocket.server.tool( "create_rectangle", "Create a new rectangle in Figma", { x: z.number().describe("X position"), y: z.number().describe("Y position"), width: z.number().describe("Width of the rectangle"), height: z.number().describe("Height of the rectangle"), name: z.string().optional().describe("Optional name for the rectangle"), parentId: z.string().optional().describe("Optional parent node ID to append the rectangle to") }, async ({ x, y, width, height, name, parentId }) => { try { const result = await sendCommandToFigma('create_rectangle', { x, y, width, height, name: name || 'Rectangle', parentId }); return { content: [ { type: "text", text: `Created rectangle "${JSON.stringify(result)}"` } ] } } catch (error) { return { content: [ { type: "text", text: `Error creating rectangle: ${error instanceof Error ? error.message : String(error)}` } ] }; } } );
- Zod schema defining the input parameters for the 'create_rectangle' tool: x, y, width, height, optional name and parentId.{ x: z.number().describe("X position"), y: z.number().describe("Y position"), width: z.number().describe("Width of the rectangle"), height: z.number().describe("Height of the rectangle"), name: z.string().optional().describe("Optional name for the rectangle"), parentId: z.string().optional().describe("Optional parent node ID to append the rectangle to") },
- src/cursor_mcp_plugin/code.js:73-74 (handler)Dispatches the 'create_rectangle' command to the createRectangle handler function in the Figma plugin's command router.case "create_rectangle": return await createRectangle(params);
- src/talk_to_figma_mcp/server.ts:763-763 (registration)Includes 'create_rectangle' in the FigmaCommand type union for type safety.| 'create_rectangle'