set_layout_sizing
Configure horizontal and vertical sizing modes for auto-layout frames in Figma designs, enabling precise control over how elements adapt to content or fill available space.
Instructions
Set horizontal and vertical sizing modes for an auto-layout frame in Figma
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | The ID of the frame to modify | |
| layoutSizingHorizontal | No | Horizontal sizing mode (HUG for frames/text only, FILL for auto-layout children only) | |
| layoutSizingVertical | No | Vertical sizing mode (HUG for frames/text only, FILL for auto-layout children only) |
Implementation Reference
- src/talk_to_figma_mcp/server.ts:2248-2299 (registration)MCP tool registration for 'set_layout_sizing', including schema definition (zod input validation) and handler function that proxies the command to the Figma plugin via sendCommandToFigma.
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)}`, }, ], }; } } );