Introducing Wirez Kit: Wireframe Component Library for Slack
A wireframe component library that aims to make designing and exploring Slack workflows easy.
Designing Slack apps can be an equally great and daunting experience. The free form, natural feel of chat, along with Block Kit, Slack’s built-in UI framework, allow you to create simple yet robust user workflows. Knowing how to combine these two, very different beasts, into a single, coherent unit is not at all that self-evident, though. Before you end up with that new, snappy Slack app, what do you do?
I’ve been wrestling with this question for a while. As in any design process, exploring and iterating on different paths and scenarios is key. But mixing plain text messages with Block Kit while trying out different ideas and approaches, is an unforgiving, tedious undertaking. Gathering feedback from colleagues and customers, starting with the general flow all the way to the wording of each individual message, can be cumbersome too.
After trying every possible solution under the Sun, from dedicated bot mockup apps to writing up conversation trees in Markdown on GitHub, I finally thought of Figma. I realized I could set up a custom components library to match Slack’s UI, and use Auto Layout to easily add, remove and edit any part of the interaction. Meanwhile, Figma’s collaboration tools, a.k.a. multiplayer editing, would be perfect for gathering feedback.
That’s how Wirez Kit was born: a wireframe component library that aims to make designing and exploring Slack workflows easy. It includes nearly all Block Kit components (more coming soon), as well as a Slack desktop app template configured with Auto Layout. You can drag and drop sections with messages, buttons, checkboxes or images, then edit and re-order everything at will. All in the unmistakably disposable, brutalist fashion.
While Wirez Kit is just another tool, with its own strengths and weaknesses, it has saved me already a great deal of time and effort. I’m no longer “wrestling” with the question of how to explore ideas for new features or workflows. I am no longer hesitating to approach a design problem from a different angle. And getting feedback is a breeze. It’s safe to say I’m making more considered and informed design decisions as a result.
You can find Wirez Kit on the Figma community, along with additional documentation posted on GitHub. Have a go at it, I hope it helps you too.
