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. On Preview, pinned elements will hold their position only when the zoom in UXPin is set to 100%.

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 Alt "D"
  • Align left – click Align left or use Alt "A"
  • Align top – click Align top or use  Alt "W"
  • Align bottom – click Align bottom or use Alt "S"
  • Align center – click Align center or use Alt "X"
  • Align middle – click Align middle or use Alt "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 Ctrl Alt "X" .
  • vertically – the selected elements are spaced evenly in relation to the Y axis Ctrl Alt "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. Once 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.

Tip

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.

Power Duplicate

UXPin offers a quick way to create designs, such as search results or any other lists that contain multiple elements with data like avatars or names.

The fastest way to do it is to select an element or a group of elements already filled with data, hold Alt and drag the bottom right handle. That way, you can create as many elements as you want – all with refreshed content.

Smart Grid

Smart Grid speeds up your work by letting you quickly rearrange and adjust the spacing between elements in grid layouts and designs with repetitive objects.

Smart Grid works automatically when you select two or more elements with equal spacing.

  1. Select the elements that you want to adjust in the Smart Grid.
  2. When you hover over the Smart Grid, you will see handles in the center of each element; these are pink squares. Drag them to rearrange elements in the selection – it will not change their position in the Layers panel.
  3. You will also see pink lines between elements which you can drag to adjust the spacing between them.

To be included in the Smart Grid, elements also have to align on at least one axis, horizontal or vertical, or be in a grid. They don’t have to be the same size or shape.

If they’re not spaced equally apart, you can use the Distribute on grid option. Also adjusting the spacing between Components is only possible when editing the Master Component and not the Instances.

Distribute on Grid

Distribute on grid redistributes selected elements so that they are spaced evenly apart and qualify for the Smart Grid. You can do it in the following ways:

  • Use the Distribute on grid option in the Properties panel (on the very right of the alignment section).
  • Open the Context menu > Arrange > Grid.
  • Use the shortcut Ctrl Alt "G" .

Adjust Spacing between Elements

You can adjust the vertical or horizontal spacing between elements in two ways. Either drag the pink lines between elements or change it directly in the space field in the Properties panel.

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.