Article/Youpin Street – Mo Zai, Ali Tao F(X) Team – Su Chuan
Youpin Street is a regionalized urban life service app that provides users with merchant information, consumer comments, short video shooting and consumer offers.
Designers use design material management, design draft layer marking, layer resolution and other capabilities, and efficient collaboration with the front end, reduce a lot of front-end unnecessary communication time.
From 2020-05-25 to 2021-06-03, imgCook created 1100+ modules, covering 20+ front-end projects.
Use effect
- Time: from 2020-05-25 to 2021-06-03
- Usage: ImgCook created 1100+ modules covering 20+ front-end projects.
- User group: designer-oriented, front-end use
- Number of users: 1 designer, docking 4 front ends
- Page examples:
Why imgcook?
Imgcook helps front-end height restore the draft, reducing unnecessary communication between the designer and the front-end, such as font size, color, and line spacing between modules. Automatic code generation also improves front-end productivity.
The design steps
Step 1: Process and design materials
Imgcook Designers can upload design materials in the imgCook background. Students in the design team who upload design materials can use the IMGCook Sketch plug-in to share a set of design materials, which is convenient for unified design standards.
When generating code from a design draft, a uniform and canonical design draft makes the generated code more maintainable.
1. Name it according to the directory
Make a name according to the official document of the design material, and split the directory according to the name in Sketch.
2. Adjust the design draft
Group with Sketch & Group with imgCook plugin
Imgcook uses the group protocol to group files and then add the group protocol to generate code that follows #group# to generate a nested structure. Imgcook also generates a more appropriate nested structure.
Because designers are familiar with Sketch, they are more skilled in this operation, but there is a problem that they need to understand the hierarchy of front-end code. This operation is not used very much, and if there are no redundant layers, the auto-generated structure is reasonable, so it is generally not used.
Merge images with the imgCook plugin
When we design visual art, one image will be composed of many layers, but in the front-end code is required to use one image, such as downloading this icon. Imgcook provides a draft protocol to add a #merge# merge image tag to this layer folder so that an image is generated when exported.
3. Set the class name
This was added in response to the development requirements, adding a semantic name to the layer. The front end can be used as a class name, which is easier for the designer to understand. We basically add class names to this component, so that we do not need to add them when designing with these materials.
You can also add class name prefixes and so on.
4. Set the format of the exported image
According to the design draft advanced mark specification to set the image export format, which we designers use more, on the online page image format requirements.
Step 2: Upload design materials
Create a design group in IMGCook and follow the documentation to upload the Sketch file.
Step 3: Design the page using design materials
After uploading materials, you need to switch to your own design group in the Settings, and then you can directly drag into use. If there is no update, you can right click and reload.
In the design of the page, will also be in accordance with the above processing design material processing under the design draft.
Step 4: Generate the module using the imgCook Sketch plugin
Once you’ve designed it, you can parse the design and generate links that you can send to the front end.
Step 5: Deliver the module to the front end for use
The front end opens the connection and you can view the code.
Research and development steps
Copy or export the code to your local project in the IMGCook editor.
It is recommended that you use the IMGCook CLI and plugin to import generated code directly into the project from the command line.
What imgCook abilities are used?
Design material management ability with Sketch plug-in
Imgcook supports users to upload their own design materials, which is suitable for teams with their own 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 the generated code, you can add a development in material design unified classmate need to layer markers, such as the class name prefix, image format, etc., within the team more than one designer when designing the UI don’t need to care about these, UI design, after the completion of export the generated code will have a unified, standardized the class name of the prefix and the desired image format.
That is to say, the management ability of design materials more standardize the design input of code generation, and at the same time, there are custom requirements for the generated code, such as class name front end, image format, etc., can be unified in the material design layer annotation at the minimum cost.
Tagging ability of Sketch plugin design draft
Imgcook exports the design draft as a PNG image by default, we expect SVG; In addition, the front-end students expect the exported code class name to have a business-related prefix; Imgcook has some problems that it can’t solve, such as a background image with multiple layers. You need to manually mark the layer with the #merge# protocol provided by imgcook to export it as an image, etc.
Imgcook automatically generates code for scenarios that do not meet our requirements. We can use advanced markup specification manual markup to solve the problem, so that the scenarios can also generate high maintainability code.
The most commonly used markup protocols are:
- Tag image export format
- Mark the name of the class
- Combine images. Some atmosphere images, background images and large ICONS designed from multiple layers can be combined
- group
Imgcook code export capability
Copy or export the code from the IMGCook editor.
Introduce imgCook to the team
Imgcook D2C is one of the best ways to introduce imgCook to your team. If you want to use imgCook D2C, but don’t know how to introduce imgCook, we have prepared the introduction and PPT for you
- Introduce imgCook.key to the team
- Introduce imgCook.ppt to the team
1. Organize a sharing session
We could get the team together and organize an internal sharing session to introduce imgCook.
2. Show imgCook’s product introduction video
Imgcook’s product introduction video will give you an overview of what imgCook can do. Video link:
- Imgcook Quick to read
- Imgcook quick demo
Or you can just do a live demo at imgCook.
Introduction:
Imgcook is an intelligent code generation platform for design drafts opened by Alibaba. It can generate maintainable front-end codes from Sketch, PSD, Figma and images with one click, such as React, Vue and mini programs, as well as custom generated codes.
Imgcook can export the layer data using the Sketch, Photoshop, and Figma plugins, or upload the design file parsing directly to the imgCook editor and view the generated code in the imgCook editor.
Imgcook use live wire
Introduction:
- 1. Import the design draft. Export the generated code from the IMGCook plug-in or upload the design draft file to parse the generated code.
- 2. The protocol for providing design draft allows users to manually mark layers to generate code (for scenarios where imgCook doesn’t handle well)
- Imgcook Intelligent generation principle is to transform the JSON Schema describing the design document file into a reasonable Flex layout nested structure and code semantics through the analysis, calculation and recognition of the design protocol, program algorithm and machine learning algorithm. This Schema is then converted into different types of front-end code using various DSL conversion functions.
- Imgcook JSON Schema is viewable in the imgCook Editor. You can modify views, styles, and so on in the visual editor, essentially modifying the JSON Schema.
- 5. View the code, essentially feeding the final IMGCook JSON Schema to the custom DSL conversion function, and the output of the function is the front-end code.
4. Can you give an example of how the teams used it
This document has some user use cases that you can take a look at, including imgCook’s open capabilities. Further user stories will be posted on imgCook’s website.
5. Learn about imgCook’s flaws to help you get better at it
Imgcook generates maintainable code automatically, but the draft layer is so varied that there are some scenarios that haven’t been covered yet. Such as:
- Related layer merge problem: atmosphere, background, ICONS etc. are composed of multiple layers in the design draft, and the generated code needs to merge and export into one image
- The layout rationality issue: ImgCook generated a nested layout structure that did not make sense or did not meet expectations
- UI logic code generation problem: The data in the design draft is static, but the actual online data is dynamic, resulting in some UI changes, but these UI changes are not known when the design draft is transferred to the code
Imgcook provides a draft protocol that allows users to manually intervene with layers, or visually adjust them in the IMGCook editor after generation.
Learn more
Imgcook has a peggie user group where you can ask questions about your usage. You can follow the progress at imgCook and the Nuggets account.
Collection of User Cases
If your team has access to imgCook’s D2C service or you have experience with imgCook, feel free to leave a comment in the comments section of this article or post a link to the article (ATA, Nuggets, Zhihu, etc.).
There will be a chance to get custom gifts from IMGCook.
