Prototyping with Figma

Prototyping is the fun part, where you can bring your previous ideas to life. Well, sort of “to life” because you will not program a whole application.

The beauty of prototyping is that you only need a realistic facade. This makes it a fast process, allowing you to quickly implement new features and test your concept with potential clients and stakeholders. Why must it look realistic, you might ask. The general idea is that people will give you honest feedback and react honestly to your product. If they see it is just a sketch, they will answer more leniently and might hesitate with feedback (Knapp et al. 2016). Honest feedback helps you in turn to figure out whether you’re on the right track with your current iteration of the product or not.

Also, it won’t hurt much to change a prototype, which only took you a couple of hours to create, making it easier to accept criticism (Knapp et al., 2016).

How do you approach Prototyping?

Jake Knapp, the inventor of Design Sprints, has four principles for prototyping, which we’ll focus on in this course as well:

1. You can build anything

2. Prototypes are disposable

3. Build only essential features

4. The Prototype must look real

We won’t go much into detail about these principles, because we believe them to be quite self-explanatory. But we do want to give you a few hints on how to start your prototyping journey!

Before you start prototyping, don’t jump right into it, but first, write down your key features and sketch them. The best thing to do is to create a storyboard for your app, where you lay out the most important screens of your app. Then you think about a progression, a user might do, when navigating your app. This storyboard will function as a guideline later, when actually prototyping. Feel free to take a look at Google’s Design Sprint Toolkit to get a better idea of a storyboard.

Now on to the actual prototyping. There are different ways to create a prototype of your product. Since we are working on a digital solution in the form of an app or website, we’ll focus on creating a click-through-dummy prototype.

One of the best tools for click-through dummies is called Figma. It allows you to design and create complex User Interfaces for different screen sizes. It has many features, as you can see from their documentation. Please take a look at it, it’s worth it! What is nice about Figma: It is free to use - all you need is a free account.

We won’t talk you through creating a prototype, because it’s a pain to write down and a pain for you to read. It’s easier to watch this YouTube Tutorial to get a feeling for Figma. Optionally, you can take a look at the Figma YouTube Channel, which also has interesting tutorials.

While Figma has lots of features and you can design virtually anything from scratch, you don’t have to. If you’re not a designer you can have a look at Figma’s community. There you can find designs from other Figma users, which you can easily include in your own designs. You can find Phone Mockups, UI Kits an much more. Feel free to look around there and see what suits your idea best.

Once you have your designs ready, all there is left to do is create the interactions. For that, you can use Figma’s prototype tab on the right-hand side. Here’s a quick video on how to add interactions to your prototype: https://www.youtube.com/watch?v=-sAAa-CCOcg

When you’re done with prototyping it’s time to make a test run and see how your app feels and if all important features are “working”.