There are three modes in the design section, namely “Comment, Review, Development”. This one-page document makes the division of labor clear and does not force the order of use. Therefore it flexibly adapts to the management style of different teams, making collaboration more efficient.

Comment mode

You can add comments on the current page in the Comment mode.


Comment styles

Currently, there are 5 comment styles available for your choose, including: Pin, Circle,Rectangle, Arrow, Line.


Add an comment

Inthe upper Comment toolbar, you can click to select the needed comment tool.Click on Pin to enter your comments or press and move the mouse to use Circle,Rectangle, Arrow and Line tools.

Also,you can use the shortcut keys to select or toggle the comment tools: Select=V,Pin=D, Circle=C, Rectangle=R, Arrow=A, Line=L.


  • ThePin tool 图钉评论 includes various marker color for highlighting the project importanceand completion. After entering the text content, click to send the comments inthe Pin.
  • From the upper-left drop-down menu, you can select the comment status- Unresolved, Completed, Resolved. Also, click Delete option 删除图标 for comment deletion(Note: You can only delete comments created by yourself,  and you don’t have permission to delete or edit comments from other members).
  • Click Pencil option 编辑图标 for comment editing.


Select tools

Click  选择图标 to select a tool, and you can drag an area and select multiple comments.


Multiple select and copy comments

Select multiple comments and right click on Copy (or Ctrl+C) to copy the comments. Right-click on the blank and select Paste (or Ctrl+V) to paste the comments.


Isometric drawing

In addition to the Pin tool, when adding or resizing with the drawing tool, you can hold down Shift to adjust the size in proportion, and the line can be set to horizontal, vertical, 45 degrees, etc.


Select an comment

Thecomment panel displays all of history comments. Click the upper-left drop-downmenu on the panel, you can select the Unresolved, Completed, Resolved, Allstatus to filter the comments.


During team collaboration, if multiple members have added comments, you can filter out a member’s comments or all member comments based on their names.


@ Members in Comments

When commenting, you can @ a member or all members. Entering the “@” symbol will bring up the @ member drop-down box, in which you can select the members you want to mention.


The mentioned members will receive a message prompt on the left side of his/her avatar. Click on the message content to jump to the comment page.



Review mode

manual specs

In the Review mode, click the text button 文字标注图标-英 in the upper left corner to add text markups to the current page and view pin comments. (Note: Collaborators can only use comment mode and development mode.)



Coordinate markup

Click the “Coordinate markup” icon  坐标图标 in the upper left corner to easily mark the coordinate information of your page elements.


Spacing markup

Click the “Spacing markup” icon 尺寸图标 in the upper left corner and draw a line around any page elements to add spacing markups with ease.



Color markup

Click the “Color markup” icon 颜色图标 in the upper left corner and click any position on the page to gain its color value quickly.




Area Markup

Click the  icon 区域标注图标 in the upper left corner and draw a rectangle in any place of your design. And then, you can add the height and width markups of this rectangle in seconds.



Page turner

Click the page turner 翻页器图标 on both sides of your design page to quickly switch pages.



Development mode

In the Development mode, specs can be generated smartly. You can view the corresponding specs by clicking or hovering on any elements of the design page. (Note: You can only view specs in the Development mode.)


Specs mode

There are three specs viewing modes in Mockplus iDoc:

1. not select any layers

Without selecting any layers, if you move between the layers, then it will automatically display the specs of the distance between them.



2. move between the layers

Select a layer and mouse over another layer to display the specs for the distance between the two layers.



3. select multiple layers

Hold down the Ctrl key and select multiple layers to display the specs for the distance between multiple layers.



In the Development mode, you can popup the Magnifier by clicking the magnifier icon in the lower left corner or pressing the Z button.



When using the Magnifier, the specs information on the design page will be fixed, and you can move the mouse to see the specs in the zoomed state. You can also press the “+/-” keys to adjust the magnification.


Layer tree

The layer tree provides a clear view of the hierarchical relationships between layers, helping engineers to easily understand and interface layout.

Click on the layer tree icon 20181101_213036 to expand the layer tree. The layer tree structure is consistent with its layer structure in PS/Sketch/XD, which can assist in selecting and hovering layers.


Layer panel

When there are multiple layers in the same location on the page, double-click the location to pop up the layer panel. All layers in that location are displayed in the layer panel.


After selecting “Lock layer panel” in the settings in the lower right corner, each time you double-click the layer, the panel will be displayed in a fixed position to avoid occlusion.


Disable layer

It can be disabled when there are invalid layers in the page. There are three ways to disable layers in the page:

1. Right click on the layer and click “Disable layer”.


2. In the left layer tree, click the disable button 禁用标志-英 behind the layer name.


3. Double-click a layer and click the disable icon  禁用标志-英 behind the layer name in the pop-up panel to disable the layer.



Specs panel

On the right is the specs panel.

The top half of the specs panel displays the detailed information. Generally, it includes the layer name, position (left/top), size (size/height), margin (left/right/up/down) as well as opacity. If it’s text content, it also includes the content, font, font size, font weight, line height, word spacing, alignment as well as color.


点击复制Click on the values and you can copy them with one click;

查找相同and you can click on the search icon to find the duplicate elements on the design draft;

复制代码The lower half of the specs panel displays the style code. Click “Copy code” and you can copy them with one click.

Reference layer of percentage specs

Right-click on a layer, and you can set it as the reference layer of percentage specs. This layer will be used as a reference to calculate the percentage value of the specs.


Set the measure unit

The default measure unit on the page is pixel. If you need to convert to unit on other platforms (such as the pt in iOS, the dp in Android and the rem in Web), you can toggle in the unit panel.

At present, it supports general device conversion, custom width conversion, and custom unit conversion. The size of the current general-purpose device is listed in the iOS and Android columns above, and it can be directly used in the real development. The custom width conversion is a supplement to the general device conversion method. For special device size, you can customize the device width for conversion. In the custom unit conversion, you can set the conversion ratio between units and convert the specs value.


Click the settings button and you can show/hide the jumping area and the page border.




See also: