×
Community Blog Imgcook: Intelligent Code Generation from Design Drafts with a 100% Accuracy Rate

Imgcook: Intelligent Code Generation from Design Drafts with a 100% Accuracy Rate

This article explains imgcook and various plug-ins to help with intelligent code generation.

By Suchuan from F(x) Team

Use imgcook to Generate Codes from the Design Draft

Imgcook is an intelligent code generation platform that helps you generate high-quality frontend codes from the design draft automatically.

Not sure what to do with messy design drafts from the design team? Did you know that the imgcook plug-in allows you to "merge" and "group" elements?

Read on to find out the answer to these questions!

What Is "Group"?

In the Sketch plug-in, the "group" feature allows you to specify the nested structure of the generated codes.

The following figure shows the nested structure that I want:

1

You just need to select target layers and group them together!

2

The DOM tree generated will be exactly what you have expected:

3

What Is "Merge"?

In the Sketch plug-in, you can use the merge feature to integrate multiple layers into a single image.

This feature will not let you down.

For example, you can combine icons formed in multiple layers into a single image:

4

Select the layers you want to put together and merge them.

5

You can combine multiple layers that generate a specific atmosphere into a single image.

Just select the layers that you want to put together and merge them:

6

Select the layers you want to put together and merge them.

7

Use "Merge" and "Group" Together

imgcook supports automatic merging and grouping.

Manual "merge" and "group" actions are unnecessary for the automatic generation of highly maintainable codes.

If your design draft is not well organized, you will love this feature!

Use "merge" and "group" together

8

You can generate 100% accurate codes:

9

View the generated code

10

Convinced?

Visit Imgcook and generate your code now! Time to say goodbye to those simple, repetitive, and burdensome tasks!

0 0 0
Share on

Alibaba F(x) Team

32 posts | 1 followers

You may also like

Comments

Alibaba F(x) Team

32 posts | 1 followers

Related Products