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