UXPin’s auto-alignment and distribution feature helps to arrange elements you’ve added to the canvas, so your design ideas will be expressed in an uncluttered way. They are especially useful when you handle lots of elements and start putting together entire pages.
How to Use the Alignment Feature
Alignment is the arrangement of elements along a common vertical or horizontal axis. If you want to use automatic alignment feature, you obviously need to create a couple of elements on your canvas. Let’s look at this picture first.
We’ve created three elements and placed them randomly on the canvas. When we select all of them, a “Multiple selected” menu appears in the top right section of the editor.
Here you can find all the options connected with multiple elements. You can group elements, arrange their position, convert them into a Symbol or align and distribute them. Just hover on the icons and their descriptions of will appear below.
Now simply mark all the elements you want to be aligned and in the “Multiple selected” menu click “Align left” or “Align right” or any other option. Done!
It is important to remember that elements will align to the element positioned the most to the left or right side of the canvas. For example, when aligning elements to the left, everything will move to match the left-most element.
Every object moves flush against the left-most element’s left edge.
Every object moves flush against the right-most element’s right edge. Similarly, you can align your elements to top or bottom. It works the same way, the only difference is a point of reference. For “Align top” your elements will move to the highest element you’ve selected. And for “Align bottom,” everything will move to match the element positioned at the bottom of your selection.
Every object moves flush against the top-most element’s top edge.
Every object moves flush against the bottom-most element’s bottom edge. We’re left with two more alignment options: Align center and Align middle. They don’t differ much from other cases here. When you choose “Align center,” marked elements will be aligned to the center of the most central element. In the case of Align middle, they will be aligned to the element positioned in the middle of the canvas.
Every selected element moves to their average vertical center axis.
Every selected element moves to their average horizontal center axis.
Distribution moves elements so their centers are the same distance apart. This feature is located in the “Multiple selected” menu as well. Now lets return to three elements we’ve created at the beginning. Once again they are randomly placed on the canvas. It is possible to distribute them horizontally or vertically.
We want to create a horizontal row of elements, so mark all the elements and first choose the Align top option. This way we determine where the row should be placed. Now, click distribute horizontally. This way, your elements became positioned in a nice and ordered horizontal row.
Distributing elements vertically works much the same way. They all changed their position and are arranged in a clear way.
Sign up for a free trial and start playing with all out cool distribution features!