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.
翻译:用户界面设计的演进强调了对高效、可复用且可编辑组件的需求,以确保设计流程的高效性。本研究介绍了CoGen系统,该系统利用机器学习技术在最流行的UI设计工具之一Figma中直接生成可复用的UI组件。针对现有系统的不足,CoGen专注于使用结构化JSON和自然语言提示创建原子组件,如按钮、标签和输入字段。该项目集成了Figma API数据提取、Seq2Seq模型以及用于组件生成的微调T5 Transformer。关键结果表明,T5模型在提示生成方面具有高效性,准确率达到98%,BLEU分数为0.2668,这确保了JSON到描述性提示的映射。在JSON创建方面,CoGen为指定组件类型生成简单JSON输出的成功率高达100%。