Z-axis Auto Layout as a way for component to fill parent container (i.e. ZStack)

Problem: Currently it is impossible to have components that adjust their size to fill parent container (frame). Components placed inside a frame have ability to have either be fixed size or scale.

Basic example: creating a tag – label with complex shape as background – that changes its size with text changes

More complex example: floating window that has title and close button as component, background as separate component. And adapts to the size of content inside.

Auto Layout is very useful to create controls and views but it lacks one important dimension: ability to place each children on top of each other. And, most importantly, let them set their size to fill container.

A good improvement would be something that works similar to ZStack in SwiftUI

Solution: Z-axis Auto Layout. Instead of arranging components vertically, it stacks them on top of each other. It can preserve padding settings but the option to adjust spacing is unavailable (it has no visible changes). Alignment option continues to determine if components are stacked to center, top, sides, or corners of container.
Resizing options remain the same: fixed, fill, hug.

Questions: Is there an existing workaround how to create dynamic things like that? A tag could be recreated if space corners can be beveled instead of rounded, but I can’t find a way to create an complex auto layout window with Figma.

Personally I think that SwiftUI approach with VStack, HStack, and ZStack solves almost any imaginable layout solution. I would stop bothering with constraints at all. Yet I cannot find a way to replicate ZStack behavior in Figma.

1 Like

ZStack is one thing that missed in the Figma layout system. Vote for it!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.