CoGen: Creation of Reusable UI Components in Figma via Textual Commands
This addresses the need for efficient and editable UI design components for designers using Figma, but it is incremental as it builds on existing tools and methods.
The research tackled the problem of efficiently creating reusable UI components in Figma by introducing CoGen, a system that uses machine learning to generate atomic components like buttons from textual commands, achieving up to 100% success rate for JSON creation and 98% accuracy in prompt generation.
The evolution of User Interface design has emphasized the need for efficient, reusable, and editable components to ensure an efficient design process. This research introduces CoGen, a system that uses machine learning techniques to generate reusable UI components directly in Figma, one of the most popular UI design tools. Addressing gaps in current systems, CoGen focuses on creating atomic components such as buttons, labels, and input fields using structured JSON and natural language prompts. The project integrates Figma API data extraction, Seq2Seq models, and fine-tuned T5 transformers for component generation. The key results demonstrate the efficiency of the T5 model in prompt generation, with an accuracy of 98% and a BLEU score of 0.2668, which ensures the mapping of JSON to descriptive prompts. For JSON creation, CoGen achieves a success rate of up to 100% in generating simple JSON outputs for specified component types.