Skip to main content

counterAxisSizingMode

Applicable only on auto-layout frames. Determines whether the counter axis has a fixed length (determined by the user) or an automatic length (determined by the layout engine).

Supported on:

Signature​

counterAxisSizingMode: 'FIXED' | 'AUTO'

Remarks​

Auto-layout frames have a primary axis, which is the axis that resizes when you add new items into the frame. For example, frames with "VERTICAL" layoutMode resize in the y-axis.

The other axis is called the counter axis.

  • "FIXED": The counter axis length is determined by the user or plugins, unless the layoutAlign is set to “STRETCH” or layoutGrow is 1.
  • "AUTO": The counter axis length is determined by the size of the children. If set, the auto-layout frame will automatically resize along the counter axis to fit its children.

Note: “AUTO” cannot be used in any axes where layoutAlign = “STRETCH” or layoutGrow = 1. Either use “FIXED” or disable layoutAlign/layoutGrow.

Horizontal auto-layout frame with different counterAxisSizingMode values
const parentFrame = figma.createFrame()
const child2 = figma.createFrame()
// Make the second child 200px high instead of the default 100px
child2.resize(100, 200)
parentFrame.appendChild(figma.createFrame())
parentFrame.appendChild(child2)
parentFrame.layoutMode = 'HORIZONTAL'

// Parent frame
// +--------------------------+
// |+-----------++-----------+|
// ||           ||           ||
// ||  Child 1  ||  Child 2  ||
// ||           ||           ||
// |+-----------+|           ||
// +--------------------------+
parentFrame.counterAxisSizingMode = 'FIXED' // Child 2 is clipped

// Parent frame
// +--------------------------+
// |+-----------++-----------+|
// ||           ||           ||
// ||  Child 1  ||  Child 2  ||
// ||           ||           ||
// |+-----------+|           ||
// |             |           ||
// |             |           ||
// |             +-----------+|
// +--------------------------+
parentFrame.counterAxisSizingMode = 'AUTO'