Skip to main content
Glama
paragdesai1

Cursor Talk to Figma MCP

by paragdesai1

create_component_instance

Create component instances in Figma designs by specifying component keys and positioning coordinates.

Instructions

Create an instance of a component in Figma

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
componentKeyYesKey of the component to instantiate
xYesX position
yYesY position

Implementation Reference

  • The core handler function in the Figma plugin that imports a component by its key using figma.importComponentByKeyAsync, creates an instance, positions it, and adds it to 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}`); } }
  • MCP server tool registration, including input schema (Zod) and thin proxy handler that forwards the command to the Figma plugin via sendCommandToFigma WebSocket proxy.
    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) }`, }, ], }; } } );
  • Input schema definition using Zod for validating componentKey, x, and y parameters.
    componentKey: z.string().describe("Key of the component to instantiate"), x: z.number().describe("X position"), y: z.number().describe("Y position"), },

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