Auto Layout: Building Responsive Components Without Manual Resizing

Chapter 3 closed with a tip pointing here directly: a Frame's own constraints handle basic resizing, but Auto Layout goes considerably further — automatically arranging and spacing a Frame's own children the way a real responsive component actually needs to behave.

What Auto Layout Actually Does

Applying Auto Layout to a Frame turns it into a live, self-arranging container — its children are automatically stacked, spaced, and resized according to a set of rules, recalculated continuously as content changes, rather than manually repositioned by hand each time something inside it changes size or gets added or removed.

Direction: Horizontal vs. Vertical Stacking

An Auto Layout Frame stacks its children in one direction — horizontally (side by side) or vertically (stacked top to bottom) — with the option to wrap onto multiple rows if content doesn't fit on one line. Switching direction rearranges every child automatically, without needing to manually reposition each one.

Padding and Gap (Spacing Between Items)

Padding sets the space between the Frame's own edge and its contents; gap sets the consistent space between each child element in the stack. Both update live — increasing the gap value pushes every child further apart automatically, rather than requiring each one to be repositioned by hand.

Resizing Behavior: Hug, Fill, Fixed

Each element inside an Auto Layout Frame (and the Frame itself) can be set to Hug contents (shrinking or growing to exactly fit whatever's inside it), Fill container (stretching to take up all available space in its own parent), or Fixed size (staying at an exact set size regardless of its content or parent). A button's own background, for instance, is commonly set to Hug so it automatically resizes if its label text changes length.

Why This Has No Real Equivalent in Illustrator/Inkscape

Illustrator and Inkscape have no equivalent concept at all — resizing a group or changing text in either tool never automatically repositions or resizes sibling elements around it. This absence isn't a missing feature so much as a reflection of what those tools are actually for: static illustration and print work, where a shape's neighbors don't need to dynamically react to it changing. Auto Layout exists specifically because UI design constantly deals with dynamically changing content — different text lengths, varying numbers of list items, different screen sizes — that a static illustration tool was never built to handle automatically.

Auto Layout in Penpot: Flex Layout

Penpot's own equivalent, called Flex Layout, covers the same ground — direction, padding, gap, and per-element sizing behavior — under names deliberately chosen to echo CSS Flexbox terminology (a connection worth noticing directly if the site's own CSS Frameworks or CSS Overview material is already familiar, since the underlying concepts — main axis direction, gap, grow/shrink behavior — map closely onto real CSS flexbox properties).

Hands-On Exercises