<?xml version="1.0" encoding="utf-8"?>

What is auto layout?

What is auto layout?

Auto layout is a Figma feature that helps designers create designs that adjust automatically based on the content and constraints. This makes the designs dynamic and responsive. Designers can easily create interfaces that adapt to different screen sizes, and content changes, without having to manually adjust each element individually.

Auto Layout is a powerful tool for creating landing pages for the following reasons:

  • Responsive designs: Auto layout allows designers to create landing pages that look great on various screen sizes and devices.
  • Easy updates: With auto layout, designers can quickly update the layout and spacing of elements when the content of the landing page changes.
  • Consistency: Auto layout ensures that all elements of the landing page are evenly spaced and aligned, resulting in a more professional design. While it can help with alignment and consistency, the overall aesthetic still relies on the designer's skills and creativity.

To apply auto layout, press “Shift + A” or click ”+” next to ”Auto layout” in the right sidebar with a frame selected. Alternatively, you can right-click on a frame or object and select “Add Auto layout.”[1]

Pro Tip: You can only apply the auto layout to frames. Figma will create an auto layout frame if you select objects that are not already in a frame.

Improve your UX & Product skills with interactive courses that actually work