Figma Make: the biggest shift in UX/UI since Sketch

AI for product design is not only here to stay, it’s redefining how digital products are designed and developed. After more than 4,000 iterations in Figma Make since its launch in May 2025, I’ve come to realize how important this tool will be in the near future for the industry, and how key it will become for both current and future product designers.

Back in 2010, when Sketch was launched, designers relied on Adobe Illustrator and Photoshop, two tools never meant for product design, but with just enough features to give some control over the process. It is fascinating to see how Josh Ulm, Adobe’s Senior Director of Experience Design was adressing this very topic back in 2016. You can read the full article here.

“If you started designing for the Web more than a couple of years ago you most likely used Photoshop. It’s different now. You’ve got Sketch and Photoshop. And on the prototyping side, it’s the wild west.”

Josh Ulm, Adobe’s Senior Director of Experience Design (2016)

Sketch changed that provided the foundations of how a dedicated UX/UI tool should look like. Its design was so strong that later competitors, and today’s leaders, still follow the same layouts and structure.

Alongside Sketch, designers used Zeplin (2015) for prototyping. Zeplin was one of the first tools to actually put a prototype in designers’ hands. As Josh Ulm was saying in the article, back in 2016 “…the prototyping side, it’s the wild west…”

But Zeplin made a real impact, even though those were only click-through prototypes, they opened a door that had long been closed. For the first time, designers could try their work on a real device and get a glimpse of how usable it was and how it might look. Before that, this required a functional prototype — something few teams invested in since it meant doing the work twice.

That was a magic moment. And today, we’re living the next one. Ten years later, designers now have front-end coding superpowers. They can design, code, test, and iterate, the entire workflow within a single tool. In my opinion, that’s why Figma Make is the smartest move Figma has ever made.

The right time, the right way

Figma Make launched in May 2025 and remained in beta until the end of July. It’s not the only product design tool with AI-driven front-end capabilities. We also have v0 by Vercel, Bolt by StackBlitz or Lovable for front-end design and coding, and Stitch by Google for UI design only. Each has strengths and weaknesses, and they’ll likely converge on similar capabilities.

What makes Figma Make unique is its position. Designers are already working in Figma, so the entry barrier has dropped to the floor. AI-powered front-end coding is no longer optional — it’s becoming a must in product design.

Being the best doesn’t always mean winning, being first often does, as long as you keep up with market demands. Even if some competitors arrived before Figma Make, it’s the one with the designers already “at home.” That’s why it will likely be the first for many, in my opinion, the first to make a mainstream impact. With this launch, Figma gave designers the most-wanted superpower: it removed friction in the handoff process and closed the gap between design and implementation. It gave designers the power of making.

Now, designers can use their design systems to create actual PWAs that behave like native apps, ideate from scratch, and get inspiration that would otherwise take hours of research. Best of all, they can share their work with the world in a single click.

Let’s dive into some use cases.

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

1. 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.
2. 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.

See it by yourself

I invite you to explore hundreds of Figma Make creations on the Figma Community page, from 3D games and mobile apps to desktop dashboards, CSS animations, and beyond. See what’s possible and get inspired!

New industry standards

Figma is no longer just a design tool, it’s becoming a design-to-production platform. The fact that Figma went public right after launching this new suite of products makes perfect sense in this light. Their strategy is clear: to evolve into an all-in-one tool for product teams, design, development, and even marketing. This shift impacts not just Figma future, but the entire industry.

Figma Make has turned AI in product design into a must-have skill. Soon, if not already, product designers will be expected to excel at Figma Make or similar tools. Speed and quality have both risen dramatically, at the same time.

What remains to be seen is how developers feel about this shift. In my current projects, developers seem happy to let Figma Make handle the front-end, but it’s still unclear whether they’ll fully embrace it or push back. That said, Figma has already achieved something remarkable: it brought developers into a design tool. Collaboration features and Dev Mode convinced them to join design files, something that had been a huge challenge for years. That alone makes me trust Figma’s strategy to integrate developers into designers’ workflows as the crucial partners they are.

Please don’t hesitate to comment and share your thoughts. This is a new domain we’re all learning together. I’d love to hear your perspective and have a constructive discussion we can all learn from.

Thanks for reading.

Figma Make: the biggest shift in UX/UI since Sketch was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

This post first appeared on Read More