Skip to main content
Glama

create_frame

Add a new frame to Figma designs by specifying position, size, color, and other properties through the Claude Talk to Figma MCP server.

Instructions

Create a new frame in Figma

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
xYesX position
yYesY position
widthYesWidth of the frame
heightYesHeight of the frame
nameNoOptional name for the frame
parentIdNoOptional parent node ID to append the frame to
fillColorNoFill color in RGBA format
strokeColorNoStroke color in RGBA format
strokeWeightNoStroke weight

Implementation Reference

  • Complete registration of the 'create_frame' MCP tool, including Zod input schema, description, and the handler function that executes the tool by sending a 'create_frame' command to the Figma websocket utility and returns structured content response.
    server.tool( "create_frame", "Create a new frame in Figma", { x: z.number().describe("X position"), y: z.number().describe("Y position"), width: z.number().describe("Width of the frame"), height: z.number().describe("Height of the frame"), name: z.string().optional().describe("Optional name for the frame"), parentId: z .string() .optional() .describe("Optional parent node ID to append the frame to"), fillColor: z .object({ r: z.number().min(0).max(1).describe("Red component (0-1)"), g: z.number().min(0).max(1).describe("Green component (0-1)"), b: z.number().min(0).max(1).describe("Blue component (0-1)"), a: z .number() .min(0) .max(1) .optional() .describe("Alpha component (0-1)"), }) .optional() .describe("Fill color in RGBA format"), strokeColor: z .object({ r: z.number().min(0).max(1).describe("Red component (0-1)"), g: z.number().min(0).max(1).describe("Green component (0-1)"), b: z.number().min(0).max(1).describe("Blue component (0-1)"), a: z .number() .min(0) .max(1) .optional() .describe("Alpha component (0-1)"), }) .optional() .describe("Stroke color in RGBA format"), strokeWeight: z.number().positive().optional().describe("Stroke weight"), }, async ({ x, y, width, height, name, parentId, fillColor, strokeColor, strokeWeight, }) => { try { const result = await sendCommandToFigma("create_frame", { x, y, width, height, name: name || "Frame", parentId, fillColor: fillColor || { r: 1, g: 1, b: 1, a: 1 }, strokeColor: strokeColor, strokeWeight: strokeWeight, }); const typedResult = result as { name: string; id: string }; return { content: [ { type: "text", text: `Created frame "${typedResult.name}" with ID: ${typedResult.id}. Use the ID as the parentId to appendChild inside this frame.`, }, ], }; } catch (error) { return { content: [ { type: "text", text: `Error creating frame: ${error instanceof Error ? error.message : String(error)}`, }, ], }; } } );
  • 'create_frame' included in the FigmaCommand type union for type safety in internal command sending.
    | "create_frame"
  • Invocation of registerCreationTools which registers the create_frame tool (among creation tools) to the MCP server.
    registerCreationTools(server);

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