New Feature for Developers: Auto Generate Layer Data

Mockplus
3 min readMay 29, 2020

Mockplus Cloud 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 Cloud’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.

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.

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”}.

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.

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

--

--

Mockplus

The best all-in-one product design platform for prototyping, collaboration and scalable design systems. Start for free now at: https://www.mockplus.com/