Use cases
One of the biggest challenges with adopting a new technology is understanding how it helps and where it fits. You know it’s big, you can feel it, but you don’t always know how to start, or worse, you’re asked to use yet another tool.
But what if you could skip that barrier? What if it’s already inside the tool you love? With Figma Make, that’s exactly the case. Now it’s just a matter of exploring and seeing what it can do.
For ideation
In the initial stage, we have a Product Requirements Document (PRD) or at least an idea. We already know, either in detail or broadly, what content and architecture the app will have. At this point, we would start researching similar solutions from competitors and references to get inspired, and eventually move into design. We don’t have to skip this process; however, with AI assistance, we can go from text to an initial functional design that generates hundreds of ideas and provides direction. At this stage, we’re not looking for a high-fidelity UI. Instead, we’re looking for structure, custom UI components, layout ideas, user flows, capabilities, micro-interactions…
You can use ChatGPT to help you with the PRD. From there, Figma Make can generate a solution from scratch. The more detailed the PRD, the more accurate the output. The outcome will be a functional prototype that provides inspiration, a foundation to iterate on, or simply ideas you can bring into your own designs in Figma.
Let’s break down my workflow
1. Ask Chat GPT to create a PRD if you don’t have any: At this point you want a detailed PRD that will serve as both the base for create the Figma Make prompt and the foundations of your app. Just describe your app, if you have already made some decisions, tell it, if not, it’ll make them for you. What to expect from Chat GPT? A document with an overview of the app, Target Audience, Core features, Navigation and structure, Data and Interactions, Techincal requirements and Success metrics.
2. Turn the PRD into a Figma prompt: Figma Make doesn’t need to know the Success Metrics for instance, so ask Chat GPT to make Text-to-front-end-ai version of the PRD for Figma Make.
3. Result: As a result, I can already use this first draft, by using it you can tell quickly what works and what not, what you can stole and adapt, or even giving it to someone and observe initial reactions to the idea.
The following images are screenshots of the first coded app made by Figma Make following the process.
For iteration
From a hi-fidelity Figma design to a functional pixel perfect prototype.
At this point, we have a design in Figma and want to bring it to life to see how it performs. Getting a final design right on the first try is impossible. There are always variables, conditions, and edge cases you can’t account for in static design. With a functional prototype, you can experience your design as users would, stress-test it quickly, and find the details and flows that truly make the difference.
You can iterate directly in Figma Make or have it code your existing design. That’s when your work comes to life, letting you refine it at light speed. For mobile apps, you can even ask Figma Make to build a Progressive Web App (PWA) installable on both Android and iOS. Now you can iterate on top of a real implementation: make changes, publish, and try again until it feels smooth and delightful.
Let’s break down my workflow
- Decide how far you want to go with this first prototype. Decide how far you want to go with this first prototype. Just the homepage? All the pages? How many flows? I recommend going one page at a time while defining the architecture upfront so the initial file structure is already solid. In our case, I want to create the homescreen.
- Paste a frame with the design in it. Paste a frame with the design in it. You can paste up to three frames in a Figma Make prompt.
3. Prepare the prompt for Figma Make accordignly. Besides key features or specific UI components, tell Figma Make what the expected outcome is. In this case, the expected outcome is a functional version of the homescreen that matches the attached frame, using the UI components and text styles from the library.
4. Add a library for Figma Make to pull the UI components and styles from. To do so, publish your library to Figma Make: go to Publish as usual, choose Export to Figma Make, and once published, you’ll see your library available to add to any of your Figma Make projects.
5. Result. The outcome is impressive. It matches the provided design perfectly. From here, you can continue adding functionality. It has already coded all the UI components and styles from your library, so even if you ask for something new, it will use them.
From a technical perspective, for mobile apps, Figma Make defaults to React + Tailwind CSS v4 + ShadCN as a UI kit. If you import your own library, it adapts ShadCN to match it. You can also specify another UI kit or design system, like Material Design 3. Beyond mobile, it can build desktop web apps, handle 3D graphics, manage animations, and more, anything you can code.
Sharing
Prototypes help secure stakeholder buy-in, support user testing, and streamline developer handoff by clearly showing how a design will look and function.
Now, design teams have more power than ever on this step. No need to depend on developers to build functional prototypes, nor waste hours creating click-through versions that miss key flows, don’t support basics such as input texts or where you have to fake for instance, native functions such as opening a phone camera.
User testing , an entire industry on its own , traditionally required either static prototypes or live sites. But designers often don’t have a live URL that early. With Figma Make, you do. You can test earlier in the process, adjust quickly, and validate with real users before investing heavily.
Imagine you have an onboarding flow with a sign-up process and a welcome survey to collect data. Your goal is to increase the completion rate. Normally, this would be difficult to test with traditional click-through prototypes, since they don’t handle real inputs, checkboxes, conditionals, or error messages. Re-creating all of that would take forever — and for text inputs, it’s practically impossible.
With Figma Make (and similar tools), you don’t have those limitations. In just a few hours, you can generate both your current design and a new variation, each as a functional prototype with its own link, ready to test with real users.