CoGen: Creation of Reusable UI Components in Figma via Textual Commands

TL;DR

CoGen tackles the challenge of automating reusable UI component creation for design systems by generating Figma-ready components from textual prompts and structured JSON. It introduces a two-stage pipeline: extract UI data to build simple and nested JSON, then generate prompts from JSON and JSON from prompts using Seq2Seq and a fine-tuned T5 model. The results show the T5-based prompt generator achieving about 98% component-name accuracy with BLEU around 0.27, while JSON generation favors simple T5 for simple JSON and cross-attention T5 with BERT for nested JSON. This approach advances editable, component-level design automation and enables more scalable UI design workflows within Figma.

Abstract

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.

Figures (6)

• Figure 1: Atomic design system
• Figure 2: Architecture Diagram
• Figure 3: Excerpt of JSON data from Figma
• Figure 4: Sample JSON for T5
• Figure 5: Sample prompts generated by T5