Introduction
AI design tools are a relatively new approach to creating UIs based on prompts or visual references, such as screenshots. Figma Make stands out from a product design standpoint due to its integration with native Figma design files. In other tools, like Lovable or Claude, you typically use images or code translated via plugins to make them compatible with other platforms. ChatGPT can also be an ally during the ideation phase of a project — in this PoC, it was used to suggest requirements based on the problem and to help craft a solid prompt for Figma Make.
Despite being more integrated with native Figma designs, Figma Make has its limitations. In this project, I used it to demonstrate how to quickly generate a proof-of-concept prototype, similar to those created manually in Figma.
Problem formulation
There is a gap in the current supply chain solution regarding communication between distributors and retailers. Based on this challenge, the following requirements were prompted to ChatGPT:
1. Monitor in near real time whether shelves are stocked.
2. Verify that field representatives visited stores and completed restocking.
3. Identify risks of stockouts before they impact sales.
4. Communicate or trigger actions (alerts, tasks, messages) when issues are found.
ChatGPT then began generating approaches to solve this problem, assembling a description for a dashboard. After a quick review — adding a few features and removing some suggestions — we finalized a prompt to generate a UI in Figma Make.
The prototype generation
To better integrate the UI with the company’s other products, Figma Make was used with an approach that combined a text prompt and an existing Figma design file containing elements of the design system. This provided the AI with a solid visual and structural reference for the prototype.
Text Prompt and the UI reference
First version of the Shelf Execution dashboard
Prototype tweaks
Like other generative AI tools, Figma Make doesn’t get everything right on the first try. Fortunately, once you spot the issues, most of them are easy to fix. Some of these adjustments are due to misinterpretations by the AI model, while others are minor tweaks to the initial concept.
The first example is the rounded-corner property of the panel, which the AI model increased, even though it was clearly set to 4px in the Figma design reference.
Round corner adjust
The big number titles were generated in regular weight, and to adjust them to bold, no prompt was required. Figma Make provides a contextual menu that allows direct changes to certain properties, such as font, color, and corner radius. It also automatically identifies the component style change, updating all big number <h3> elements simultaneously:
Big number title font adjust
Another example of a small tweak made easy thanks to the low-code tool is in the tabs of the “Details” view. With a simple prompt, I removed the left, top, and right borders from the selected tab to better match the company’s design system style.
Selected tab border removal
Final dashboard
After two or three additional small tweaks — such as adjusting panel heights, adding an extra filter, and including a sample map image — we obtained something very close to a traditional, manually built Figma prototype.
In this case, only one PoC option is shown, but with a few more hours of work, it would be possible to generate additional variations or enhance this one with more features and refinements.
Below is a screenshot of the final dashboard, and by clicking here, you can view it live.
Final PoC prototype
Conclusion
Figma Make proved to be a much more “obedient” AI design tool than Lovable, for instance. The model (based on the same technology used by Claude) interprets prompts far better, and the ability to make small adjustments — such as changing font weight directly from the contextual menu — is very useful. (It would be great if Figma expanded these direct editing capabilities to accommodate even more UI adjustments.)
However, it’s important to highlight the limitations of this approach. Figma Make is an excellent tool for quickly generating tangible UIs, but it’s still far from producing a reliable, final product. It serves as great fuel for a growth-minded company, enabling simple proof-of-concept mockups that can later be properly developed and deployed.
Despite being prompt-based and easy to use, it’s essential to have an experienced product designer guiding the process — conducting proper research and closely following user tests.
