Figma2Code:面向Figma设计稿的自动代码生成方法  

Figma2Code:Automatic Code Generation Method for Figma Design Drafts

作　　者：朱琳[1] 封颖超杰 朱航 王斯加 朱闽峰 喻晨昊 张钰荟 许达兴 赵德明 冯玉君 陈为[1] Zhu Lin;Feng Yingchaojie;Zhu Hang;Wang Sijia;Zhu Minfeng;Yu Chenhao;Zhang Yuhui;Xu Daxing;Zhao Deming;Feng Yujun;Chen Wei(State Key Laboratory of CAD&CG,Zhejiang University,Hangzhou 310058;School of Software Technology,Zhejiang University,Hangzhou 310058;Guangdong OPPO Mobile Telecommunications Corp.,Ltd.,Shenzhen 518000;Chengdu OPPO Telecommunications Technology Corp.,Ltd.,Chengdu 610000)

机构地区：[1]浙江大学计算机辅助设计与图形系统全国重点实验室,杭州310058 [2]浙江大学软件学院,杭州310058 [3]OPPO广东移动通信有限公司,深圳518000 [4]成都欧珀通信科技有限公司,成都610000

出　　处：《计算机辅助设计与图形学学报》2025年第2期321-329,共9页Journal of Computer-Aided Design & Computer Graphics

基　　金：国家自然科学基金重点项目(62132017)。

摘　　要：设计类创作工具已被广泛用于提高用户界面的设计效率,然而,根据设计稿开发代码是一件耗时费力的工作.针对现有的设计稿自动转代码的方案面临的代码可用性和复现结果准确性等问题,基于Figma设计工具提出一种自动代码生成方法——Figma2Code.首先,通过节点和图层优化提高设计稿元数据质量;其次,采用元数据标注信息的语义理解和图像识别技术识别组件;然后构建一套通用型的中间态数据结构,表示优化后的元数据和识别后的组件属性,以支持多种代码语言的生成;最后,基于模板生成可用代码,并通过函数抽取和元素循环输出提高代码可用性.采用生成代码的复现样式准确度量化评估和基于专家经验的代码可用性定性评估,证明了所提方法的有效性.Design tools are widely used to improve the efficiency of user interface(UI)design.However,coding for designs is a tedious and time-consuming task.To address the issues in terms of code availability and reproduction accuracy in the existing automatic design-to-code solutions.We propose Figma2Code,a method for automatically generating code for Figma-based designs.First,nodes and layers are reorganized in the Figma metadata to improve quality,and components are identified based on semantic understanding of metadata annotation and image recognition.Then,both the optimized metadata and recognized components are transformed into a universal intermediate state to support multiple code generation.Thereafter,code is created from templates and improved by splitting codes into functions and abstracting similar UI elements.We quantitatively evaluated the accuracy of the generated code reproduction style and qualitatively evaluated the usability of the code based on expert experience,which demonstrates the effectiveness of the proposed method.

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

分 类 号：TP391.41[自动化与计算机技术—计算机应用技术]