Mockplus - Design Faster. Collaborate Better.

Subscribe to our blog

To get the latest and most quality design resources!


Best Prototyping Tool for Mobile, Web and Desktop Apps.

Get Started for Free

One platform for design, prototype, hand-off and design systems.

Get Started for Free
Start prototyping and collaboration
New Features > New Feature for Developers: Auto Generate Layer Data

New Feature for Developers: Auto Generate Layer Data

Sep 16, 2019

Mockplus iDoc has a new nifty feature created especially for developers: “Layer data”. With this feature, developers can download and use automatically generated layer data for faster and easier product development.

Let’s see how it works.

A quick introduction to this new feature:

  • Copy layer data with one click
  • Mark layers
  • Add layer notes
  • Download layer data with one click

Copy layer data with one click

To create a new product, front-end developers always use layers. After downloading the related layers, they also have to copy the property data of these layers and use it in their codes.

However, this process is troublesome and time-consuming, especially when there are lots of layers involved.

Luckily for developers, Mockplus iDoc’s new feature “Layer data” allows you to complete the process with a few clicks. In other words, you can download, copy, and use the layer data directly in your related layer coding within minutes - not in hours or more.

Let’s see how it works.

First, when you select a layer of your design page in the “Development” mode, all the related layer information will be clearly displayed in the right property panel, including the layer position, size, color, opacity, font, and font size.

You can then simply click “Copy” in the upper right corner of the property panel to copy all the displayed layer data in JSON format. You can use this directly for easier and faster product development.

Copy layer data

Mark layer

The above method helps generate property data for only one layer. How can we generate property data for multiple layers in one go?

The answer is simple. Mark all the desired layers in advance.

All marked layers will also be automatically listed in the right “Layers” panel for better viewing and management.

Mark layer

Add layer notes

You can add a note to your desired layer to explain usage and other related information.

When copying the layer data, this note will also be included in the JSON format file and shown as "remark" :{"remark":"XXX"}.

add layer notes

Download layer data

Click “Download the selected layer data” or “Download all layer data” to easily download your desired layer data after marking layers well in advance.

All your desired layer property data will then be downloaded in a .json file, which you or your developers can use directly for product development.

Download layer data

This is definitely one of the niftiest new features for developers in Mockplus iDoc.

Interested yet? Why not try it now?

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

Design Faster. Collaborate Better.

Designing the best user experience. Mockplus does it all!

Interactive prototyping

Unified collaboration

Scalable design systems