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

src/talk_to_figma_mcp/server.ts:534-538 (schema)

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

src/talk_to_figma_mcp/server.ts:759-778 (schema)

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';

Talk to Figma MCP