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

Schema Changelog

Changes observed during successful MCP inspections.

  1. Changed5 schema fields changedv1.0.0
    • removedInput schema / additionalProperties
      Removed value: -false
    • addedInput schema / properties / componentKey
      Added value: +{
      +  "description": "Key of the component to instantiate",
      +  "type": "string"
      +}
    • addedInput schema / properties / x
      Added value: +{
      +  "description": "X position",
      +  "type": "number"
      +}
    • addedInput schema / properties / y
      Added value: +{
      +  "description": "Y position",
      +  "type": "number"
      +}
    • addedInput schema / required
      Added value: +[
      +  "componentKey",
      +  "x",
      +  "y"
      +]
  2. First observed

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description bears the full burden for behavioral disclosure. It only says 'Create an instance' without stating that this mutates the document, whether a loaded file is required, what the return value is, or any coordinate system assumptions. This is a significant gap for a creation tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is seven words long and wastes no words. However, it is essentially a restatement of the tool name with 'in Figma' appended, adding minimal new information. Still, its brevity is appropriate and it is front-loaded.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a tool with 3 required parameters, no annotations, and no output schema, the description is too sparse. It omits crucial operational context such as return value, coordinate space, and how to obtain a componentKey, and it does not position the tool among the many sibling editing operations.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema descriptions cover 100% of parameters ('X position', 'Y position', 'Key of the component to instantiate'), so the description need not repeat them. The baseline of 3 applies because the description adds no additional semantic depth such as coordinate units or instructions on sourcing the componentKey.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb+resource ('Create an instance of a component') and mentions the context 'in Figma', which clearly conveys the tool's function. However, it does not distinguish from sibling creation tools like create_frame or create_text beyond the component-instance target, so it falls short of a 5.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives, no prerequisites for obtaining a componentKey, and no mention of how to position the instance. There is no contrast with siblings like create_frame or clone_node, so the agent gets no decision support.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.