Paper prototyping in Figma

We learned about paper prototyping in Designing Interactive Systems class. According to our professor paper prototypes are rough paper & pencil sketches of interface or central UI dialogs. They have the advantage of being not detailed, so designer and user can focus on important high-level UI design.

Which is great on paper, pun intended, but they also have some disadvantages. Some of these disadvantages were listed in class:

• Dialog sequences are hard to convey unless you drive it yourself
• Drawing many screens is a lot of work

But to me the main disadvantage of paper prototypes are simply how inflexible they are. I like to go through a lot of iterations in my design process but paper prototyping simply doesn't allow this. So what do you do when you are tasked with creating a paper prototype in class?

We do it in Figma!

First we need a font, Google's Patrick Hand is an interesting one. It is very readible and easy on the eyes but it feels too perfect. I needed something that would represent handwriting of a computer science student's not an art student's. That's when I found Gloria Hallelujah which is perfect for that messy handwriting look.

Next, I need some design components. The main interaction that I was tasked to design had around 15 pages and I wasn't going to design/find unique handdrawn elements for each page. Most of my icons came from the Hand-drawn Icon Set Anarkey by Anima. Last, I need some hand-drawn boxes, these will be used in various components such as cards, input fields, buttons etc. You can find hand-drawn elements like boxes from some figma community files but I wanted to create this boxes myself.

I quickly noticed making them too distinctive ends up being distracting so I decided to make three slightly altered versions of a perfect box and then I multiplied each one of them by flipping them horizontally and vertically. This way, the shapes are similar enough to not end up being distracting but distinct enough to avoid looking too perfect.

A little bit of prototyping and voila! The prototype is ready to test with users. We used the figma iOS app on an iPhone to conduct user testing. It perhaps didn't have the hands on feeling you might get from a real paper prototype but I believe it strikes a good balance in the fidelity spectrum; not too low to make a bad impression because "it looks ugly", not too high to accidentally confuse users with a final product.

Does this mean I will keep using it in future projects? I am not sure. Perhaps to test out a complex interface idea in a simpler way but I don't think it's necessary in most projects where the task is combining well established elements together.

If you want to give low fidelity (paper-like) prototyping in Figma a shot, I suggest start by taking a look at the Paper Wireframe Kit from the talented folk at Method.