create_component_instance

Create a component instance in Figma by specifying its key and position coordinates to reuse design elements efficiently.

Instructions

Create an instance of a component in Figma

Input Schema

TableJSON Schema

Name	Required	Description
`componentKey`	Yes	Key of the component to instantiate
`x`	Yes	X position
`y`	Yes	Y position

Implementation Reference

src/talk_to_figma_mcp/server.ts:1204-1240 (registration)

Registration of the MCP tool 'create_component_instance', including input schema validation with Zod and the handler function that forwards the request 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 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:1207-1211 (schema)
Input schema for the 'create_component_instance' tool using Zod for validation: componentKey (string), x (number), y (number).
```
{
  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:1212-1239 (handler)

Handler function for 'create_component_instance' tool. Sends the command with parameters to the Figma plugin via sendCommandToFigma, returns the result as text content or error message.

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:2655-2659 (schema)
TypeScript type definition for CommandParams of 'create_component_instance' used in sendCommandToFigma.
```
create_component_instance: {
  componentKey: string;
  x: number;
  y: number;
};
```

Talk to Figma MCP