Skip to main content
Glama

Cursor Talk to Figma MCP

by paragdesai1

create_component_instance

Generate a component instance in Figma using Cursor AI's integration to programmatically modify designs within the Model Context Protocol framework.

Instructions

Create an instance of a component in Figma

Input Schema

NameRequiredDescriptionDefault

No arguments

Input Schema (JSON Schema)

{ "$schema": "http://json-schema.org/draft-07/schema#", "additionalProperties": false, "properties": {}, "type": "object" }

Implementation Reference

  • MCP tool registration for 'create_component_instance', including schema (parameters: componentKey, x, y) and forwarding handler that sends command to Figma plugin
    // Create Component Instance Tool 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) }`, }, ], }; } } );
  • Figma plugin handler: imports component by key using figma.importComponentByKeyAsync, creates instance, positions it, appends to 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}`); } }
  • Dispatch in handleCommand switch statement calling createComponentInstance
    case "create_component_instance":
  • FigmaCommand type includes 'create_component_instance' command name used by sendCommandToFigma
    | "create_component_instance"
  • Handler dispatch in Figma plugin's handleCommand function (duplicate for emphasis)
    case "create_component_instance": return await createComponentInstance(params); case "export_node_as_image": return await exportNodeAsImage(params); case "set_corner_radius": return await setCornerRadius(params); case "set_text_content": return await setTextContent(params); case "clone_node": return await cloneNode(params); case "scan_text_nodes": return await scanTextNodes(params); case "set_multiple_text_contents": return await setMultipleTextContents(params); case "get_annotations": return await getAnnotations(params); case "set_annotation": return await setAnnotation(params); case "scan_nodes_by_types": return await scanNodesByTypes(params); case "set_multiple_annotations": return await setMultipleAnnotations(params); case "set_layout_mode": return await setLayoutMode(params); case "set_padding": return await setPadding(params); case "set_axis_align": return await setAxisAlign(params); case "set_layout_sizing": return await setLayoutSizing(params); case "set_item_spacing": return await setItemSpacing(params); default: throw new Error(`Unknown command: ${command}`); } } // Command implementations

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/paragdesai1/parag-Figma-MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server