create_component_instance
Create a new instance of a Figma component at specified coordinates to reuse design elements across your project.
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
- src/cursor_mcp_plugin/code.js:644-672 (handler)The core handler function that implements the create_component_instance tool logic using Figma's API to import a component by key and create an instance at the specified position on the current page.
async function createComponentInstance(params) { const { componentKey, x = 0, y = 0 } = params || {}; if (!componentKey) { throw new Error("Missing componentKey parameter"); } try { const component = await figma.importComponentByKeyAsync(componentKey); const instance = component.createInstance(); instance.x = x; instance.y = y; figma.currentPage.appendChild(instance); return { id: instance.id, name: instance.name, x: instance.x, y: instance.y, width: instance.width, height: instance.height, componentId: instance.componentId, }; } catch (error) { throw new Error(`Error creating component instance: ${error.message}`); } } - src/talk_to_figma_mcp/server.ts:531-561 (registration)MCP server tool registration for 'create_component_instance', including input schema (componentKey, x, y), description, and proxy handler that forwards the command to the Figma plugin via WebSocket.
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 { name: string, id: string }; return { content: [ { type: "text", text: `Created component instance "${typedResult.name}" with ID: ${typedResult.id}` } ] }; } catch (error) { return { content: [ { type: "text", text: `Error creating component instance: ${error instanceof Error ? error.message : String(error)}` } ] }; } } - Zod schema defining the input parameters for the create_component_instance MCP tool.
{ componentKey: z.string().describe("Key of the component to instantiate"), x: z.number().describe("X position"), y: z.number().describe("Y position") }, - src/cursor_mcp_plugin/code.js:95-106 (handler)Dispatch case in the Figma plugin's command handler that routes 'create_component_instance' calls to the implementation function.
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}`); } } - TypeScript union type including 'create_component_instance' as a valid Figma command.
type FigmaCommand = | 'get_document_info' | 'get_selection' | 'get_node_info' | 'create_rectangle' | 'create_frame' | 'create_text' | 'set_fill_color' | 'set_stroke_color' | 'move_node' | 'resize_node' | 'delete_node' | 'get_styles' | 'get_local_components' | 'get_team_components' | 'create_component_instance' | 'export_node_as_image' | 'execute_code' | 'join' | 'set_corner_radius';