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. Once 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.
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.
- Select the elements that you want to adjust in the Smart Grid.
- 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.
- 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.
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
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 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.