Designers Have Developed over 1,100 Pages with Frontend Developers Using imgcook

By Mozai (from Youpinjie) and Suchuan (from F(x) Team)

Youpinjie is an application offering regionalized city life services. It provides users with information services, such as merchant information, consumer reviews, short video shooting, and discounts.

Designers use design material management, design layer marking, layer parsing, and other capabilities to collaborate with frontend developers efficiently. The collaboration efficiency has been improved.

imgcook created more than 1,100 modules from May 25, 2020, to June 3, 2021, covering over 20 frontend projects.

Detailed Information

Usage Time: May 25, 2020, to June 3, 2021
Usage Details: Over 1,100 modules created in imgcook, covering over 20 frontend projects
Users: Frontend developers, led by designers
User Quantity: One designer cooperating with four frontend developers
Page Examples:

Why Do We Use imgcook?

imgcook helps frontend developers accurately restore design drafts. Parameters can remain consistent between design drafts and frontend codes, including font size, color, and line spacing between modules. imgcook helps reduce unnecessary communication between designers and frontend developers and helps improve frontend productivity with its automatic code generation.

Design Steps

Step 1: Process Design Materials

Designers can upload design materials in the imgcook background. Other designers of the same team can use the imgcook sketch plug-in to share a set of design materials. This will ensure a unified and standardized design.

When generating the code, a unified and standardized design draft can make the generated code more maintainable.

1. Name the Design Draft According to the Catalog

Name the design draft based on the official documentation of design materials. In Sketch, the catalog is divided based on the name.

2. Adjust the Design Draft

Group Using Sketch and imgcook Plug-In

The grouping protocol is used here. The files will be grouped first. Then, the grouping protocol will be added. A nested structure will be generated according to #group# during code generation. The generated code structure is the self-defined nested structure. imgcook can also automatically generate an acceptable nested structure.

Designers are familiar with Sketch. However, they still need to understand a little about the hierarchy of frontend code. If there are no redundant layers, the automatically generated structure is acceptable. As a result, this operation is not used often.

Merge Images Using the imgcook Plug-in

When we design the visual draft, a picture will be composed of many layers. However, only one picture is allowed in the frontend code, such as the download icon. imgcook provides a design draft protocol that can add a #merge# tag to the folder composed of multiple layers for merging. This way, only one picture will be generated when exporting.

3. Set the Class Name

According to the development requirements, a semantic name is added to the layer. The frontend developers can use it as the class name. Designers may find this easy to understand. We have added class names to this component, so we don't need to add them again when using these design materials.

In addition, we can add class name prefixes:

4. Set the Format of Exported Images

Set the format of exported images according to the Advanced Marking Specification for Design Draft. This is widely used by designers because they have special requirements for the image format of online pages.

Step 2: Upload Design Materials

Create a design group in imgcook and upload the sketch file according to the document:

Step 3: Design the Page with Design Materials

After uploading the materials, you need to switch to your design group in the Settings. Then, you can drag the materials directly to use. If materials are not updated, you can right-click to reload.

When designing the page, the design draft will also be processed the same way as the design materials.

Step 4: Generate Module with the imgcook Sketch Plug-In

After the design is completed, you can parse the design draft to generate a link and send it to the frontend developers.

Step 5: Deliver the Module to the Frontend for Use

Frontend developers can click the link to view the code.

R&D Steps

Copy or export the code to the local project in the imgcook editor.

We officially recommend using imgcook cli and plug-in to directly import the generated code to the project using the command line.

What imgcook Capabilities Are Used?

Design Material Management with the Sketch Plug-In

imgcook allows users to upload personal design materials. This is suitable for teams with specific design specifications and components. On the one hand, it facilitates design collaboration, and on the other hand, it can standardize and unify the design specifications of the team.

In terms of code generation, layer tags required by developers can be uniformly added during material design, such as class name prefixes and image formats. Designers on the team do not need to care about these when designing UI. After UI design is completed, the exported code will have a unified and standard class name prefix and expected image format.

In other words, the management capability of design materials standardizes the design input of code generation. At the same time, it completes layer marking during material design with the minimum cost for code generation with customized requirements, such as class name prefixes and image formats.

Design Draft Marking by Sketch Plug-In

imgcook exports the design draft as PNG images by default, but we expect it to be of the SVG format. In addition, frontend developers expect the exported code to have a business-related class name prefix. In some scenarios, imgcook cannot solve some problems, such as the background image composed of multiple layers. We need to manually mark the layers with the #merge# protocol provided by imgcook. Then, we can export it as one image.

Generally, in some scenarios where imgcook cannot meet our requirements for automatic code generation, we can manually mark the design draft as described in Advanced Marking Specification for Design Draft. This way, highly maintainable code can be generated in these scenarios.

The marking protocols commonly used include those for:

Marking the exported format of images
Marking the class name
Merging Images – Some atmosphere images, background images, and large icons with multiple layers are suggested to be merged.
Grouping

Code Exporting of imgcook

Copy or export code from the imgcook editor

Introduce imgcook to Your Team

1. imgcook Introduction

imgcook is a platform that intelligently generates code based on the design draft. It was developed and opened by Alibaba. It can generate maintainable frontend code for React, Vue, and mini programs based on design drafts (Sketch/PSD/Figma/images). It can also customize the generated code.

We can install Sketch, Photoshop, and Figma plug-ins to export layer data to imgcook or upload design draft files directly in the imgcook editor for parsing. Then, we can view the generated code in the imgcook editor.

2. A Detailed Introduction to the Use of imgcook

Import the design draft. You can use imgcook plug-ins or parse the uploaded design draft files to generate code.
You can manually mark the layers through the design protocol to generate code. (This method can be used for scenarios where imgcook is not very suitable.)
The principle of intelligent code generation by imgcook is to convert the JSON Schema that describes the design draft file. Through analyzing, computing, and identifying by the design protocol, program algorithm, and machine learning algorithm, the schema is converted to an imgcook JSON Schema with a reasonable nested structure of Flex layout and code semantics. Then, the Schema is converted into various types of frontend code using various DSL conversion functions.
imgcook JSON Schema can be viewed in the imgcook editor. We can modify the view and style in the visual editor. Essentially, we are modifying this JSON Schema.
Viewing the code is to input the final imgcook JSON Schema to the customized DSL conversion function. The output is the frontend code.

3. Usage Example

You can share some examples showing how other teams are using imgcook. More examples will be given on the imgcook official website.

4. Understanding the Drawbacks of imgcook for Better User Experiences

imgcook can automatically generate code with high maintainability, but the design draft layers are ever-changing, and some scenarios have not been covered. For example:

The Problem of Merging Associated Layers in the Design Draft: Some images (such as atmosphere images, background images, and icons) are composed of multiple layers in the design draft, and these layers need to be merged and exported as one image before code generation.
Unreasonable Layout: The layout nested structure generated by imgcook is unreasonable or not as expected.
The Problem of Generating UI Logic Code: The data in the design draft is static, but the actual online data is dynamic, which will bring some UI changes. However, we cannot know the changes when generating the code based on the design draft.

imgcook provides a design protocol to solve these problems. It allows users to manually intervene in layers. Users can also make visual adjustments in the imgcook editor after the code is generated.

For more information, please visit the official site of imgcook: https://www.imgcook.com/

Community