Wireframe Kit

We wireframe. A lot. For every project.

Arguably, but very likely, wireframes are the cornerstone of every project. We do them every single time – more than just structure a product, wireframes help define it and support usability tests. They are meant for multiple and rapid changes. No visual concerns. You get the gist of it.

To a certain degree, they are repetitive, boring even: same style-less buttons, same agnostic inputs, same empty-squared images, same meaningless icons.

At the same time, there's no consistency in wireframes across varied projects. Each Designer does them differently: some stick to pure style-free stuff, others not so much.

Is uniformity needed? Hell, no! But we are too damn pernickety about consistency to just let this slide.

Also: it saves time. Reusable stuff always saves time. Period.

So we created a Wireframe kit. A swiss army knife. Swiss, because it is absolutely agnostic. Army knife, because of multi-components. Whatever you need ... Ta-da! Brilliant analogy, to say the least.

The Kit.

The Kit is a library of components which are very often, if not always, used when wireframing.

We're talking buttons, inputs, fly-outs, toggles, tabs, alerts, tooltips, pagination, calendar, and yet more. And icons! Tons of icons.

The Kit is available in the Figma community.

If you've lived in a cave and kept off Figma for the past couple of years (or so) and wonder: "How the hell do I use it?" here's a not-so-tutorial tutorial for you.

First, once you open the link above, you should be presented with a Duplicate button. Click that button. You've just duplicated the Kit to your Drafts.

Second, go to your Drafts, look for the Kit and open it. Go to the Figma menu at the top left-hand corner, and navigate to Libraries using the appropriate "Libraries" link.

Somewhere there, likely at the top, the Kit should be waiting for you with a "Publish" button looking at you. Press it hard.

Congratulations! You can now use this magnificent army knife at your own will.

To actually put the Kit in action, go to any file you desire to use it in. Go to the Figma menu at the top left-hand corner, and navigate to Libraries using the appropriate "Libraries" link.

The Kit should be lurking somewhere at the top, but not as at the top as it used to be, next to a turned-off toggle. Toggle the toggle on.

Now, if you go to "Assets", the Kit should be lying there for you to take advantage of.

You are done!