Positions and Dimensions
At the top of the Properties panel, there are the alignment and distribution buttons. Below them, there are tools to directly manipulate the location and dimensions of elements on your design — you can change the width, height, rotation, and pin elements to the canvas, as well as modify their position on the x and y axes.
Align and distribute
Alignment is the arrangement of elements along a common vertical or horizontal axis. The align and distribute feature is at the top of the Properties panel. When a single layer is selected, it will be aligned to the canvas. In the case of multiple layers, they will be aligned among themselves. For example, when aligning elements to the left, everything will move to match the left-most element.
- Align right – click Align right or use the shortcut
- Align left – click Align left or use
- Align top – click Align top or use
- Align bottom – click Align bottom or use
- Align center – click Align center or use
- Align middle – click Align middle or use
The distribute feature makes the distance between elements the same size. To distribute your elements, select them and choose one of the Distribute options at the top of the Properties Panel:
- horizontally – the selected elements are spaced evenly in relation to the X axis
- vertically – the selected elements are spaced evenly in relation to the Y axis
If you want to create a horizontal row of elements which are placed vertically one above other, you first need to choose the Align top option. This way you will determine where the row should be placed. Now, click Distribute horizontally and your elements will be positioned in a nice and ordered horizontal row.
Distributing elements vertically works the same way. They will change their position and will be arranged in a clear vertical manner.
Selecting and Editing Multiple Elements
You can select multiple elements on the canvas at once by pressing
. This way, you’ll select the right elements from all others. When you have selected everything you want, release the key and continue editing.
Or, select elements in the Layers panel with
pressed. This way, they will also be selected on the canvas.
You can edit multiple elements at once if they share the same properties. This feature is most frequently used for various text elements or when changing size, font or color.
Constraints are available for elements placed inside groups or symbols and allow to determine specific resizing rules. UXPin automatically sets the constraints based on the position and size of the elements, but you can change the settings in the Resizing section.
There are four types of constraints:
- Stretch (no constraints selected) — stretches the element proportionally.
- Left/Right/Top/Bottom — pins the element to the specified side of the parent and preserves its size.
- Center — keeps the element in place in relation to the center of the parent element and preserves its size.
- Left & Right or Top & Bottom — stretches the element horizontally or vertically so that both sides remain pinned to the parent and the distance from the borders is preserved.