Imgcook

Imgcook (Image Chef) is a platform for intelligent generation of front-end code (D2C, Design to Code) from design drafts launched by Alibaba-Big Taobao technology-guide and marketing product team, focusing on Sketch, PSD, static images and other forms of visual drafts as inputs, and generating maintainable front-end code with one click through intelligent technology, including view code, data field binding, component code, part of the business logic code and so on.

Imgcook's main features

Restore visual scripts with one click

Reducing the generated code from the visual script requires exporting the data from the visual script to the imgcook visual editor to reduce the generated code, which supports two ways:

• Type 1: Open the Sketch/PSD file and export the layer information from the design via the installed imgcook plugin and paste it into the visual editor.
• Type 2: Upload and "import" Sketch/PSD/image files directly into the visual editor. imgcook will parse the layer information and restore it directly into the editor.

Visualization Editor

In the imgcook visual editor, users can edit the view, such as supporting dynamic expression styles, setting loops, and modifying the layout. You can also write logic code, bind fields, and more.

Generate Code

There are commonly used DSLs (React/Vue/Applet DSLs, etc.), and you can switch to other DSLs by clicking on the drop-down list, or you can customize the DSLs if you have special requirements.

After the code is finalized, you can click "Export", you can also use VS code imgcook plugin link "Export", this way you can generate the whole module code file to the corresponding directory, and continue to develop the whole project with VS code directly. After exporting the code to a local file, the images will be stored in the images folder as a relative path.

Imgcook application scenarios

Currently, imgcook supports various scenarios of page or module height reduction, you can choose whether to use imgcook according to the following scenario categories.

• Mobile Fine-Grained Module Development Scenarios - Special Recommendation
• Mobile Event Page - Special Offer
• Mobile Full Page Development - Recommended
• PC toC Apps - Recommended
• PC-based toB applications
• PC Rich Interactive Application - Not Recommended
• Game scenarios - not recommended

How to use imgcook plugin?

1. Make sure you are logged into your imgcook account.

2. In Figma, go to Plugins and select imgcook and you should see a new export window.

3. Select any file layer group and click "Export". imgcook will popup "Export successful, copied to clipboard!" Prompt for the layer popup, then click "Go to Paste" to restore.

4. The imgcook will open the editor in a new browser tab. Just paste it and restore it to the "ctr + v" editor and save as a module.

Is Imgcook free?

Imgcook is completely free, and users can use its provided plugins such as Figma, Sketch, VSCode, etc. to carry out the conversion of designs into code for free.