create_component_instance
Create a component instance in Figma by specifying its key and positioning coordinates to automate design element placement.
Instructions
Create an instance of a component in Figma
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentKey | Yes | Key of the component to instantiate | |
| x | Yes | X position | |
| y | Yes | Y position |
Implementation Reference
- The complete MCP tool definition including registration, input schema, and handler function for 'create_component_instance'. The handler proxies the request to the Figma plugin via sendCommandToFigma, handling the tool execution logic and error responses.
server.tool( "create_component_instance", "Create an instance of a component in Figma", { componentKey: z.string().describe("Key of the component to instantiate"), x: z.number().describe("X position"), y: z.number().describe("Y position"), }, async ({ componentKey, x, y }) => { try { const result = await sendCommandToFigma("create_component_instance", { componentKey, x, y, }); const typedResult = result as any; return { content: [ { type: "text", text: JSON.stringify(typedResult), } ] } } catch (error) { return { content: [ { type: "text", text: `Error creating component instance: ${error instanceof Error ? error.message : String(error) }`, }, ], }; } } ); - Zod input schema validation for the 'create_component_instance' tool parameters.
{ componentKey: z.string().describe("Key of the component to instantiate"), x: z.number().describe("X position"), y: z.number().describe("Y position"), }, - src/talk_to_figma_mcp/server.ts:1204-1205 (registration)Registration of the 'create_component_instance' tool in the MCP server.
server.tool( "create_component_instance", - Helper function used by the handler to send the 'create_component_instance' command to the Figma WebSocket server.
function sendCommandToFigma( command: FigmaCommand, params: unknown = {}, timeoutMs: number = 30000 ): Promise<unknown> { return new Promise((resolve, reject) => { // If not connected, try to connect first if (!ws || ws.readyState !== WebSocket.OPEN) { connectToFigma(); reject(new Error("Not connected to Figma. Attempting to connect...")); return; } // Check if we need a channel for this command const requiresChannel = command !== "join"; if (requiresChannel && !currentChannel) { reject(new Error("Must join a channel before sending commands")); return; } const id = uuidv4(); const request = { id, type: command === "join" ? "join" : "message", ...(command === "join" ? { channel: (params as any).channel } : { channel: currentChannel }), message: { id, command, params: { ...(params as any), commandId: id, // Include the command ID in params }, }, }; // Set timeout for request const timeout = setTimeout(() => { if (pendingRequests.has(id)) { pendingRequests.delete(id); logger.error(`Request ${id} to Figma timed out after ${timeoutMs / 1000} seconds`); reject(new Error('Request to Figma timed out')); } }, timeoutMs); // Store the promise callbacks to resolve/reject later pendingRequests.set(id, { resolve, reject, timeout, lastActivity: Date.now() }); // Send the request logger.info(`Sending command to Figma: ${command}`); logger.debug(`Request details: ${JSON.stringify(request)}`); ws.send(JSON.stringify(request)); }); }