Auto Layout

You can add Auto Layout property to a group or a group of selected elements. It allows you to automatically resize, fit, and fill your designs. It’s very useful e.g. when it comes to resizing elements automatically or creating a button as the box will adjust to the text label. 

You can reorder elements inside the group with Auto Layout, just by swapping their places, and set the right gap, alignment, distribution, and many more! 

How to start

1. Add elements onto the canvas.
2. Select the elements that you want to add Auto Layout to.
3. Choose the auto-layout section on your right-hand side to start using the feature.

See below in which ways you can use the Auto Layout feature.

Direction

Set whether the auto-layout frame should be ordered vertically or horizontally.

• Choose vertical to add, remove, and reorder elements along the y-axis. 
• Choose horizontal to add, remove, and reorder elements along the x-axis.

Distribute

Choose different distributions of elements to set how they should be laid out along the cross axis

• Start: elements placed at the start of the axis – they’re even with top edges.  
• Center: elements are centered on the axis. 
• End: elements are placed at the end of the cross axis – they’re even with bottom edges.
• Stretch: elements are stretched to fill the container completely (if it’s possible). 

Gap

You can set a fixed spacing between elements in the group with Auto Layout.

Wrap

Wrap the elements depending on the groups’ width or height. 

• If the direction is horizontal, control the width of the group. 
• If the direction is vertical, control the height of the group. 

Align

Align the elements along the main axis (defined by direction: vertical or horizontal) in the container.

You can choose a few options:

• Start – elements are set toward the start of the chosen direction.  
• End – elements are set toward the end of the chosen direction.
• Center – elements are centered along the direction line. 
• Space between – elements are evenly distributed; the first one is on the start line and the last – on the end line (the gap is calculated and set automatically).  
• Space around – elements are distributed evenly in line, with equal space around them.  Note that from the visual perspective, the spaces may not be fully equal as all the elements have equal spaces on both sides (so that the space between elements adds up).

Fill

Use “fill” to set a background color within the container of the group.

Border

Set a border for the whole container of the group.

Padding

Add top, right, bottom, and left padding to the group.

Radius

Apply the chosen radius to the whole group.

Resize

Resize the chosen element based on the auto-layout group size.

 You can resize in a few ways:

• Fixed width or height – set a fixed size of the group, in this case resizing child elements or groups won’t change the size of the auto-layout group (container). 
• Auto width or height – the auto-layout group will be resized based on the child elements or group size. 
• Fill container – the resized child elements or group will match the auto-layout group size.

The auto-layout group can use:

• Fixed width or height
• Auto width or height

Elements inside the auto-layout group can use:

• Fixed width or height 
• Fill container 

Nested child auto-layout group inside an auto-layout group can use:

• Fixed width or height
• Auto width or height 
• Fill container