This is a property that can be added to frames.

‍

You set the direction of the autolayout, margins, padding, and resizing and the magic happens. Now, no matter how many elements you add inside the autolayout frame, the padding will always be the same. In addition, you can create buttons that increase or decrease depending on the text, various lists, cards, and other more complex elements.

‍

1. Autolayout direction. Horizontal - all internal elements will be aligned along the X axis, Vertical - along the Y axis.

‍

2. In this block, you can assign element alignment and margins.

‍

3. Indents. Padding - outer indent. In this window, you specify the size of the indents if they are all the same. Spacing - internal indent.

‍

4. Check the Space Between box and all elements inside the autolayout will be evenly spaced from each other.

‍

Resizing

These properties specify how the outer frame with autolayout will behave in relation to the inner elements and the outer frame (if any). You can set these properties along the X-axis (Horizontal) and along the Y-axis (Vertical). 

‍

Hug content - external frame with autolayout “Hugs” inner elements. Now if you change the size of the inner elements, the outer frame will change with them accordingly.

‍

In this example, Hug content is set both vertically and horizontally.

‍

Fixed - outer frame with autolayout has a fixed size. Now, no matter how the internal elements change, the external frame will not adapt to them.

‍

In this example, Fixed is set both vertically and horizontally.

‍

Fill container - the element will fill the outer frame with autolayout. Can only be set to an internal element.

‍

In this example, the image has Fill container both vertically and horizontally, and the text has Fill container horizontally and Hug content vertically.

‍

‍