Imgcook (Image Chef) is a platform launched by the Alibaba - Taobao Technology - Shopping Guide and Marketing Product team for intelligently generating front-end code from design mockups (D2C, Design to Code). It focuses on taking visual mockups in the form of Sketch, PSD, static images, etc. as input, and through intelligent technology generates maintainable front-end code with one click, including view code, data field binding, component code, some business logic code, etc.
Main features of Imgcook
One-click restoration of visual mockups
Restoring and generating code from a visual mockup requires exporting the data from the visual mockup to the imgcook visual editor to restore and generate code. Two methods are supported:
- Method 1: Open the Sketch/PSD file, export the layer information from the design mockup through the installed imgcook plugin, and paste it into the visual editor.
- Method 2: Directly upload/"import" Sketch/PSD/image files in the visual editor. imgcook will parse the layer information and restore it directly in the editor.
Visual editing
In the imgcook visual editor, users can edit the view, such as supporting dynamic expression styles, setting loops, and modifying layouts. They can also write logic code, bind fields, etc.
Generate code
Official commonly used DSLs are provided (React/Vue/Mini Program DSL, etc.). Click the dropdown list to switch to other DSLs. If you have special requirements, you can also customize a DSL.
After the code is confirmed, you can click "Export". You can also use the VS Code imgcook plugin workflow "Export". This method can generate the entire module code file into the corresponding directory, and you can directly continue using VS Code to develop the entire project. The exported code goes into local files, and images are stored in the images folder in the form of relative paths.
Application scenarios of Imgcook
imgcook currently supports high-fidelity restoration of pages or modules in various scenarios. You can choose whether to use imgcook according to the following scenario categories.
- Mobile fine-grained module development scenario - Highly recommended
- Mobile campaign page - Highly recommended
- Mobile full-page development - Recommended
- PC toC application - Recommended
- PC toB application
- PC rich interaction application - Not recommended
- Game scenario - Not recommended
How to use the imgcook plugin?
-
Make sure you are logged in to your imgcook account.
-
In Figma, go to Plugins and select imgcook. You should see a new export window.
-
Select any file layer group, then click "Export". imgcook will pop up a "Export successful, copied to clipboard!" prompt popup, then click "Go to paste" to restore.
-
imgcook will open the editor in a new browser tab. Paste it and restore it into the "ctr + v" editor, then save it as a module.
Is Imgcook free?
Imgcook is completely free. Users can use the Figma, Sketch, VSCode, and other plugins it provides to convert design mockups into code for free.
