计算机辅助设计与图形学学报

作者：朱琳, 封颖超杰, 朱航, 王斯加, 朱闽峰, 喻晨昊, 张钰荟, 许达兴, 赵德明, 冯玉君, 陈为

关键词：设计稿转代码, 逆向工程, 用户界面, 深度学习

设计类创作工具已被广泛用于提高用户界面的设计效率, 然而, 根据设计稿开发代码是一件耗时费力的工作.针对现有的设计稿自动转代码的方案面临的代码可用性和复现结果准确性等问题, 基于Figma设计工具提出一种自动代码生成方法——Figma2Code.首先, 通过节点和图层优化提高设计稿元数据质量; 其次, 采用元数据标注信息的语义理解和图像识别技术识别组件; 然后构建一套通用型的中间态数据结构, 表示优化后的元数据和识别后的组件属性, 以支持多种代码语言的生成; 最后, 基于模板生成可用代码, 并通过函数抽取和元素循环输出提高代码可用性.采用生成代码的复现样式准确度量化评估和基于专家经验的代码可用性定性评估, 证明了所提方法的有效性.

来源：2025年第2期

《计算机辅助设计与图形学学报》期刊编辑部

查看计算机辅助设计与图形学学报杂志2025年第2期