HOT OFF THE PRESS: Adobe just acquired Figma for $20B (USD)!
Building successful products is hard.
Whether you’re a startup founder looking for product market fit, a product designer working on a new version of your product or a UX designer exploring concepts, you inevitably have to get your ideas through a design-build-test process. Testing may reveal gaps and defects or missed opportunities that require another iteration of design-built-test. If this iteration process is ineffective, slow or expensive, your product may suffer or worse still, never see the light of day.
Prototyping is a way to bridge the gap between ideas and a fully built product during these iterative cycles. This article explores how better prototyping leads to better products.
Why prototype?
Your goal may be finding Product Market Fit (PMF), developing a Minimum Lovable Product (MLP), validating your business model or target market, determining audience behaviour or simply testing out a user interface flow. In each case, getting a prototype into the hands of your audience allows you to test your ideas and assumptions before you go through the lengthy (and costly) build and deployment process.
You can then utilise what you learn to improve your product, and repeat this design-test process on your journey to your goals. This iterative design and development cycle is core to modern product development methodologies such as Design Thinking, which emphasises empathy for the people you're designing for (users), rapid prototyping, and iterative design as ways to create a better user experience.
(Run) as many small tests as you can afford. Jakob Neilsen (Usability guru, Nielsen Norman Group)
Prototyping in Figma
If you're a product designer or UX designer chances are you've used or at least heard of Figma. It's become one of the most popular design tools in recent years, and for good reason—it's versatile, easy to use, and collaborative.
Figma's collaborative capabilities make it a perfect fit for Design Thinking and similar methodologies, creating those all important feedback loops. Its prototyping features make it easy to create both low- and high-fidelity prototypes, and get something in the hands of your audience quickly.
One glaring limitation of Figma prototypes, however, is that they are limited to simple click-through ‘smoke and mirrors’ renditions of your product or interface. They provide a ‘pretend’ approximation of interface behaviours, interactions and product functionality - even standard interface behaviours involving user selections (eg dropdown lists, or shopping cart tallies) and their resulting effects can be difficult to model or simulate in a ‘clickable prototype’ only.
Tom, the founder of social real estate startup Abodely, put it succinctly when I met with him recently:
“Clickable prototypes don’t cut it - you can’t get real feedback. You have to get a real working product in the hands of users. The challenge is how do you do that fast and at a low cost?” Tom Coe, Abodely
Taking it to the next level - real, working prototypes
Getting a real, ‘working prototype’ into the hands of users has some critical benefits:
Identify glaring holes in your product or your assumptions: A working prototype allows you to quickly validate if you are solving a real problem.
Get granular with the details quickly, and plan ahead: You’ll never get everything 100% right the first time, but seeing users transact or interact with real data allows you to identify and prioritise problem areas to tweak in the next iteration. Being able to ‘fail fast’ early can save large chunks of budget and time being wasted.
Provide (and get) real-world context: No more reading between the lines. Seeing your audience trying your solution for real lets you see its strengths and weaknesses you may never find using simple ‘smoke and mirrors’ testing.
As one colleague, a lead UX designer at a major airline, said to me:
"Designing an application to be used while travelling, it's critical to get real users to try it out while travelling... not (just) imagining they're travelling, and missing real critical feedback."
It’s important to note that a ‘working prototype’ doesn’t necessarily imply that it’s a high-fidelity prototype (meaning that the interface design is highly polished and close to final) nor that it needs to be the entire product. Early iterations may be low-fidelity with only rough aesthetic refinement, or you may wish to test only a specific subset of the functionality or user experience.
Importantly, a working prototype means your users can achieve their goals ‘for real life’ (to quote Bluey), and you get critical real-world feedback early on in your product development process.
Working prototypes from Figma
Figma’s collaborative capabilities, meteoric rise in popularity and suitability to iterative product development methodologies mean you or your team are likely already using it. How can you take advantage of Figma’s benefits, and still incorporate working prototypes into your process?
There are a number of options:
Interaction prototyping tools: There are several tools that may allow you to extend a normal ‘smoke and mirrors’ clickable prototype, such as Protopie and Axure. These will get you to another level of ‘interaction’ prototyping, but still fall short of a fully-functional prototype allowing users to ‘transact’, or create, edit, and manipulate real data.
Figma to Code: You could actually build your prototype using traditional development tools. Figma includes some design-to-code capabilities out of the box, and there are numerous Figma plugins and add ons that can kickstart or streamline a traditional design-to-development workflow. However, developing working code by hand is going to be a lengthy and costly process, which can have a flow-on effect of reducing your ability to iterate and improve your product. Once you’ve begun the code development process, you’ve also broken your link to any design iterations or collaboration that may continue in Figma - which is why you came to Figma in the first place!
Figma to No Code: Use a ‘Figma to No Code’ tool such as Buzzy to generate a working prototype directly from Figma. This gives you the best of both worlds - a working prototype developed quickly and cost effectively while allowing you to maintain the momentum and collaboration on your design iterations in Figma. Often a Figma designer can develop the prototype with no coding required - however, even if certain features or capabilities require some code integration, you’ve freed the developers up to focus purely on those elements.
Depending on the ‘Figma to No Code’ tool you plan on using, there may still be some ‘gotchas’ to consider:
Does it easily allow you to keep working in Figma or is it effectively a migration from Figma to that tool moving forward? In other words, can you quickly adjust your prototype as design changes and iterations continue to occur in Figma - or is it a case of beginning again with each iteration?
Does the tool support both mobile AND web platforms? You may require specific mobile-only features such as offline access to data, or native capabilities such as bluetooth integration or access to peripherals.
The fewer the number of moving parts you have, the faster and more numerous your iterations can be, which translates into an obvious advantage in building a better product. Being able to go from Figma straight to a working prototype is a game changer.
Conclusion
Building a successful product relies on iterative design, collaboration, testing and feedback processes; user-testing with prototypes is a critical part of this. With its versatility, ease of use and collaborative features, Figma is (rightly) the number one interface design tool in the world right now.
Having a cost-effective way to get your Figma design into the hands of users as a real working prototype means you get the benefits of critical, real-world feedback, can accurately test your assumptions and effectively plan your development cycles. All of which means you’re building a better product. Figma to No Code is a game changer!
About Adam & Buzzy
Adam is the founder of Buzzy, a no code platform that lets designers create working mobile apps and websites straight from Figma. With the Buzzy Figma plugin, you can markup and publish your designs as real, functioning products - and you can do it again and again, without leaving Figma.