Figma Plugin Uses AI to Generate Interactive GUI Prototypes from Text Descriptions

Designing user interfaces remains a labor-intensive process requiring specialized skills. Researchers have developed AI Prototyper, a Figma plugin that streamlines this work by converting natural-language descriptions into fully functional, editable GUI mockups.

How it Works#

The tool operates through a three-step pipeline. First, it takes a text prompt—such as "create a login page" or "design a product card"—and breaks it down into distinct visual components using Gemini 2.5 Flash as its language model backbone. Next, it retrieves matching UI elements from a custom library of 32 design primitives and assembles them into a coherent layout with automatic spacing and alignment. Finally, the assembled components appear as editable Figma layers, letting designers refine the output before finalizing.

A distinctive feature is the human-in-the-loop step built into the workflow. Rather than generating prototypes sight-unseen, users can review and modify the AI's feature breakdown before rendering begins—adding flexibility that most automated tools lack.

Multilingual Support and Technical Stack#

Unlike earlier decomposition-driven design tools, AI Prototyper runs on a different technology foundation and supports input in multiple languages. The system correctly generates labeled interfaces in Thai, English, and Mandarin Chinese, expanding its utility across diverse design teams and markets.

Performance and Quality#

Early testing showed measurable gains in productivity. Participants using the plugin completed more prototypes within the same timeframe compared to those working manually. Expert reviewers also scored the AI-generated designs favorably across nine different quality metrics, suggesting the output meets professional standards.

The source code and component library are publicly available, supporting further development and customization by the design and research community.