set_layout_sizing
Define horizontal and vertical sizing modes for auto-layout frames in Figma. Enable precise control over design elements to ensure consistent layouts using Cursor AI's Figma integration.
Instructions
Set horizontal and vertical sizing modes for an auto-layout frame in Figma
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Input Schema (JSON Schema)
{
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false,
"properties": {},
"type": "object"
}
Implementation Reference
- src/talk_to_figma_mcp/server.ts:2075-2126 (registration)MCP tool registration for 'set_layout_sizing', including Zod input schema (nodeId required, horizontal/vertical sizing optional enums FIXED/HUG/FILL) and thin handler that forwards parameters to Figma plugin via sendCommandToFigma and formats response.server.tool( "set_layout_sizing", "Set horizontal and vertical sizing modes for an auto-layout frame in Figma", { nodeId: z.string().describe("The ID of the frame to modify"), layoutSizingHorizontal: z .enum(["FIXED", "HUG", "FILL"]) .optional() .describe("Horizontal sizing mode (HUG for frames/text only, FILL for auto-layout children only)"), layoutSizingVertical: z .enum(["FIXED", "HUG", "FILL"]) .optional() .describe("Vertical sizing mode (HUG for frames/text only, FILL for auto-layout children only)") }, async ({ nodeId, layoutSizingHorizontal, layoutSizingVertical }) => { try { const result = await sendCommandToFigma("set_layout_sizing", { nodeId, layoutSizingHorizontal, layoutSizingVertical }); const typedResult = result as { name: string }; // Create a message about which sizing modes were set const sizingMessages = []; if (layoutSizingHorizontal !== undefined) sizingMessages.push(`horizontal: ${layoutSizingHorizontal}`); if (layoutSizingVertical !== undefined) sizingMessages.push(`vertical: ${layoutSizingVertical}`); const sizingText = sizingMessages.length > 0 ? `layout sizing (${sizingMessages.join(', ')})` : "layout sizing"; return { content: [ { type: "text", text: `Set ${sizingText} for frame "${typedResult.name}"`, }, ], }; } catch (error) { return { content: [ { type: "text", text: `Error setting layout sizing: ${error instanceof Error ? error.message : String(error)}`, }, ], }; } } );
- src/cursor_mcp_plugin/code.js:2837-2922 (handler)Core Figma plugin implementation of set_layout_sizing command: validates node type (FRAME/COMPONENT/INSTANCE), requires auto-layout enabled, validates/enforces sizing mode rules (HUG only on FRAME/TEXT, FILL only on auto-layout children), sets node.layoutSizingHorizontal/Vertical properties, returns updated node info.async function setLayoutSizing(params) { const { nodeId, layoutSizingHorizontal, layoutSizingVertical } = params || {}; // Get the target node const node = await figma.getNodeByIdAsync(nodeId); if (!node) { throw new Error(`Node with ID ${nodeId} not found`); } // Check if node is a frame or component that supports layout sizing if ( node.type !== "FRAME" && node.type !== "COMPONENT" && node.type !== "COMPONENT_SET" && node.type !== "INSTANCE" ) { throw new Error(`Node type ${node.type} does not support layout sizing`); } // Check if the node has auto-layout enabled if (node.layoutMode === "NONE") { throw new Error( "Layout sizing can only be set on auto-layout frames (layoutMode must not be NONE)" ); } // Validate and set layoutSizingHorizontal if provided if (layoutSizingHorizontal !== undefined) { if (!["FIXED", "HUG", "FILL"].includes(layoutSizingHorizontal)) { throw new Error( "Invalid layoutSizingHorizontal value. Must be one of: FIXED, HUG, FILL" ); } // HUG is only valid on auto-layout frames and text nodes if ( layoutSizingHorizontal === "HUG" && !["FRAME", "TEXT"].includes(node.type) ) { throw new Error( "HUG sizing is only valid on auto-layout frames and text nodes" ); } // FILL is only valid on auto-layout children if ( layoutSizingHorizontal === "FILL" && (!node.parent || node.parent.layoutMode === "NONE") ) { throw new Error("FILL sizing is only valid on auto-layout children"); } node.layoutSizingHorizontal = layoutSizingHorizontal; } // Validate and set layoutSizingVertical if provided if (layoutSizingVertical !== undefined) { if (!["FIXED", "HUG", "FILL"].includes(layoutSizingVertical)) { throw new Error( "Invalid layoutSizingVertical value. Must be one of: FIXED, HUG, FILL" ); } // HUG is only valid on auto-layout frames and text nodes if ( layoutSizingVertical === "HUG" && !["FRAME", "TEXT"].includes(node.type) ) { throw new Error( "HUG sizing is only valid on auto-layout frames and text nodes" ); } // FILL is only valid on auto-layout children if ( layoutSizingVertical === "FILL" && (!node.parent || node.parent.layoutMode === "NONE") ) { throw new Error("FILL sizing is only valid on auto-layout children"); } node.layoutSizingVertical = layoutSizingVertical; } return { id: node.id, name: node.name, layoutSizingHorizontal: node.layoutSizingHorizontal, layoutSizingVertical: node.layoutSizingVertical, layoutMode: node.layoutMode, }; }
- src/cursor_mcp_plugin/code.js:175-176 (handler)Dispatch case in Figma plugin's handleCommand switch statement that routes 'set_layout_sizing' websocket command to the setLayoutSizing handler function.case "set_layout_sizing": return await setLayoutSizing(params);