The front-end code is generated directly from the design draft, which saves the middle process, achieves precision restoration and saves r&d resources. Many teams have been studying and practicing this idea.
The author briefly describes the ideas, taking Sketch as an example to draw inspiration from others.
First above:
Explanation:
Step 1: Agree design rules with the designer, such as how to arrange layers, how to group them, how to name them, etc
Step 2: Write sketch plug-in, and convert the design draft conforming to the design specification into “Sketch Code” (i.e., a set of DSL output from Sketch)
Image from imgCook
Step 3: Develop mapping relationship, map “Sketch Code” to “FE Code Schema”
Image from imgCook
Step 4: Transform “FE Code Schema” into multi-platform specific code snippets
Image from imgCook
Step 5: Integrate code snippets into the project
Done.
Related tools
- Sketch2Code
- imgcook
- fusion design
- Deer class
- The Sketch plug-in Blade
- react-sketchapp
- pix2code
- PxCook
Good article recommendation
- www.cnblogs.com/sskyy/p/781…
- www.cnblogs.com/dhsz/p/8431…
- Cloud.tencent.com/developer/n…