设计稿转代码的原理和已有产品分析

新知榜官方账号

2023-07-06 06:00:16

D2C是指DesigntoCode,设计稿转代码,输入是sketch、figma、PSD等设计稿,输出是vue、react、小程序等各平台的前端代码。对前端工程师来说,如果能直接把设计稿转成可用的代码,是非常有意义的,那这样一个工具是怎么实现的呢?

设计稿转代码的实现原理是从结构化的矢量图中提取信息,转换成中间DSL,然后再生成各平台的代码。从设计稿转DSL的过程需要处理分组、做绝对布局到flex布局的转换,生成语义化的className,支持组件的标注。这个过程可以通过编辑器来实现人工干预,也可以通过AI来智能化处理。下限是编辑器人工干预保证的,上限就要靠AI了。

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

本页网址:https://www.xinzhibang.net/article_detail-6222.html

寻求报道,请 点击这里 微信扫码咨询

关键词

D2C 设计稿转代码 DSL AI算法 编辑器 组件标注

分享至微信: 微信扫码阅读

相关工具

相关文章