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.
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.
Apple's example of a frame based layout.
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.
Apple's example of a constrained based layout.
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).