How to create sketch-like wireframe components in Figma

wireframe

There are SO many different design tools to choose from these days that it can be overwhelming and like many other design teams, we’ve had to make choices. We recently made the decision to switch over from using Sketch and InVision to Figma in an effort to consolidate some of the tools we use and help standardize how and when we use them. In this effort, I realized that we had tools to create low fidelity wireframes and high fidelity designs / prototypes but not mid-fidelity prototypes. In the past, I would use Balsamiq to create the wireframes, export the screens from there and then import the JPGs into InVision to create clickable prototypes, however, no one else on the team used Balsamiq and had come up with their own solutions on how to create this level of fidelity (the struggles of a growing design team are real!) So I thought, why not utilize Figma to accomplish this? By using Figma, it would meet the goal of consolidating our design toolkit and also aid new designers who join the team to not have to make decisions on how they would get this type of work done.

Up to this point, we had our high-fidelity components already in Figma so we could also have components for mid-fidelity prototypes. I started my research by looking for existing Figma UI kits but quickly realized that a lot of the components we have are uniquely ours and we’d just be better off creating them ourselves. Here’s how we’re doing that (you know, the reason this article is a thing! 🤓):

Plugins you’ll need:
• Wirebox
• Rough

1) Select a Frame that has one or more high-fidelity components and use Wirebox to create a wireframe version

Go to Plugins and click on “Wirebox” and that will create a new frame with the wireframe version of the component.

2) Make adjustments to the new component

Making the stroke a little thicker (3pt) and using a font like Nunito helps it feel more wireframe-y, IMO.

3) Select the stroke and use Rough to create a hand-drawn look 

What’s great about this plugin is you could apply the same parameters but never get the same result which lends itself to creating that imperfect, sketch-like feel.

🎉 And ta-da! You’ve got an awesome new wireframe component!  🎉

And with the help of Figma, you can then use Team Library to share your shiny new component across files and projects (here’s how to create reusable components in Figma). Creating these components will help our Design Squad create mid-fidelity prototypes a lot faster with our own components that are a part of our component library already. I’m a big fan of giving digitally-created elements feel more like they were done by trusty ol’ pencil to paper so I find this technique merges those two worlds while being extremely useful to our design process.

Happy wireframing! ✏️