When you set the height of an object in a vertical stack to "Fill," the object's height will be the size of any unused vertical space within its parent (Watch a video on Fill and Auto sizing). If that object is the only child, its height will be 100%, whereas if it has a sibling who's height is 10%, the object's height will be 90%, and so on. The same is true for the width of objects in a horizontal stack.

Spacers are a way to "fill" that unused space without content. Like other objects, spacers fill unused space along their parent's axis/direction. Unlike other options, spacers do this by default. If you have multiple spacers within the same parent, they will be the same size because they'll split the unused space equally.

The interesting thing about spacer elements is that they don't have any properties of their own. Their direction is determined by their parent's direction, and their size is determined by the other objects inside of their parent (their siblings). In Play, spacers don't even have additional attributes to modify.

Even Distribution using Spacers

Spacers can be used instead of distribution settings to position objects within a stack. Changing the order of the spacer in relation to its siblings changes the distribution of the siblings. The first row below shows the spacer as the first object in a stack, thus pushing all other content to the right and creating an "End" distribution.

The second row shows two spacers, one as the first object and the other the last, which create a "Center" distribution.

The third row shows a spacer in between two other objects, creating a "Space Between" distribution. You can experiment with adding additional spacers to create different distributions.

Uneven Distribution using Spacers

The best use case for spacers is distributing objects unevenly. Without spacers, you would have to group objects in additional stacks to achieve a desired layout. By adding a spacer (or multiple spacers) in between objects, you achieve your desired layout without unnecessary groupings. This keeps your layers list clean 🙏