Figma2Code: Automatic code generation method for Figma design drafts

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.