D2C工具及其实现流程分析

新知榜官方账号

2023-07-06 06:02:18

设计稿转代码实现思路分析

要想实现设计稿转代码,我们必须要实现一层转化,让转化后的中间产物能被解析器转化为前端代码,具体流程如下:

  1. 提取图层信息:我们首先要获取设计稿中的图层信息,以便拿到所有图层的位置(position)、大小(size)、形状(shape)和颜色(color)等信息。这些信息将为后续的页面布局提供数据基础,由于设计稿分为psd,sketch,figma,今过笔者的实践目前社区提供了psd.js和sketch2json两款开源工具可以将设计稿转化为json格式的数据。
  2. 信息萃取:对图层信息进行预处理,清洗,筛选和过滤无用信息和图层,对图层进行样式合成,对图片资源进行导出等操作,以提高后续布局的准确性和代码质量。
  3. 构建布局树:利用萃取后的数据,进行精确的页面布局,使页面尽可能地还原设计稿。(为了提高精确度需要借助算法计算和语义推算)

接下来,本文介绍了几个非常有意思且免费的D2C工具,分别是阿里imgcook、京东Deco、Picasso、Semi和Locofy,并简要介绍了它们的特点和核心设计原理。

最后,本文提到UI自动化和低代码&无代码已经成为当前行业研究的趋势,各大公司都在进行相关方向的研究,目前也有非常成熟的开源或者商用解决方案比如宜搭,H5-Dooring等。

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

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

关键词

D2C 设计稿转代码 智能化工具

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

相关工具

相关文章