Skip to main content

​
Overview

Control how children are aligned within an auto-layout frame. The primary axis runs in the direction of the layout (horizontal or vertical), while the counter axis runs perpendicular to it.

​
Parameters

​
nodeId
string
required
The ID of the frame to modify
​
primaryAxisAlignItems
enum
Primary axis alignment (distribution along the layout direction)For horizontal layouts:
  • MIN - Align left
  • MAX - Align right
  • CENTER - Center horizontally
  • SPACE_BETWEEN - Distribute with space between items
For vertical layouts:
  • MIN - Align top
  • MAX - Align bottom
  • CENTER - Center vertically
  • SPACE_BETWEEN - Distribute with space between items
When set to SPACE_BETWEEN, the itemSpacing property is ignored as children will be evenly spaced.
​
counterAxisAlignItems
enum
Counter axis alignment (alignment perpendicular to the layout direction)For horizontal layouts:
  • MIN - Align top
  • MAX - Align bottom
  • CENTER - Center vertically
  • BASELINE - Align text baselines
For vertical layouts:
  • MIN - Align left
  • MAX - Align right
  • CENTER - Center horizontally
  • BASELINE - Align text baselines

​
Response

{
  "content": [
    {
      "type": "text",
      "text": "Set axis alignment (primary: CENTER, counter: CENTER) for frame \"Button Group\""
    }
  ]
}

​
Examples

​
Center-aligned button

// Horizontally center text, vertically center content
await use_mcp_tool({
  server_name: "TalkToFigma",
  tool_name: "set_axis_align",
  arguments: {
    nodeId: "123:456", // Horizontal layout button
    primaryAxisAlignItems: "CENTER",
    counterAxisAlignItems: "CENTER"
  }
});

​
Space-between navigation

// Distribute nav items with space between them
await use_mcp_tool({
  server_name: "TalkToFigma",
  tool_name: "set_axis_align",
  arguments: {
    nodeId: "123:456", // Horizontal nav bar
    primaryAxisAlignItems: "SPACE_BETWEEN",
    counterAxisAlignItems: "CENTER"
  }
});

​
Left-aligned form fields

// Align form fields to the left, stretch full width
await use_mcp_tool({
  server_name: "TalkToFigma",
  tool_name: "set_axis_align",
  arguments: {
    nodeId: "123:456", // Vertical form container
    primaryAxisAlignItems: "MIN",
    counterAxisAlignItems: "MIN"
  }
});

​
Text baseline alignment

// Align text labels by their baseline
await use_mcp_tool({
  server_name: "TalkToFigma",
  tool_name: "set_axis_align",
  arguments: {
    nodeId: "123:456", // Horizontal layout with text
    primaryAxisAlignItems: "MIN",
    counterAxisAlignItems: "BASELINE"
  }
});

​
Understanding Axes

​
Horizontal Layout (HORIZONTAL)

  • Primary axis: Left to right →
  • Counter axis: Top to bottom ↓

​
Vertical Layout (VERTICAL)

  • Primary axis: Top to bottom ↓
  • Counter axis: Left to right →

​
Use Cases

Centered buttons: primaryAxisAlignItems: CENTER, counterAxisAlignItems: CENTER Navigation bars: primaryAxisAlignItems: SPACE_BETWEEN to distribute items evenly Form layouts: primaryAxisAlignItems: MIN to stack fields from top, counterAxisAlignItems: MIN to left-align Card headers: counterAxisAlignItems: CENTER to vertically center icon and title Text rows: counterAxisAlignItems: BASELINE to align text properly

​
Design Tips

  • SPACE_BETWEEN is perfect for distributing navigation items or card footers
  • Use CENTER/CENTER for buttons and call-to-action elements
  • BASELINE alignment ensures text looks aligned even with different font sizes
  • Combine with set_layout_sizing to control how children fill available space

​
Related Tools

Build docs developers (and LLMs) love

Get started for freeTalk to us