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

Nesting: a login form made of stacks

Look closely at any interface and you find boxes inside boxes, each with its own layout rules. Nesting Auto layout frames is how a few simple pieces become a form you can change without breaking it.

Boxes inside boxes

A card is a vertical stack with an image, some text and a row of buttons; that row is a horizontal stack inside the vertical one. Each box follows its own rules, and together they still behave as one piece.

The trick is the order. In the book we don’t build top to bottom, we build from the inside out: first the smallest self-contained element, then the group around it, then the group around that. It is the same reason the button came before the button group.

Read the form before you build it

The Login form has three levels, and each one is a frame with a single direction:

  • Text Fieldthe input: a placeholder text in a 50 px tall box
  • Form Elementa column: the label above the text field, gap 8
  • Forma column of form elements, gap 24, padding 16 on the sides

Give each frame a name as soon as you create it. After a few levels the layers panel is full of “Frame 12” and “Frame 13”, and the names are what make the file readable for the next person, including you in three weeks.

Three levels, each a frame with one direction: Text Field inside Form Element inside Form. The outline shows one level at a time, from the outside in.

Try it: the Login form

  1. Create a text layer Your Name, press ⇧ Shift + A and rename the frame Text Field. Keep Hug on the width, set the height to 50 and the alignment to left centre.
  2. Give the Text Field a light fill and a 1 px stroke, then set the stroke to the bottom side only.
  3. Type a label Username just above it, select label and field together and press ⇧ Shift + A. Rename the new frame Form Element and set the gap to 8.
  4. Wrap the Form Element in one more Auto layout frame and call it Form. Make it 393 wide with horizontal padding 16.
  5. Set the width of Text Field and Form Element to Fill container, so the field stretches across the form.
  6. Duplicate the Form Element, change the label to Password and the placeholder to ********, then set the Form gap to 24.

The recovery link

One last detail teaches a useful pattern: a right-aligned text inside a left-aligned form. Duplicate the Password label, move it below the field with the down arrow, type Forgot your password?, wrap it with ⇧ Shift + A, name the frame Recovery, set its width to Fill container, padding 0 and alignment to the right. The text now ends exactly where the field ends.

Remember

  • Every box in an interface is a frame with one direction.
  • Build from the inside out: element, group, container.
  • Small gaps inside a group, larger gaps between groups.
  • Name frames as you create them.