create_frame
Create a new frame in Figma designs with customizable position, size, colors, and layout properties to structure UI elements.
Instructions
Create a new frame in Figma
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| x | Yes | X position | |
| y | Yes | Y position | |
| width | Yes | Width of the frame | |
| height | Yes | Height of the frame | |
| name | No | Optional name for the frame | |
| parentId | No | Optional parent node ID to append the frame to | |
| fillColor | No | Fill color in RGBA format | |
| strokeColor | No | Stroke color in RGBA format | |
| strokeWeight | No | Stroke weight | |
| layoutMode | No | Auto-layout mode for the frame | |
| layoutWrap | No | Whether the auto-layout frame wraps its children | |
| paddingTop | No | Top padding for auto-layout frame | |
| paddingRight | No | Right padding for auto-layout frame | |
| paddingBottom | No | Bottom padding for auto-layout frame | |
| paddingLeft | No | Left padding for auto-layout frame | |
| primaryAxisAlignItems | No | Primary axis alignment for auto-layout frame. Note: When set to SPACE_BETWEEN, itemSpacing will be ignored as children will be evenly spaced. | |
| counterAxisAlignItems | No | Counter axis alignment for auto-layout frame | |
| layoutSizingHorizontal | No | Horizontal sizing mode for auto-layout frame | |
| layoutSizingVertical | No | Vertical sizing mode for auto-layout frame | |
| itemSpacing | No | Distance between children in auto-layout frame. Note: This value will be ignored if primaryAxisAlignItems is set to SPACE_BETWEEN. |
Implementation Reference
- src/cursor_mcp_plugin/code.js:248-287 (handler)Core handler function that executes the create_frame logic using the Figma API: creates a frame, sets position/size/name, appends to parent or page, returns node info.async function createFrame(params) { const { x = 0, y = 0, width = 100, height = 100, name = "Frame", parentId, } = params || {}; const frame = figma.createFrame(); frame.x = x; frame.y = y; frame.resize(width, height); frame.name = name; // If parentId is provided, append to that node, otherwise append to current page if (parentId) { const parentNode = await figma.getNodeByIdAsync(parentId); if (!parentNode) { throw new Error(`Parent node not found with ID: ${parentId}`); } if (!("appendChild" in parentNode)) { throw new Error(`Parent node does not support children: ${parentId}`); } parentNode.appendChild(frame); } else { figma.currentPage.appendChild(frame); } return { id: frame.id, name: frame.name, x: frame.x, y: frame.y, width: frame.width, height: frame.height, parentId: frame.parent ? frame.parent.id : undefined, }; }
- src/cursor_mcp_plugin/code.js:75-76 (registration)Command dispatcher in Figma plugin that routes 'create_frame' requests to the createFrame handler.case "create_frame": return await createFrame(params);
- src/talk_to_figma_mcp/server.ts:159-211 (registration)MCP tool registration for 'create_frame', including Zod input schema and proxy handler that forwards to Figma plugin.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)}` } ] }; } } );
- Zod schema defining input parameters for the create_frame tool.{ 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") },