There are 2 types of prototypes…

There are really only two kinds of prototypes at the end of the day...

And I'm not sure I looked at it this way until the person who designed Figma's prototyping features explained it to me last week.

But it makes a lot of sense...

And it impacts how you build them 👇

Type 1 — Single-path prototypes

In single-path prototypes you know the specific story you're trying to tell.

Maybe you're pitching an idea at CRIT or creating a quick Loom to demonstrate an interaction for an engineer.

The point is you know exactly where to click and you're 100% in control.

In a way, these are almost closer to presentations than prototypes.

That means the only thing that really matters is how quickly you can build the right prototype to communicate your story.

For some people that might involve using advanced features like interactive components and variables. For others, that might look like duplicating screens left and right 😇

"Nobody needs to know how your prototype is built"
— Niko Klein (designer, Figma)

Single-path prototypes should be as simple as possible—just enough to visually convey your idea 👀

Here's where it starts to get a bit more interesting 👇

Type 2 — Multi-path prototypes

This is where you are not in control.

Maybe you're running a live user test or dropping an interactive prototype into Slack to get feedback before dedicating engineering resources...

Multi-path prototypes need to be more realistic because this is what surfaces the best possible feedback.

"You need to find a way to keep up the 4th wall and make people feel like this is a real product"
​— Niko Klein (designer, Figma)

Inevitably these types of prototypes will require more complexity because you might not know which path the user is going to pick (or where they'll get stuck).

So you have to account for more states and more screens.

This is where variables are so powerful.

Because most of the time pasta pictures like the one below are the result of many small changes across screens. And that's where variables shine 💪

"But Ridd I'm really fast without variables"

I believe you!

But with multi-path prototypes the most important thing isn't how quickly you can assemble them in the first place...

It's how quickly you can iterate on them 💡

Because now that the vast majority of teams are prototyping directly in Figma... there's no excuse to consider prototyping an optional step at the end of our design process.

We should be prototyping and iterating throughout a project's lifecycle.

And each new frame you create is another knob you have to turn to make changes once you get feedback.

It's easy to see how variables unlock more powerful prototypes with logic.

But now I view them as the key to efficient iteration as well.

And iteration leads to quality 💯

The prototyping masterclass

This week's Deep Dive is a special one because we get to go behind the scenes with the prototyping team at Figma 🙌

​Niko and Garrett discuss:

• Everything that led up to the advanced prototyping release

• How Niko collaborates with engineering

• How they balanced power and simplicity while designing the expression builder

• When it makes sense to prototype with variables

• The traits of the best prototyping cultures

• Strategies for fidelity levels

• The future of prototyping in Figma

Listen on YouTube, Spotify, iTunes, or wherever you get your podcasts 👇