create_rectangle
Add a rectangle to Figma designs by specifying position and dimensions. This tool enables programmatic shape creation through the Talk to Figma MCP server.
Instructions
Create a new rectangle in Figma
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| x | Yes | X position | |
| y | Yes | Y position | |
| width | Yes | Width of the rectangle | |
| height | Yes | Height of the rectangle | |
| name | No | Optional name for the rectangle | |
| parentId | No | Optional parent node ID to append the rectangle to |
Implementation Reference
- src/cursor_mcp_plugin/code.js:207-246 (handler)Core handler function that creates a rectangle in Figma using figma.createRectangle(), sets its position, dimensions, name, and appends it to a specified parent node or the current page.
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)MCP tool registration for 'create_rectangle', including schema definition with Zod and proxy handler that forwards to Figma plugin via sendCommandToFigma.
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)}` } ] }; } } ); - src/cursor_mcp_plugin/code.js:73-74 (registration)Registration/dispatch of 'create_rectangle' command in the Figma plugin's handleCommand switch statement.
case "create_rectangle": return await createRectangle(params); - Input schema for create_rectangle tool using Zod validation.
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") },