Learn Figma Now Get the book IT
Lesson 1 of 5 · 5 min

Frames that grow with their content

A button is a box with a word inside, and when you change the word the box should follow. That is the whole idea of Auto layout, and it is the habit that turns a wireframe into an interface someone can actually build.

Grids are static, Auto layout is not

Grids give you precision and alignment, but they don’t react when the content changes. If you have ever moved things by hand because a label got longer or a new item had to fit in, you already know how quickly a layout breaks.

Auto layout works the other way around. You set a few rules on a frame, and Figma moves and spaces the elements for you every time something changes.

Same text change, two results. The drawn rectangle stays put and the label spills out, while the Auto layout frame measures its content and follows it.

A frame that measures its content

Once you apply Auto layout to a frame, it becomes a dynamic container that grows or shrinks with what is inside it. The rules are three, and the next lesson looks at each one:

  • Directionthe children stack in a column or in a row
  • Gapthe space between one child and the next
  • Paddingthe space between the children and the edge of the frame

If you know CSS, this is Flexbox: a frame with Auto layout behaves like a div with display: flex, and gap, alignment and padding become real CSS rules. That is why I insist on it with my students: when you design this way, the developer can read your layout and build it almost as it is.

Try it: your first button

In the book this is the first real element of the Login screen of a travel planning app. You can follow along in any empty frame, for example an iPhone 16 frame of 393 by 852.

  1. Click inside the frame to create a text layer and type Login.
  2. With the text selected, press ⇧ Shift + A. Figma wraps it in a new frame and applies Auto layout in one step.
  3. Rename the frame Button / Primary / Default. The slashes will matter when you turn it into a component.
  4. Give the frame a fill, then set both horizontal and vertical padding to 16, a value from the 8-point system.
  5. In the alignment grid, pick the centre, so the label stays in the middle of the button.
  6. Double click the text and change it to Login to your account. Watch the frame follow, then change it back.

Why it grows: Hug contents

The frame followed the text because its width is set to Hug contents, the default for a new Auto layout frame: it wraps tightly around its children, padding included. Fixed and Fill container are the other two options, and they are lesson 3.

One more thing I want you to notice. Before, a button was a rectangle with a text on top; now it is a frame that contains the text. That small change is what makes everything in the next lessons possible.

Remember

  • Grids are static, Auto layout reacts to the content.
  • ⇧ Shift + A frames the selection and applies Auto layout in one step.
  • Auto layout in Figma works like CSS Flexbox.
  • Hug contents is why the button follows its label.