Figma Paper Wireframe Kit: Embrace the Power of Low-Fi

As designers and problem solvers in the digital space, one of the most critical aspects of our work is to communicate our ideas effectively across the vast expanse of the internet. 

With today’s digital design tools, it’s easier than ever to mock up high-fidelity screens without much planning or forethought. However, just because it’s easy to jump into high-fidelity doesn’t mean that’s necessarily the right choice. If you’re solving complex problems in the product or marketing space (as we often are), there’s an inherent power in taking a step back and starting with the basics (in this case, low-fi). 

Imagine you’re directing the next big Marvel film, and you’ve just received the final script. Would you start shooting the next day? Most likely not, since there’s no solid blueprint or plan to work from yet. 

One of the earliest steps in making a blockbuster a reality is storyboarding – no color, no cameras, just rough sketches to tell the story. This process allows teams to align on the vision and lays out a flexible plan without expending too many resources from the get-go. Therein lies the power of low-fi. 

In the digital design space, starting low-fi – truly low-fi – means using physical paper and making a paper prototype. Paper prototypes are drawn quickly with pen and paper and tested with real users. After deciding on your basic information architecture, you draw on screen-sized papers, creating a few different “flows.”  You put them in front of users, watching as they manually shuffle through your paper screens and give feedback, and you then take that feedback and use the insights you’ve gathered to move into higher fidelity concepts.

Yet paper prototyping exists as its most ideal form when it’s in-person. You might draw up concepts with a coworker in the office and meet with testers to validate your concepts while you observe them in the flesh. Let’s be honest, that’s not quite 2022’s most ideal or preferred way of working. 

So how can we bring the power of paper prototyping and the ability to align teams around a vision while still encouraging creativity to the screen? 

Enter the Paper Wireframe Kit. We recently worked on a mobile app for personal finance, which required that we get together as often as possible in a virtual room to design low-fidelity solutions and gather quick feedback. As we continued working together, we developed a digital solution that mimicked paper prototyping. Out of this necessity to feel closer while working at a distance, the Paper Wireframe Kit was born.

The Paper Wireframe Kit is an accessible, low-fidelity Figma template that allows designers and non-designers to feel empowered to generate product concepts. It levels the playing field, helping cross-functional teams collaborate and easily express their thoughts, often inspiring ideas that wouldn’t have even entered the field if high-fi was the first step.  

At the beginning of our collaboration on our project, we were putting elements like text boxes, shapes, and icons down on screens in a low-fi manner, but with different styles. One somewhat disarming font we used was called “Patrick Hand.” A handwritten font with a bit of a wink to it, Patrick Hand allows those who use it to feel playful, collaborative, and more free to experiment. 

We started making components that mimicked that handmade feel with the end goal of easily replicating our process. We used simple shapes with thick outlines and limited color to black, white, and gray. It was almost as if we were now using a dry-erase marker in Figma – and it felt like we were onto something pretty special.

As we started to use this “digital paper” process more, we saw its success amongst our project team and clients. Our low-fi style gave clients “permission” to contribute and collaborate, even though they didn’t see themselves as designers. That’s the beauty of it: everyone feels like they are contributing and a part of the design process, not just along for the ride. It’s simple: the more contributors early on, the more buy-in.

Instead of just keeping it to ourselves, we decided to package it and share it. We’ve put it up on the Figma Community page here so that anyone can gain access to it and understand its use.

 You can publish the file internally to make it a shared library or change it entirely to suit your needs. The kit contains a limited set of text styles, UI components, and simple phone frames to help get you started.

In our opinion, the best design tools are the ones that are shared, refreshed, and improved. So however you choose to use it, tell us!. We’d love to hear how other teams are embracing the power of low-fi to align teams, gather quick feedback, and encourage creativity.