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.

Use the align and distribute feature at the top of the Properties panel.

Use the align and distribute feature at the top of the Properties panel.

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 Option "D"
  • Align left – click Align left or use Option "A"
  • Align top – click Align top or use  Option "W"
  • Align bottom – click Align bottom or use Option "S"
  • Align center – click Align center or use Option "X"
  • Align middle – click Align middle or use Option "Y"

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 Cmd Option "X" .
  • vertically – the selected elements are spaced evenly in relation to the Y axis Cmd Option "Y" .

Distribute horizontally

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.

Distribute vertically

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 Shift . 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 Shift 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

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.
Example of when the center resizing constraint is applied.

Example of when the center resizing constraint is applied.

Example when no constraints are applied — the element stretches along with the parent.

Example when no constraints are applied — the element stretches along with the parent.