Figma2Code: Automatic Code Generation Method for Figma Design Drafts

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.