Prototyping is one of the most critical steps in the design process, yet prototypes still confuse some designers and project teams.

A common misconception is that some designers refer to mockups as prototypes—which can confuse those who know otherwise! Prototypes are also not a series of sketches or a functional replica of the end-product.

Key takeaways:

A prototype is a representation of the end-product that is used in order to see if the product teams are building the right solution for their desired users.
There are several types of prototypes: a paper prototype that’s basically a sketch of a product, digital wireframe, functional prototype, and more.

Prototypes differ in terms of their fidelity to the final product. Low fidelity means prototype doesn’t include many details while high-fidelity prototype can be fully functional and behave like a real product.

There are a couple of ways of creating a prototype depending on the level of fidelity you want to achieve. You can start with a paper or build a prototype in code. Let’s discuss what that means.
Build a living example of your product with components that come from your design library stored in Git, Storybook or as an npm package. Simplify design handoff and make sure that teams are sharing a single source of truth between design and code.