Tutorial / Mockplus RP / Editing / Basic Editing

Basic Editing

Selection

Select Component

Select a single component by clicking on the component.

Select multiple components by holding "Shift."

Select all components in the current artboard using "Ctrl+A."

Frame selection of desired components can be made in two ways: "Select contained" and "Select interselected."

"Select interselected" enables you to select components that are partly or wholly included in the frame you draw.

If you hold "Ctrl" to frame select components, only the components located within the frame will be selected.

To make a selection between overlapping components, hold "Ctrl" to toggle between them.

Select Artboard

An artboard can be either selected or activated.

  • When an artboard is activated, you can modify its properties and add components.
    • When an artboard is selected, it can be copied, pasted, resized, etc.

    • If you see control handles at the corners of the artboard, it means that the artboard is selected, otherwise, the artboard is activated.

To select an empty artboard, click on it.

If an artboard contains components, clicking on it activates the artboard, and double-clicking makes the artboard selected.

You can select an artboard by clicking its name. In this case, it doesn't matter whether an artboard contains components or not.

Move

Move Component

Drag a component to move it.

After selecting a component, press arrow keys to move it up/down/left/right. 

Each press moves the component 1px in the corresponding direction. You can also hold the "Shift + arrow key" to move components 10px at a time.

Move Artboard

A selected empty artboard can be dragged around with the mouse.

To drag an artboard with content, click on its name before dragging.

Rotate Components

Use the rotating handle to rotate a component.

Customize a rotating angle in the Properties panel.

Alignment and spacing

Components can be aligned and spaced using settings in the Properties panel.

The following alignment options available: Align left, Align right, Align center, Align top, Align bottom, Align middle.

The spacing options include Distribute horizontally and vertically. These options become available when you select more than 3 components at a time.

When you use these alignment options on a single component, it will be aligned with the artboard or its container.

Group Components

You can group multiple components to manipulate them as one.

To group components, select multiple components and click "Group" on the top toolbar or press "Ctrl+G."

To ungroup components, select the group and click "Ungroup" on the top toolbar or press "Ctrl+G."

Component Order

Right-click on the component and hover over “Order” to move the component forward or backward.

Isometric Sorting

Select multiple components with the same spacing. You can then drag any point that appears on these components to reorder them as you need.