从设计稿直接生成前端代码,省去中间流程,做到精度还原的同时并节约研发资源,已经有很多团队在研究和实践这样的思路。
笔者简单描述一下思路,以 sketch 为例,抛砖引玉。
先上图:
解释:
第一步:和设计师约定设计规范,比如如何排布图层,如何分组,如何命名等
第二步:编写 sketch 插件,将符合设计规范的设计稿转化为 “sketch code”(即 sketch 输出的一套 DSL)
图片内容来自 imgcook
第三步:制定映射关系,将 “sketch code” 映射为 “fe code schema”
图片内容来自 imgcook
第四步:将 “fe code schema” 转化为多平台特异的代码片段
图片内容来自 imgcook
第五步:将代码片段集成到项目工程中
Done.
相关工具
- Sketch2Code
- imgcook
- fusion design
- 鹿班
- Sketch 插件 Blade
- react-sketchapp
- pix2code
- PxCook