Stacks

Stacks provide extensive, semi-automated control over the spacing, direction and alignment of layers.

How-to:

Stacks are applied to a parent Frame or Component, and affect their child layers. To create a Stack, select either a single Frame or Component, or two or more layers, and choose ‘Create/Edit Stack’. When you make a change within a Stack, choose ’Update Selected Stacks’ or ‘Update All Stacks’ to update the layout. Pro tip: bind these to a keyboard shortcut to speed up your workflow.

Stack parameters:

* Spacing: The amount of space separating layers.

* Direction: Whether layers should be stacked horizontally or vertically.

* Alignment: Whether layers should be aligned to the top, middle or bottom of their parent Frame or Component. This is optional, so layers can maintain their original alignment.

* Anchoring: The corner to which the parent container resizes relative to.

Other notes:

* Stacks can be nested inside of other Stacks.

* Stacks applied to Components also affect their instances. Instances cannot currently be overridden since Figma doesn't support overriding instance child layer positions.

* Stacks carry over to different pages/documents if the element is copied and pasted to a different

* Feature requests welcome :)

Roadmap:

[ ] If Figma adds support for triggering code on events, I’ll add functionality to update Stacks automatically when their contents are changed.