How to Create a Form Using Auto Layout in Figma

To create a form using Auto Layout in Figma, first select your form elements and apply Auto Layout to arrange them vertically or horizontally with consistent spacing. Use nested Auto Layout frames for grouping labels, inputs, and buttons to keep the form organized and responsive.

Syntax

In Figma, Auto Layout is applied to frames or groups to automatically arrange child elements. The main properties include direction (vertical or horizontal), spacing between items, padding inside the frame, and alignment.

• Direction: Choose vertical for stacking form fields top to bottom.
• Spacing: Controls space between each form element.
• Padding: Adds space inside the frame edges.
• Alignment: Aligns child elements left, center, or right.

none

Auto Layout Frame {
  direction: vertical | horizontal
  spacing: number (px)
  padding: {top, right, bottom, left} (px)
  alignment: left | center | right
  children: [elements]
}

Example

This example shows how to create a simple vertical form with labels and input fields using Auto Layout. Each label-input pair is grouped in a horizontal Auto Layout frame, and all pairs are stacked vertically with spacing.

none

Frame (Auto Layout: Vertical, spacing: 16px, padding: 24px) {
  Frame (Auto Layout: Horizontal, spacing: 8px) {
    Text: "Name"
    Rectangle: Input field (width: 200px, height: 32px)
  }
  Frame (Auto Layout: Horizontal, spacing: 8px) {
    Text: "Email"
    Rectangle: Input field (width: 200px, height: 32px)
  }
  Frame (Auto Layout: Horizontal, spacing: 8px) {
    Text: "Password"
    Rectangle: Input field (width: 200px, height: 32px)
  }
  Button (Rectangle + Text): "Submit"
}

Output

A vertical form with three labeled input fields stacked with consistent spacing and a submit button below.

Common Pitfalls

Common mistakes when creating forms with Auto Layout include:

• Not grouping label and input together in a horizontal Auto Layout frame, causing misalignment.
• Forgetting to set consistent spacing and padding, leading to uneven gaps.
• Using fixed widths on inputs without considering responsiveness.
• Not aligning text and inputs properly, which makes the form look messy.

Always nest Auto Layout frames logically and test resizing.

none

/* Wrong: Labels and inputs not grouped */
Frame (Auto Layout: Vertical) {
  Text: "Name"
  Rectangle: Input field
  Text: "Email"
  Rectangle: Input field
}

/* Right: Group label and input horizontally */
Frame (Auto Layout: Vertical) {
  Frame (Auto Layout: Horizontal) {
    Text: "Name"
    Rectangle: Input field
  }
  Frame (Auto Layout: Horizontal) {
    Text: "Email"
    Rectangle: Input field
  }
}

Quick Reference

Property	Description	Recommended Setting for Forms
Direction	Stack elements vertically or horizontally	Vertical for form fields
Spacing	Space between child elements	12-16 px for readability
Padding	Space inside frame edges	20-24 px for breathing room
Alignment	Align child elements inside frame	Left align labels and inputs
Nested Frames	Group related elements	Use horizontal Auto Layout for label + input

Key Takeaways

Use vertical Auto Layout to stack form fields with consistent spacing.

Group each label and input in a horizontal Auto Layout frame for alignment.

Set padding inside the main frame to add space around the form.

Avoid fixed widths on inputs to keep forms responsive.

Test resizing to ensure the form adapts well to different sizes.