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…