After entering the editing interface, let's look at the overall layout of the Mockitt design tool.

mockitt toolbar

Once you enter into the design editing area, the top toolbar contains most of the functions you will use. The functions displayed in the toolbar depends on what you have selected in the artboard.

top toolbar
top menu

The functions of the different buttons in the menu bar are described below, from left to the right.


The leftmost part of the toolbar is the menu of the Mockitt design tool, which aggregates the editing and view functions, and the search box allows you to search all the contents within the menu.

main menu

Shape Tools

Within the shape tools, Mockitt has the most basic graphic design shapes built-in: Rectangle (shortcut R), Circle (shortcut O), and Line (shortcut L). Using these basic shape tools combined with the excellent vector editing capabilities of the design tools will allow you to create a fantastic design.

shape tools

Pen Tool (Vector Editing)

Use the pen tool to draw custom shapes and icons on a vector network with vector editing support.

pen tool


Artboard (shortcut A) is used to draw a board on the page to carry design layers. Once the Artboard is created, the size and device type can be adjusted on the right panel when the Artboard is selected.



Text component (shortcut key T) is used to add text objects to the design.


Project name

When the layer is not selected, the name of the project is in the middle of the toolbar, click to modify the project name.

Click on the project name drop-down triangle to expand the menu, including Save (shortcut: command/ctrl+S), Undo (shortcut: command/ctrl+Z), Redo (shortcut: command/ctrl+shift+Z), Rename (shortcut: command/ctrl+shift+R).

project name