Layout Settings

1. Measure Distance Between Layers

You can measure the distance between these objects on the canvas:

• Vector shape and path
• Text layer
• Frame
• Component
• Instance
• Group
• Guideline

2. Measure Distance Between Objects

Even though the target objects are nested in other frames, groups or components, you can measure the distance by following the steps below.

1. Select the first object on the canvas.
2. Press the key Alt on Windows or ⌥ Option on macOS.
3. Hover your mouse on the second object.
4. Pixso will then show a red line between objects and display the distance below that.

3. Measure Distance Between Nested Layers

1. Select the first object on the canvas.
2. Press the keys Ctrl and Alt on Windows or ⌘Command and ⌥Option on macOS.
3. Hover your mouse on the second object.

Pixso will then show a red line between objects and display the distance below that.

4. Auto Layout

Auto layout is a property that can be added to the frame or the component. It enables your design to adapt to any size or layers, and to rearrange based on the changes. When you need to add new layers, revise text or resize objects, auto layout will be very useful.

Auto layout can be applied to many situations:

• Create a button that will resize itself with the change of text.
• Create a list that will adapt to the project iteration.
• Create a full interface with the aid of auto layout frame.

4.1 How to Add Auto Layout

Auto layout is only supported by frames. If there is no frame on the layer, when you apply the auto layout, Pixso will create a frame containing all current content automatically.

You can select the object below to apply auto layout:

• A new or blank frame
• A frame containing all current content
• A component or a component group
• A layer or a object group

Here are ways to do it:

1. Use the shortcut keys Shift and A.

2. Click the + icon beside the Auto layout section on the right side panel.

3. Right click the frame or object and select Add auto layout.

4.2 Auto Layout Properties

The frame with auto layout has different properties from the common frame. When you apply the auto layout, you can adjust the layout mode and property values on the right side panel.

Note:

1. Auto layout supports layout automation in only 1 direction, horizontal or vertical. If you need to design in both directions, you can try to nest auto layouts.

2. You can adjust the distance between objects in different directions of auto layout.

3. You can adjust the margin between the object and the frame with auto layout. When the distance is consistent in all 4 directions, the absolute value is displayed. When the distance is inconsistent, the mixed status is displayed.

After adjusting the margins, the frame with auto layout will automatically expand in size as the internal elements change.

5. Distribution and Alignment

1. Concentrated distribution: Distribute based on the entered spacing value.

Align to top left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right.

2. Uniform distribution: Objects will be evenly spaced and automatically adjusted according to the size of the frame.

Align to different directions based on that of the auto layout.

• Horizontal auto layout: left, middle, right.
• Vertical auto layout: top, center, bottom.

3. Constraints in auto layout are divided into constraints for frame with auto layout and constraints for objects applied with auto layout.

Note: Following operations are not supported in frames with auto layout.

• Add layout grid to the frame.
• Apply constraints to any object in the frame.
• Use smart selection on any object in the frame.

6. Smart Arrangement

Smart select enables you to quickly adjust the arrangement and spacing of 2 or more layers. You can use the Smart select function to:

• Uniform the vertical and horizontal spacing between layers.
• Create even or uneven grids from the selected layer.
• Rearrange or reorder layers in lines, rows or the grid layout.
• Copy or delete the selected layer and rearrange other layers.

Smart select simplifies the complex task. In this way, you can save a lot of time as well as create and arrange the layout more quickly.

6.1 Use Smart Select

To use the Smart select function, the spacing among all layers must be equal. Besides, these layers should overlap on the X axis or the Y axis or both.

If the spacing is unequal among layers, you can use the arrange tool to rearrange them and create a smart district.

Smart select support settings in both one or two dimensional directions. The smart selection in one dimensional direction can arrange layers in lines or rows, and that in two dimensional direction can arrange layers in lines and rows, such as layers arranged by grids or tables.

1. Select any layer you want to apply the smart select, and these layers don’t need the same size and shape. You can select a single layer, group, frame and component.

2. Pixso will add smart anchors to your selection, and a pink circle will be in the center of each object.

3. When you hover your mouse on the selected object, new pink anchors will display. These new pink anchors allow you to adjust the vertical or horizontal spacing between layers.

6.2 Adjust Layers with Smart Select

After using smart select, you can change any layer under that effect. That's to say, you can move, add or delete layers while remain to your selection at the same time. Here are what specifically you can do:

• Adjust spacing
• Move or reorder layers
• Copy layers
• Resize layers
• Delete layers

You can mark the layer you want to adjust in the selection. The mark anchor is a pink circle.

1. Adjust Spacing

You can adjust the vertical or horizontal spacing between selected layers using the smart anchors or by setting different values on the right side panel.

You can drag to adjust the spacing using the smart anchors.

You can set a certain value on the right side panel.

2. Rearrange or Reorder Layers

