D2C 设计稿转代码有哪些工具?

图片转代码?原型图生成代码?这里转载摘录现有的一些工具总结。

设计稿转代码的原理是从结构化的矢量图中提取信息,转换成中间 DSL,然后再生成各平台的代码。

从设计稿转 DSL 的过程需要处理分组、做绝对布局到 flex 布局的转换,生成语义化的 className,支持组件的标注。

这个过程可以通过编辑器来实现人工干预,也可以通过 AI 来智能化处理。

下限是编辑器人工干预保证的,上限就要靠 AI 了。

然后我们看了一下各种 D2C 工具:

  • 58 的 Picasso 没有支持编辑器,组件标注支持的也不好,但是支持生成绝对布局和 flex 布局的代码,还原度也还行,并且是开源的
  • 京东的 Deco 支持了编辑器,通过 AI 做了很多自动化的处理,还支持了逻辑层的处理,但是目前公开的部分还比较简单,也没开源
  • 淘宝的 imgcook 支持的设计稿类型比较多,还支持从图片来提取信息,也支持了编辑器,在里面实现了低代码的组件拖拽编辑,功能比较全面
  • 专门做 D2C 工具的 CodeFun 做的比较通用,支持各种矢量设计稿(不支持图片),也支持生成很多种代码,编辑器功能也挺多,还原度不错,只不过是收费的,没开源
  • 国外的 Locofy 只做 figma 转 react 系列技术栈,所以在 figma 插件里做了很多功能,比如组件标注、低代码编辑,之后在 web 预览代码,还可以一键部署

这些 D2C 工具其实都不够通用,要支持自己的一些需求估计还得自研,但是自研一个 D2C 的工具还是需要挺高的成本的,对于中大公司来说,如果业务场景比较合适,ROI 还行,还是值得长期去做的。

作者:zxg_神说要有光
链接:https://juejin.cn/post/7154300576925220871
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Author: thinkwei

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注