Cursor Talk to Figma MCP

Instructions

Implementation Reference

• src/cursor_mcp_plugin/code.js:924-952 (handler)

  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}`);
    }
  }

• src/talk_to_figma_mcp/server.ts:1174-1210 (registration)

  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)
                }`,
            },
          ],
        };
      }
    }
  );

• src/talk_to_figma_mcp/server.ts:1178-1181 (schema)

  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"),
  },