Auto Layout

Anyone designing a screen has to decide where each element goes: text, images, buttons. The simplest way is to place everything at a fixed spot, say 40 points from the left and 120 from the top. That works exactly as long as nothing changes. Auto layout takes a different approach: instead of describing coordinates, you describe rules. For example: these three buttons sit one below the other, with 12 points of spacing, and the frame is always as tall as its content. The program then calculates the exact positions itself, freshly each time.

Why fixed coordinates no longer suffice today

The same app runs on a small phone, a large tablet, and a monitor. The width can differ by more than threefold. With fixed positions, you’d need a separate layout for every screen size. With rules, one layout suffices, adapting on its own.

On top of that, there are texts whose length you don’t know in advance. A button labeled “OK” is short, but the same button in German is often called “Bestätigen” and needs more space. Translations into German tend to run about a third longer than the English original on average. Without auto layout, the text then sticks out of the button or gets cut off.

For teams, there’s another practical point. A layout built from rules can be changed without anyone having to move dozens of elements individually. Add a menu item, and everything below it slides down automatically. This saves working time and prevents careless mistakes.

Rules instead of coordinates: the calculation behind it

Most systems work with what are called containers. A container is a frame that holds other elements and gives them a direction: side by side or stacked vertically. Added to this are specifications for the spacing between elements and the internal padding. Containers can be nested inside one another as needed, and this is how the whole page is built up.

For each element, it’s also defined how it behaves when space changes. There are two basic stances: growing along with the space or holding onto its content size. In a search bar, the input field should fill the remaining space, while the magnifying glass icon should always stay 24 points wide. From these specifications, the program solves a small system of equations and comes out with concrete numbers for every window width.

A common misconception is that auto layout makes designing arbitrary. The opposite is true: the rules must be free of contradictions. If you require three elements to simultaneously fill the entire space, the system has to force a compromise. In Apple's development environment, warnings about unsatisfiable constraints then appear, and the result rarely looks the way it was intended.

From Figma to the banking website

The term is best known from the design program Figma, which is standard at many companies. There, the feature is literally called Auto Layout and is one of the reasons why designs are directly suited to multiple screen sizes. Apple calls its counterpart in app development Auto Layout as well. On the web, the corresponding tools go by other names, Flexbox and Grid, but follow the same idea.

The principle becomes noticeable wherever content is unpredictable. An online shop doesn’t know how long a product name will be. A banking app doesn’t know whether an account balance has four or nine digits. A news portal doesn’t know the headline until the editorial team types it. In all these cases, the layout itself decides how things are arranged.

The technique is also becoming particularly interesting in connection with AI. When a language model generates a user interface from a description, rules are easier to produce than exact pixel values. And anyone reading a job posting that says experience with auto layout is desired can take that as a hint: what’s being sought is someone who designs in a structured way rather than shifting elements by eye.