Auto Layout is one of the most useful tools for beginners because it removes a lot of manual resizing. Instead of dragging every element into place each time a label gets longer or a card gains a new line, you set rules for how a frame should behave. The frame then adjusts its size, spacing, and alignment on its own.
Think of a button. It usually has an icon and a short label, with even space around them. Without Auto Layout, changing the label means moving the background and re-centering everything by hand. With Auto Layout, the button grows or shrinks around the new text while keeping the same padding.
Start With a Simple Frame
Begin with something small, such as a button or a single card, rather than a full screen. Select the elements you want to group, then turn them into an Auto Layout frame. Next, choose a direction: horizontal for items placed side by side, or vertical for items stacked on top of each other. This direction is the main structure of the frame, and it controls how new items are added.
After that, set the spacing between items and the padding inside the frame. Padding is the space between the outer edge of the frame and the content inside it. Keep these values even and simple at first. For example, use the same padding on all sides of a button, and the same gap between each item in a list.
Finally, check how the frame behaves when content changes. Try a longer label, a second line of text, or an extra item in the list. If the layout stretches in a way you did not expect, adjust the resizing settings for that element. Some elements should stay a fixed size, while others should fill the available space or hug their content closely.
Build Up to Larger Layouts
Once a button or card feels reliable, combine several Auto Layout frames into a larger layout. A card might contain a title, a short description, and a button, each in its own frame. A page section might contain several cards in a row. Because each smaller frame already knows how to resize, the larger layout is far less likely to break when you edit it.
It also helps to name your frames clearly and keep your spacing consistent from one section to the next. If you want to go further, read our guide to creating a consistent design system for small teams and our tutorial on designing accessible color contrast step by step.
Above all, do not try to learn every setting at once. Practice with one frame, test it with real content, and fix only what looks wrong. Over time, Auto Layout will feel less like a special feature and more like the natural way to build flexible, dependable interfaces.