Skip to main content

​
Overview

Convert a regular frame into an auto-layout frame or change the direction of an existing auto-layout frame. You can set the layout to horizontal, vertical, or remove auto-layout entirely.

​
Parameters

​
nodeId
string
required
The ID of the frame to modify
​
layoutMode
enum
required
Layout mode for the frameOptions:
  • NONE - Remove auto-layout from the frame
  • HORIZONTAL - Arrange children left to right
  • VERTICAL - Arrange children top to bottom
​
layoutWrap
enum
Whether the auto-layout frame wraps its childrenOptions:
  • NO_WRAP - Children stay in a single row/column (default)
  • WRAP - Children wrap to multiple rows/columns when space runs out

​
Response

{
  "content": [
    {
      "type": "text",
      "text": "Set layout mode of frame \"Card Container\" to HORIZONTAL with WRAP"
    }
  ]
}

​
Examples

​
Convert to horizontal auto-layout

await use_mcp_tool({
  server_name: "TalkToFigma",
  tool_name: "set_layout_mode",
  arguments: {
    nodeId: "123:456",
    layoutMode: "HORIZONTAL"
  }
});

​
Create vertical list with wrapping

await use_mcp_tool({
  server_name: "TalkToFigma",
  tool_name: "set_layout_mode",
  arguments: {
    nodeId: "123:456",
    layoutMode: "VERTICAL",
    layoutWrap: "WRAP"
  }
});

​
Remove auto-layout

await use_mcp_tool({
  server_name: "TalkToFigma",
  tool_name: "set_layout_mode",
  arguments: {
    nodeId: "123:456",
    layoutMode: "NONE"
  }
});

​
Use Cases

Navigation bars: Use HORIZONTAL layout mode to arrange menu items in a row Card grids: Combine HORIZONTAL layout with WRAP to create responsive card layouts Form fields: Use VERTICAL layout mode to stack labels and inputs Button groups: Use HORIZONTAL layout to arrange action buttons side by side

​
Related Tools

Build docs developers (and LLMs) love

Get started for freeTalk to us