The right prototyping tool for you
The short answer, and the long short answer.
“What is the best prototyping tool out there?”
This is a common question I get from designers seeking to expand their interaction design skills.
My short answer is this piece of advice I wrote one time, and that I copy and paste ever since:
If you need to quickly setup flows, you’re OK with basic state transitions, and basic scroll interactions: Use Figma.
If you need advanced touch gestures like pinch and rotate, drag and drop, a motion timeline, conditional logic, access to the device camera, and cross-platform: Use ProtoPie.
ProtoPie is quite expensive, if you want a similar feature offering, but for free: Use Origami (however, it’s iOS only).
Alternative: Making a real website.
If you need to make a real website then that’s a bit different than creating prototypes. For this specific need: Use Framer.
The long short answer: Using the right tool for the job.
Prototyping is primarily about exploring and communicating ideas. Tools are secondary.
A better question would be: “Which tool better fits me and the scenario I’m working on?”
In most cases you don’t even need to build a demo that feels exactly like the real thing. Because of this, Figma is usually the right answer for most people and most projects.
Choosing a tool not only depends on the project you’re working on, but also on your background, your mental model, and whether you have the budget for the tool.
Figma, ProtoPie, and Origami are all very different from each other.
Figma is a design tool first; people who’ve used Sketch or Adobe XD will feel at home. And it has an accessible price.
ProtoPie is like a mix between Figma and (a very simplified) After Effects: you can design with ease, you can create conditionals and variables, and you have a timeline to make working with motion a breeze. But it’s the most expensive tool on this list. The free version is quite restrictive to be used on a real project.
Origami is a prototyping tool first, and it uses patches and noodles to build things. It’s very different. For some people things just click with them on Origami, but many others struggle to adapt their mind to this model. It is entirely free though, you don’t even have to create an account to use it.
Let’s see some real scenarios:
Scenario 1
Let’s say Kim is a design student and wants to create a fun Camera app aimed at young users in the U.S. She doesn’t have any budget, so she’s looking at tools that can access the phone’s camera and that are free. She’s OK with the prototype being available on iOS only. She goes with Origami.
Scenario 2
Now let’s see Raul, a designer working on a ride-sharing app that is available across the world. He’s working on a feature that will go through user research in Brazil, most of the participants have Android devices, others have iOS. With the approval of his manager, he expenses the Pro version of ProtoPie.
Scenario 3
Simone is the only senior designer participating in a sprint with Engineers and Product Managers. There are five “top-voted” ideas that need to be visualized. Not all of them seem to be really feasible though, so Simone’s decides to invest her effort on creating quick click-through prototypes of all five ideas to facilitate discussions. She goes with Figma.
For each of these three scenarios, asking “what’s the best prototyping tool out there?” would’ve been the wrong question to ask. Your personal context and the problem that needs to be solved are the factors to consider when choosing a tool.
The design prototyping world is in an exciting phase right now with new and promising options coming up. I plan to share more about them as they gain traction and build their communities, but for now, you can’t go wrong with Figma, ProtoPie, or Origami. Ideally learning all three and using them depending on the situation you’re at.