Figma2Code: 面向Figma设计稿的自动代码生成方法
Figma2Code: Automatic code generation method for Figma design drafts
-
摘要: 设计类创作工具已被广泛用于提高用户界面(User Interface, UI)的设计效率. 然而, 根据UI设计稿进行代码开发是一件耗时费力的工作. 现有的设计稿自动转代码的方案仍面临着代码可用性和复现结果准确性等方面的问题. 基于Figma设计工具提出了一种新的自动代码生成方法Figma2Code, 充分结合Figma设计稿元数据和视觉图像生成高可用性和样式准确度的UI页面代码. 提出节点和图层优化, 以提高元数据质量; 利用元数据标注信息的语义理解和图像识别技术识别图形用户界面(Graphical User Interface, GUI)组件; 构建一套通用型的中间态DSL数据结构, 以支持多种代码语言的生成; 最后通过函数抽取和元素循环输出提高代码可用性. 通过案例研究与用户实验证明了该方法的可用性和准确性.Abstract: Design tools are widely used to improve the efficiency of user interface(UI) design. However, developing code for UI design drafts is a tedious and time-consuming task. Existing solutions for automatic design draft to code still face issues in terms of code availability and reproduction accuracy. We propose a new method called Figma2Code for automatically generating code for Figma design drafts, which fully leverages the metadata and visual image of UI design drafts to improve code availability and stylistic accuracy. The method reorganizes the nodes and layers in the metadata to improve quality, identifies Graphical User Interface(GUI) components based on semantic understanding of metadata annotation and image recognition. Both the optimized metadata and recognized GUI components are transformed into a universal intermediate state to support multiple UI code generation. Finally, the method improves the code quality by splitting codes into functions and abstracting similar UI elements. We present two cases and conduct a user study to demonstrate the usability and accuracy of Figma2Code.
下载: