Tips & Tricks

Mockitt offers a wealth of convenient operations to improve your workflow efficiency, helping you design prototypes, collaborate with teams, and manage projects more easily.

Convenient Operations

Find and Replace

The Find and Replace function allows you to batch modify text within your prototype.

Use the shortcut Ctrl + F (or Cmd + F on Mac) to bring up the Find and Replace panel, or click Edit > Find/Replace in the top-left menu.

After entering the keyword, click Find to view occurrences one by one (some hidden content may require manual action to display). Click the dropdown arrow next to the options to reveal Replace, allowing you to replace text individually or all at once. To search across the entire project, switch the scope from "Current Page" to "All Pages".

Undo / Redo

Use the following shortcuts for Undo and Redo operations:

Undo:

• Mac: Cmd + Z
• Windows: Ctrl + Z

Redo:

• Mac: Shift + Cmd + Z
• Windows: Shift + Ctrl + Z

Zoom In / Out

You can adjust the canvas zoom level in the top toolbar of the editor. Alternatively, use the shortcut: Ctrl + Mouse Wheel.

Refresh Interface

Shortcut to refresh the interface:

• Windows: Ctrl + R
• Mac: Cmd + R

Pan Canvas

Hold the Spacebar and drag with your mouse to move the canvas freely.

Rulers and Guides

Connectors

The "Connector" feature helps express page flow and logic more smoothly. It clarifies the connections between different pages, enabling a more refined flow presentation.

1. Add Connector You can add connectors anywhere you need. In the right Appearance panel, you can adjust the color, thickness, endpoints, and style according to your needs.

Rulers

Rulers are located at the top and left of the prototype editing area, helping you precisely adjust the position and size of elements. You can drag guides from the rulers to help you easily align images or elements.

1. Coordinate Positioning: The top and left rulers correspond to the X and Y coordinates of the canvas, respectively. This allows you to view the coordinate positions of elements and components more intuitively while designing.

2. Show/Hide Rulers: In the top-left menu, go to Preferences > Rulers to toggle the visibility of rulers.

3. Ruler Context Menu: Right-click on the ruler area to open a menu where you can toggle Show Rulers, Show Guides, and Snap to Guides, as well as batch delete horizontal/vertical guides.

Note: When rulers are hidden, guides are also hidden. When Snap to Guides is enabled, elements will snap to nearby guides; moving a guide will also snap to nearby elements.

Guides

You can drag multiple guides from the rulers to assist in positioning or aligning elements.

1. Add Guide: Hover near the ruler area until the cursor changes to a drag style. Click and drag down (from the top ruler) or right (from the left ruler) and release at the desired position to create a guide.

2. Multiple Guides: You can create multiple horizontal and vertical guides on the same page. Guides are page-specific and do not sync across all pages.

3. Move Guide:

   • Hover near the target guide until the cursor changes, then click and drag to move it.
   • Click to select the guide (it turns blue), then use the Arrow Keys to move it by 1 pixel, or Shift + Arrow Keys to move it by 10 pixels.

4. Select Through Guide: Hold Shift to select elements located underneath a guide.

5. Delete Guide:

   • Drag the guide back to the ruler area until the cursor changes to a "Cancel" icon, then release.
   • Click to select the guide and press Delete.

Note: Dragging from the top ruler creates a horizontal (X-axis) guide; dragging from the left ruler creates a vertical (Y-axis) guide.

Fold Line (Blue Dashed Line)

The blue dashed line in the editor indicates the "Fold" or the bottom of the first screen. This helps you understand what content will be visible initially without scrolling.

Measure / Show Spacing

Select a component and hold Alt (Windows) or Option (Mac) to quickly view the distance (spacing) between the selected component and other elements.

Adjust Layer Order

There are two ways to adjust the layer order of components:

1. Select the component and use the Bring to Front / Send to Back options in the top toolbar.
2. Drag the component up or down in the Layers list on the left side of the editor.

Multi-select in Page/Layer List

Mockitt supports multi-selection in both the Page List and Element List:

1. Page List

• Hold Shift and click the first and last page to select a range of pages for unified moving/deleting.
• Hold Cmd (Mac) / Ctrl (Windows) to select multiple individual pages.

2. Element List

• Hold Shift and click the first and last element to select a range. Right-click to group or adjust layers.
• Hold Cmd (Mac) / Ctrl (Windows) to select multiple individual elements. Right-click to group or adjust layers.

Default Text Style

There are two ways to set default text styles in Mockitt:

1. Text Style Inheritance: New text components automatically inherit the style of the last edited text component of the same type.
2. Fixed Default Value: Use a fixed text style for every new component. This requires disabling the text style inheritance feature.

How to set: Click the top-left menu button > Preferences > Text.

FAQ

1. Why doesn't "Bring to Front" / "Send to Back" work?

If a component is inside a Group, the "Bring to Front" action only moves it to the top within that group, not the entire page. If the action seems ineffective, please check if your component is nested inside a group.