From Text To Prototype With Figma’s New AI Tool 

As creators, developers or designers, creating interactive prototypes from static designs is a tedious grind. 

You usually use Figma to draw noodles between artboards or even write code to make buttons work- that’s a lot of work. Not to mention, on top of all the ‘wiring’, you have to deal with the time bound struggle of feedback loops and harsh deadlines. 

Traditional prototyping tools have you jump from one tab to another, scratching your head, looking for how-tos and step-by-step walkthroughs, while every website gives you a contrasting tutorial.  

Only if there were a way to skip all the grunt work, snap your fingers and go from idea to an interactive prototype instantly. 

Well, there is a way! There is a tool, to be precise. 

AI-Powered Prototyping  

Before we talk about the solution, we should take a look at some of the pain points. 

From designers to non-designers- anyone who dabbles has felt a strain of prototyping. We all want to look at a pretty interface but what happens behind the curtains is actually chaotic. 

Up until now, here’s what a manual prototyping process looked like: 

Step 1: Manually create every screen, create and draw boxes for buttons and icons. 

Step 2: Write all the texts manually and align all elements. 

Step 3: Use the prototype tool to drag blue noodles from one frame to another. 

And if you are a beginner, it will be a surprise if you don’t give up before you even test your product idea. 

But here’s another twist, prototyping’s prominent barrier isn’t creativity- it is complexity. 

Figma has now introduced a new AI design tool called Figma Make- a way to test, edit and prompt designs. 

Whether you are a UX designer building a mobile app, a product manager creating a web flow or a developer validating a concept- you simply have to input what you want and this tool builds everything for you!

In simpler terms, Figma Make lets you prompt your way to a fully-functional prototype. By leveraging this tool, you can save time connecting nodes and you can bid farewell to static designs and welcome operational web apps with AI. 

Figma Make: A Walkthrough 

Let’s assume that you need to build a basic music player UI, Winamp or a Spotify mini-player using prototyping. Now, let’s understand how it works:  

Step 1: Step Up Your Figma Make File 

• Open Figma and go to the ‘Create’ button and select ‘Make’. 

• Navigate to the chat panel for AI. 

• If you already have some frames for a music player, you can copy and paste them into this file. 

Step 2: Prompt the AI 

• Enter a clear description of your music player in the AI chat interface.

• For your mini player, you can use a prompt like “Create a mini music player UI. It should have an album art square, a play/pause button, a next/previous button and a volume slider. Use a modern flat design with rounded buttons.”

• If you have any reference images or frames, attach them with the prompt. 

Step 3: Preview and Refine Interactions

• Go to the ‘Preview’ banner to test your prototype. 

• Select the part of the design you want to continue refining and prompt AI to edit it. 

• For instance, if the play button is small and you want it bigger, instruct the AI, “Make the play button larger, animate the album art spinning when playing”. 

• The AI will update the changes. 

Figma Make also suggests certain changes for you to make. You can point to specific parts of the prototype to guide changes. 

Step 4: Attach Frames For Precision 

• Copy and paste frames into the chat box. 

• Use the Edit tool to highlight elements. 

• For instance, feed a prompt like, “Focus on the play button.” 

Step 5: Test And Share Your Prototype 

• Navigate to ‘Present’ to view the full prototype. 

• Share via the Share Prototype. 

Step 6: Iterate With Figma Make 

• Now, iterate using your version history. 

• Click ‘Restore’ this version to revert. 

Is Figma Make Worth It? 

In my opinion, Figma Make is a game-changer for beginners and it is a promising tool for the experts. 

If we look at the before vs after analysis, before Figma Make, wiring up a prototype was a daunting task- even for experts. But after its foundation, it’s all about chatting with an AI which we are all already quite familiar with. 

With its setup, you spend less time connecting noodles and more time designing. This tool truly brings AI prototyping and UI design automation into the hands of everyone.

But like every other tool, it should not be looked at as a magic wand. AI can make mistakes too, it may fail to get the details right and it could work in unpredictable ways. Complex logic may still need a manual workflow. 

Overall, Figma Make’s AI tool is democratizing prototyping. Doesn’t matter if you are a solo hobbyist or a huge team- you can try out some interactive designs in no time!