Skip to main content
Glama
arinspunk

Claude Talk to Figma MCP

by arinspunk

create_rectangle

Add rectangles to Figma designs by specifying position, dimensions, and optional naming or parent elements for structured layouts.

Instructions

Create a new rectangle in Figma

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
xYesX position
yYesY position
widthYesWidth of the rectangle
heightYesHeight of the rectangle
nameNoOptional name for the rectangle
parentIdNoOptional parent node ID to append the rectangle to

Implementation Reference

  • The handler function that executes the create_rectangle tool logic by sending a command to Figma via websocket and formatting the response.
    async ({ x, y, width, height, name, parentId }) => {
      try {
        const result = await sendCommandToFigma("create_rectangle", {
          x,
          y,
          width,
          height,
          name: name || "Rectangle",
          parentId,
        });
        return {
          content: [
            {
              type: "text",
              text: `Created rectangle "${JSON.stringify(result)}"`,
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error creating rectangle: ${error instanceof Error ? error.message : String(error)}`,
            },
          ],
        };
      }
    }
  • Input schema using Zod for validating parameters of the create_rectangle tool.
    {
      x: z.number().describe("X position"),
      y: z.number().describe("Y position"),
      width: z.number().describe("Width of the rectangle"),
      height: z.number().describe("Height of the rectangle"),
      name: z.string().optional().describe("Optional name for the rectangle"),
      parentId: z
        .string()
        .optional()
        .describe("Optional parent node ID to append the rectangle to"),
    },
  • Registration of the create_rectangle MCP tool using server.tool, specifying name, description, input schema, and handler function.
    server.tool(
      "create_rectangle",
      "Create a new rectangle in Figma",
      {
        x: z.number().describe("X position"),
        y: z.number().describe("Y position"),
        width: z.number().describe("Width of the rectangle"),
        height: z.number().describe("Height of the rectangle"),
        name: z.string().optional().describe("Optional name for the rectangle"),
        parentId: z
          .string()
          .optional()
          .describe("Optional parent node ID to append the rectangle to"),
      },
      async ({ x, y, width, height, name, parentId }) => {
        try {
          const result = await sendCommandToFigma("create_rectangle", {
            x,
            y,
            width,
            height,
            name: name || "Rectangle",
            parentId,
          });
          return {
            content: [
              {
                type: "text",
                text: `Created rectangle "${JSON.stringify(result)}"`,
              },
            ],
          };
        } catch (error) {
          return {
            content: [
              {
                type: "text",
                text: `Error creating rectangle: ${error instanceof Error ? error.message : String(error)}`,
              },
            ],
          };
        }
      }
    );
  • Invocation of registerCreationTools function which registers the create_rectangle tool among others.
    registerCreationTools(server);
Behavior2/5

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

With no annotations provided, the description carries full burden for behavioral disclosure. It states this is a creation operation but doesn't mention whether it requires specific permissions, what happens on success/failure, whether the rectangle becomes part of the current selection, or any rate limits. For a mutation tool with zero annotation coverage, this leaves significant behavioral gaps.

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

Conciseness5/5

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

The description is a single, efficient sentence that states the core purpose without any wasted words. It's appropriately sized for a straightforward creation tool and gets directly to the point.

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 mutation tool with no annotations and no output schema, the description is inadequate. It doesn't explain what happens after creation (e.g., whether the new rectangle gets selected, what ID it receives, or how to reference it later). Given the complexity of a 6-parameter creation operation in a design tool context, more behavioral context is needed.

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?

The schema has 100% description coverage, with all parameters clearly documented in the schema itself. The description adds no additional parameter information beyond what's already in the schema, so it meets the baseline of 3 where the schema does the heavy lifting for parameter documentation.

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 clearly states the action ('Create') and resource ('a new rectangle in Figma'), making the purpose immediately understandable. However, it doesn't differentiate this tool from other creation tools like create_ellipse, create_frame, or create_polygon, which would require mentioning it specifically creates rectangular shapes rather than other geometric forms.

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 like create_frame or create_polygon, nor does it mention prerequisites such as needing an active Figma document or specific permissions. It simply states what the tool does without contextual usage information.

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

Install Server

Other Tools

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/arinspunk/claude-talk-to-figma-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server