You can also change the order or location of layers in smart selection.

• Click the pink circle in the center of a layer to mark it.
• Drag it to your target location in smart selection.
• Drop to confirm the new location of the layer. After that, the original arrangement will remain.

3. Copy Layers

You can duplicate any layer in smart selection.

• Click the pink circle in the center of a layer to mark it.
• Press the shortcut key:

macOS：Command+D

Windows：Ctrl+D

• Copy the layer and paste it beside the orginal layer. The other layers in smart select will be moved to adapt to it.

4. Resize Layers

You can resize selected layers in smart select and keep the same spacing among layers.

5. Delete Layers

You can delete a single layer in smart selection as well.

• Click the pink circle in the center of a layer to mark it.
• Press Delete or Backspace key to delete it.
• Other layers in smart select will be rearranged to fill the interval.

7. Ruler

When you try to locate the layer or object accurately, the ruler will be helpful.

7.1 Add Ruler

You need to ensure the ruler is enabled in advance. If you don't see the ruler on the canvas, press the shortcut key Shift and R. You can also enable it in the menu.

From the left or top of the ruler, press the left-side of the mouse and drag it towards the canvas. Drop it in the target place and then you have successfully created a ruler.

You can add ruler to the canvas or the frame.

7.2 Delete Ruler

Besides clicking and dragging the ruler back to its original position, you can also select the ruler line and press Delete or Backspace to delete it.

8. Layout Grid

8.1 What Is Layout Grid

The layout grid helps to align objects in a frame. It provides the visual structure for our design. With it, your designs on different platforms and devices can keep the same.

Layout grid doesn’t rely on the pixel grid, which means it doesn’t rely on certain resolution ratio and size either.

You can only apply the layout grid to the frame. The frame can be the top frame or a frame nested in other frames.

With layout grid, you can

• Keep consistent on multiple platforms.
• Make less decisions when defining layout.
• Reduce the time spent on defining layout for models or wireframes.
• Apply various layout techniques like gallery, icon or the whole page layout.

To use layout grid, you need to select the frame or a component, then click the + icon beside the Layout grid section on the right side panel.

You can create multiple layout grids to achieve multi-dimensional structural design.

8.2 Layout Grid Properties

The layout grid has 3 properties, including the grid, line and row.

• When you use a grid, you can set the grid size and color.

• You can also set the number, type, width, margin, spacing of lines and rows.
• You can set the grid type as left, right, center and stretch. When setting it as stretch, Pixso will bespread the frame based on the margin and spacing rules. The type settings are always used with the constraint of objects in the frame.

8.3 Set Layout Grid Visibility

You can use the shortcut keys to set the visibility of layout grid.

mac OS：Command+G

Windows：Ctrl+Shift+4

9. Constraint

The constraint decides how layers respond to the resizing of other objects.

9.1 Horizontal Constraint

When you resize the frame along the x axis, the horizontal constraint defines how layers act:

• Keep layers on the left and take it as the left side of the frame.
• Keep layers’ location relative to the right side of the frame.
• The left and right sides keep the size of the layer relative to the sides of the frame. This may cause the layer to grow or shrink along the x-axis when resized.
• Center the layer to maintain its position relative to the horizontal center of the frame.
• Scaling will define the size and position of the layer as a percentage of the frame size. It will then maintain these percentages when you resize.

9.2 Vertical Constraint

When you resize the frame along the y axis, the vertical constraint defines how layers act:

• Keep the layer relative to the top of the frame.
• Keep the layer relative to the bottom of the frame.
• Keep the layer relative to the top, bottom, left and right of the frame size, which may cause the layer to get larger or smaller along the y axis when resizing the layer.
• Center the layer to maintain its position relative to the vertical center of the frame.
• Constraint proportions will define the size and position of the layer as a percentage of the frame size. It will then maintain these proportions as you resize.

9.3 How to Use Constraint

You can apply the constraint to any layer in the frame. Please note that it can not be applied to the layers outside the frame or the layers in a frame with auto layout.

• You can apply constraints to a frame nested in other frames.
• You can apply both horizontal and vertical constraints to layers.
• You can not apply constraints to the group.

To set constraints for layers:

1. Select the layer or parent layer in the frame, and the dashed blue line on the canvas shows which constraints are currently applied.

2. Adjust the vertical and horizontal constraints in the Constraint settings on the right side panel.

3. Set constraints for layers in the drop-down menu.

4. You can also click a line on the interactive table to choose the constraint.

5. If you need to keep all layers in the same position, please check the option Fixed position when scrolling.

9.4 Ignore Constraint

Sometimes you may want to resize the frame or the layer while not applying it to the constraint. In this case, you can use the shortcut keys to ignore any constraint applied on the current layer.

• macOS: Command (Press it when resizing)
• Windows: Ctrl (Press it when resizing)