Overview
Stacks are elements that can contain other elements or components. They're similar to "frames" in other design tools.
Stacks have directions, which determine how the stack's children are placed inside. Vertical and horizontal stacks work similarly to Auto Layout in Figma or Smart Layout in Sketch. Z stacks work like freeform frames in Figma.
In macOS, you can add a stack to your page, canvas, or selection using either the S key or the F key.
Element Properties
Direction
Set the stack's direction to vertical, horizontal, or Z:
V Stack: Children are placed from top to bottom.
H Stack: Children are placed from left to right.
Z Stack: Children are placed anywhere, freeform within the stack. Z Stacks do not have Auto Layout.
Alignment
Set the stack's alignment along the non-directional axis (vertically for H stacks, horizontally for V stacks, and both for Z stacks).
Distribution
Set the stack's distribution along the directional axis:
Start: The stack's children align at the start of the stack.
Center: The stack's children align in the center of the stack.
End: The stack's children align at the end of the stack.
Space Evenly: The stack's children are spaced equally between each other and the sides of the stack.
Space Around: The stack's children all have equal spacing on both sides, making the space between objects double the space between the first/last object and the sides of the stack.
Space Between: The stack's children are spaced equally between each other with no space on the sides of the stack.
Gap
Set the space between a stack’s children.
Scrolling
By default, if a container’s content is larger than its height or width, a user in Play Mode will be able to scroll the container to see its overflowing content.
Paging
Choose if each child will snap into position as the user scrolls through the stack:
Default
Start: The object will snap to the start (top or left) of the stack.
Start: The object will snap to the center of the stack.
Start: The object will snap to the end (bottom or right) of the stack.
None: The stack will scroll continuously without snapping to any of the objects
Deceleration Rate
Set the speed at which the scroll decelerates when the user lifts their finger. This can be Regular, Fast, or Custom.
Delay Content Touches
Choose to delay the scroll to handle native element touches.
Vertical & Horizontal Scrolling
Choose to allow the stack to scroll vertically and/or horizontally, respectively.
Indicator is Hidden
Choose to hide the vertical or horizontal scroll indicator.
Indicator Insets
Choose to distance the vertical or horizontal scroll indicator on any of its sides.
Indicator Style
Set the UI appearance of the indicator to auto, light or dark mode.
Bounces
Choose if the scroll should bounce when the user hits the beginning or end of the scroll.
Always Bounce Vertical & Horizontal
Choose to allow the vertical or horizontal bounce even when the content height or width, respectively, is smaller than that of the scroll view.
Effects
Set the scroll effects to change the appearance of a stack as a user scrolls through it: Scale, Fade, Fade & Scale, Blur, Cover Flow, Cover Flow Inverted, Pile, and Custom.
Trigger
Choose if the effect should fire when the stack item is at the focal point or when the item is in view.
Focal Point
Set where the animation will align within the parent stack. If the focal point is aligned left, the animation will only happen on the right; if the focal point is aligned right, the animation will only happen on the left, and if the focal point is aligned center, the animation will be mirrored on the left and right.
Trigger Area
Set the boundary of the animation. The higher the percentage, the more gradual the animation will be, and the lower the percentage, the less gradual this animation will be.
Clamp Values
Choose if the value should continue animating past the boundary of the Trigger Area. When Clamp Values is on, the values will finish their animation within the set Trigger Area. When Clamp Values is off, the values will continue animating past the set Trigger Area.
Mirror Animations
Choose if the To and From animations (ie. the animations leading to the focal point on both sides) will mirror each other. If this property is turned on, you'll adjust one set of animations that will mirror. If this property is turned off, you'll be able to adjust the To and From values.
Values
Set the values of the Blur, Move X, Move Y, Rotate X, Rotate Y, Rotate Z, Scale, and Opacity properties to customize the scroll effects.
Expression Editor Properties
No stack specific Expression Editor properties. See all object properties.