用自然语言在Figma中自动生成可复用的界面组件
CoGen: Creation of Reusable UI Components in Figma via Textual Commands
- 通过文本指令和T5模型生成UI组件结构
- 组件生成准确率达98%，简单输出成功率100%
- 适合想提升设计效率的前端与UI设计师
用户界面设计正趋向高效、可复用和可编辑的组件化。本研究提出CoGen系统，利用机器学习技术在Figma中直接生成可复用的UI组件，如按钮、标签和输入框。该系统结合Figma API数据提取、序列到序列模型及微调后的T5 Transformer，实现从自然语言提示生成结构化JSON并转化为界面元素。实验表明，T5模型在提示生成上的准确率达98%，BLEU分数为0.2668；对于简单组件类型，JSON生成成功率可达100%。
原文摘要 · Abstract (English)
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.
Thank you to arXiv for use of its open access interoperability. PaperDance 不是 arXiv 官方产品；中文卡片由大模型生成，请以原文为准。