Auto Layout is a bit of a buzz word in the design community, for good reason. Essentially, auto layout adjusts the size and position of objects based on the size and position of objects around it.

Stacks

Stacks, similar to frames in Figma, are the building blocks for Play's layout system. They're containers that have other objects, like images and text, within them. If we want to get meta, you can also put stacks inside other stacks (with other stacks inside yet another stack!)

All the objects within a stack are positioned in a row (or column or pile) based on their order within the stack. Apple defines three types of stacks: V stacks, H stacks, and Z stacks. Each stack type arranges its children in a different direction.

V stacks align their children vertically in a column, and H stacks align their children horizontally in a row. If you try to change the position of an object within a V or H stack, it will reorder the object in relation to the other objects inside the stack as opposed to moving the object to a different fixed point.

Z stacks are a little different. They arrange their children on top of one another. You can drag Z stacks' children to new, unstructured positions within the stack, similar to Figma's freeform design.

Layout Properties

The stack's properties determine its layout by positioning its children based on the stack's dimensions. Objects can be aligned to the top, bottom, or center for H stacks, and the left, right, or center for V stacks. Z stacks align their children in both directions.

H & V stacks also have distribution settings that spread the children along the stack's direction. Objects can be at the start (top for V stack, left for H stack), center, or end, or spaced out. Read more about stacks' distribution.

Absolute Positioning

Pinning an object (to the parent or to the page) places it in an fixed position, regardless of its sibling objects. Pinning an object overrides its order within the stack and places it in the desired position.

Now that you have a basic grasp on auto layout using stacks, you can move on to more advanced layout concepts. The first lesson in our Play 101 course is all about Layout. Check it out to continue learning!