What is Auto-Layout?

Auto layout is a design technology that uses a constrained-based approach to dynamically adapt UI elements as the size and position of a view, screen or frame changes.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/27/2023 at 13:28
Last Updated on 07/29/2023 at 16:03
<p>A flower that represents Digital Craft with the text "What is Auto-Layout?" beneath it.</p>

Auto layout is a design technology that uses a constrained-based approach to dynamically adapt UI elements as the size and position of a view, screen or frame changes.

SubscribeRead Understanding Layout Layout by AppleWhat is a Layout?

Traditionally, designers laid out their user interface by setting the frame for each view in a screen in what is known as a Frame Based Layout. The frame defined the view’s origin, height, and width in the superview’s coordinate system.

<p>An image shown how design can be created by creating UI elements that use an x and y position along with a width and a height, within a screen.</p>

Apple's example of a frame based layout.

"Auto Layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. For example, you can constrain a button so that it is horizontally centered with an Image view and so that the button’s top edge always remains 8 points below the image’s bottom. If the image view’s size or position changes, the button’s position automatically adjusts to match.

This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes."

-

- Apple

Auto Layout defines your user interface using a series of constraints. Constraints typically represent a relationship between two views. Auto Layout then calculates the size and location of each view based on these constraints. This produces layouts that dynamically respond to both internal and external changes.

<p>An example of a layout that creates UI elements by dictating how far away they are from the edges of the screen.</p>

Apple's example of a constrained based layout.

What are constraints?What is Responsive Design?Read Understanding Layout Layout by Apple

How do I implement an auto layout ?

To use auto layout:

  • Use the auto layout feature in Figma.
  • Use a flexible box (Flex Box) or Grid on the web (CSS).
  • Use NSLayoutConstraints in iOS (Swift).
  • Use a ConstraintLayout in Android (Kotlin).
How to use auto layout in FigmaWhat is a Flex Box ?How to activate & deactivate constraints in SwiftHow to create a composable that uses ConstraintLayout in Kotlin

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe