The Automatic Layout Tool


This tool enables you to easily reorder layouts and automatically sort elements into columns for multiple device sizes and screen resolutions; it enables responsive design with the click of a button.

The tool and all it's settings will organize your elements into columns.

To open the “Automatic Layout Tool” window click the icon located next to the responsive breakpoints at the top panel in the Studio.


Automatic Layout Tool Icon



The window looks like this:



Here are the different properties that can be set:


1. Columns - The number of columns we can set between one to five.

Here are the same elements, arranged as one and three columns:

2. Selected Elements Only - Only Selected elements will be affected, not the whole canvas.
3. Expand to Width - Elements will expand to the width of the new column.

4. Under Advanced Settings, horizontal and vertical padding can be set.

5. Reorder Layout - Execute the changes
6. Undo - Reverse the canvas to the state before “Reorder Layout” was clicked.



1. In the display area, you can check it to see what kind of changes you are making before you hit  “reorder Layout”.



2. If using the tool on a group, it will be sorted together and all the elements inside it will keep their proportions.