Talk to Figma MCP

Instructions

Implementation Reference

• src/cursor_mcp_plugin/code.js:248-287 (handler)

  Core implementation of the create_frame tool logic. Creates a Figma Frame node using the Figma API, sets its position, size, name, appends it to a parent node or the current page if specified, and returns the frame details.
  async function createFrame(params) { const { x = 0, y = 0, width = 100, height = 100, name = "Frame", parentId, } = params || {}; const frame = figma.createFrame(); frame.x = x; frame.y = y; frame.resize(width, height); frame.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(frame); } else { figma.currentPage.appendChild(frame); } return { id: frame.id, name: frame.name, x: frame.x, y: frame.y, width: frame.width, height: frame.height, parentId: frame.parent ? frame.parent.id : undefined, }; }
• src/cursor_mcp_plugin/code.js:62-106 (registration)

  Dispatch handler in Figma plugin that registers and routes the 'create_frame' command to the createFrame implementation function.
  async function handleCommand(command, params) { switch (command) { case "get_document_info": return await getDocumentInfo(); case "get_selection": return await getSelection(); case "get_node_info": if (!params || !params.nodeId) { throw new Error("Missing nodeId parameter"); } return await getNodeInfo(params.nodeId); case "create_rectangle": return await createRectangle(params); case "create_frame": return await createFrame(params); case "create_text": return await createText(params); case "set_fill_color": return await setFillColor(params); case "set_stroke_color": return await setStrokeColor(params); case "move_node": return await moveNode(params); case "resize_node": return await resizeNode(params); case "delete_node": return await deleteNode(params); case "get_styles": return await getStyles(); case "get_local_components": return await getLocalComponents(); case "get_team_components": return await getTeamComponents(); case "create_component_instance": return await createComponentInstance(params); case "export_node_as_image": return await exportNodeAsImage(params); case "execute_code": return await executeCode(params); case "set_corner_radius": return await setCornerRadius(params); default: throw new Error(`Unknown command: ${command}`); } }
• src/talk_to_figma_mcp/server.ts:159-210 (registration)

  MCP server tool registration for 'create_frame', including description, Zod input schema, and handler that proxies the command to the Figma plugin via WebSocket and formats the response.
  server.tool( "create_frame", "Create a new frame in Figma", { x: z.number().describe("X position"), y: z.number().describe("Y position"), width: z.number().describe("Width of the frame"), height: z.number().describe("Height of the frame"), name: z.string().optional().describe("Optional name for the frame"), parentId: z.string().optional().describe("Optional parent node ID to append the frame to"), fillColor: z.object({ r: z.number().min(0).max(1).describe("Red component (0-1)"), g: z.number().min(0).max(1).describe("Green component (0-1)"), b: z.number().min(0).max(1).describe("Blue component (0-1)"), a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)") }).optional().describe("Fill color in RGBA format"), strokeColor: z.object({ r: z.number().min(0).max(1).describe("Red component (0-1)"), g: z.number().min(0).max(1).describe("Green component (0-1)"), b: z.number().min(0).max(1).describe("Blue component (0-1)"), a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)") }).optional().describe("Stroke color in RGBA format"), strokeWeight: z.number().positive().optional().describe("Stroke weight") }, async ({ x, y, width, height, name, parentId, fillColor, strokeColor, strokeWeight }) => { try { const result = await sendCommandToFigma('create_frame', { x, y, width, height, name: name || 'Frame', parentId, fillColor: fillColor || { r: 1, g: 1, b: 1, a: 1 }, strokeColor: strokeColor, strokeWeight: strokeWeight }); const typedResult = result as { name: string, id: string }; return { content: [ { type: "text", text: `Created frame "${typedResult.name}" with ID: ${typedResult.id}. Use the ID as the parentId to appendChild inside this frame.` } ] }; } catch (error) { return { content: [ { type: "text", text: `Error creating frame: ${error instanceof Error ? error.message : String(error)}` } ] }; } }
• src/talk_to_figma_mcp/server.ts:162-182 (schema)

  Zod schema defining the input parameters for the MCP 'create_frame' tool.
  { x: z.number().describe("X position"), y: z.number().describe("Y position"), width: z.number().describe("Width of the frame"), height: z.number().describe("Height of the frame"), name: z.string().optional().describe("Optional name for the frame"), parentId: z.string().optional().describe("Optional parent node ID to append the frame to"), fillColor: z.object({ r: z.number().min(0).max(1).describe("Red component (0-1)"), g: z.number().min(0).max(1).describe("Green component (0-1)"), b: z.number().min(0).max(1).describe("Blue component (0-1)"), a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)") }).optional().describe("Fill color in RGBA format"), strokeColor: z.object({ r: z.number().min(0).max(1).describe("Red component (0-1)"), g: z.number().min(0).max(1).describe("Green component (0-1)"), b: z.number().min(0).max(1).describe("Blue component (0-1)"), a: z.number().min(0).max(1).optional().describe("Alpha component (0-1)") }).optional().describe("Stroke color in RGBA format"), strokeWeight: z.number().positive().optional().describe("Stroke weight") },