Skip to main content

layoutMode

Determines whether this layer uses auto-layout to position its children. Defaults to "NONE".

Supported on:

Signature​

layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL' | 'GRID'

Remarks​

Changing this property will cause the position of the children of this layer to change as a side-effect. It also causes the size of this layer to change, since at least one dimension of auto-layout frames is automatically calculated.

As a consequence, note that if a frame has layoutMode === "NONE", calling layoutMode = "VERTICAL"; layoutMode = "NONE" does not leave the document unchanged. Removing auto-layout from a frame does not restore the children to their original positions.

This property must be set to "HORIZONTAL" or "VERTICAL" in order for the primaryAxisSizingMode, counterAxisSizingMode, layoutWrap, primaryAxisAlignItems, counterAxisAlignItems, counterAxisAlignContent, paddingTop, paddingBottom, paddingLeft, paddingRight, itemSpacing, counterAxisSpacing, itemReverseZIndex, and strokesIncludedInLayout properties to be applicable.

Auto-layout frame with horizontal layout
const parentFrame = figma.createFrame()
parentFrame.appendChild(figma.createFrame())
parentFrame.appendChild(figma.createFrame())

// Parent frame
// +--------------------------+
// |+-----------++-----------+|
// ||           ||           ||
// ||  Child 1  ||  Child 2  ||
// ||           ||           ||
// |+-----------++-----------+|
// +--------------------------+
parentFrame.layoutMode = 'HORIZONTAL'
Auto-layout frame with vertical layout
const parentFrame = figma.createFrame()
parentFrame.appendChild(figma.createFrame())
parentFrame.appendChild(figma.createFrame())

// Parent frame
// +-------------+
// |+-----------+|
// ||           ||
// ||  Child 1  ||
// ||           ||
// |+-----------+|
// |+-----------+|
// ||           ||
// ||  Child 2  ||
// ||           ||
// |+-----------+|
// +-------------+
parentFrame.layoutMode = 'VERTICAL'