In Mockplus, the design specs can automatically be generated, faster and easier for view.

 

Specs viewing

You can view the corresponding design specs by clicking or hovering on any element on the page.

1.png

Specs mode

There are 3 specs 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 for the distance between them.

2.gif

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.gif

3. select multiple layers

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

4.gif

Specs percentage

Hold down Shift to make the specs be displayed in percentage, and you can restore it by releasing it.

6.gif

Magnifier

Press and hold the Z button to use the magnifier. When you’re using the maginifier, the mouse hover state will be fixed, and you can move the mouse to check the specs in the zoomed state. If the magnification cannot fit your requirement, you can adjust the magnification by using the “+/-” key while holding down the Z button.

7.gif

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 to expand the layer tree. As we can see, its structure is comprised of overlapping relationship between the layers and the grouping relationship in the design draft, which helps to select and make specs on the layer.

8.gif

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.

9.png

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.

10.png

11.png

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

12.png

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.

13.png

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

14.png

 

 

See also:

Specs