Storybook: Making design and development projects better, one team at a time
As a user-centered design and research consultancy, we use a few essential tools to work with clients and develop beautiful, performative designs. If you’ve been following us for any length of time, you probably know that we’re wild about Figma. But what about putting those designs into practice with a prototype or a new program or site? Enter: Storybook.
Storybook is an open-source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. …Storybook provides a sandbox to build UIs in isolation so you can develop hard-to-reach states and edge cases.
Source: Storybook
The key phrase is in the middle of the quote: Storybook streamlines development, testing, and documentation. Essentially, it makes it easy for developers to modularize full sites based on Figma (or other) designs so that all the collaborative benefits of Figma can continue through the development process. Gone are the days of things going dark for a few weeks in development, only for a file to resurface with glaring errors right before launch.
While transitioning to a new tool can be challenging, when you choose the right tool the rewards are worth it—for every member of the team.
Storybook benefits developers, who can build components rapidly in isolation with Hot Reloading and prototype hard-to-reach use cases that can be difficult to reproduce in an app. Storybook makes it easy for everyone to access and improve designs as they’re being developed and contribute their expertise during development—rather than a big scramble right before launch—from leadership to designers to QA folks to content strategists.
Here’s how.
Stakeholders and Key Leadership
If you’re old enough to remember the Bad Old Days when design handoff was five PSDs and a firm handshake, Storybook will feel like a revelation. When we work with clients in Storybook, your development folks receive all the HTML and compiled CSS they need, and can start copy-and-pasting HTML directly into the code.
This saves a ton of time and reduces the meetings, money, and creative resources your team needs to get going. They can dive right in.
Developers
Many developers love Storybook because it allows them to develop in isolation from complex business logic. Devs can focus on doing one thing at a time—component development and testing—developing and documenting all permutations of a component. This process is streamlined because Storybook removes complex edge cases so developers can focus on the components themselves. Rapid prototyping is easy in an environment like this, where Storybook connects a lot of the “pieces” together.
Designers
Many designers are used to sending their designs off, waiting for a whole sprint, and only seeing how their designs translated to reality on demo day. Storybook makes it easy for a developer, during a conversation with a designer, to say, “Something like this?” and share a link to the in-progress site. Designers can see how their plans translate to reality, and work with the developer to suggest changes (“Oh, that’s great, but can you round the corners on this module?”) that reduce demo-day drama.
QA
For QA folks, Storybook allows for visual regression testing that can solve the particularly hairy problem of the “before” and the “after” looking right at a casual glance. Usually, issues crop up much later when the pressure is mounting and someone discovers that all the footers have five pixels of extra space and an EVP has an issue.
Content Strategists
Storybook’s “Controls” add-on makes it easy to see how much text is too much right from the start. This reduces the back-and-forth of negotiating shorter copy blocks later in the process and minimizes handwringing between content and stakeholders who have already fallen in love with a specific way of saying something. Everyone knows right from the start how long is too long, and the content team can figure out a flexible truncation strategy before anyone gets too attached to anything.
Better teamwork means better products
At its core, Storybook streamlines development, testing, and documentation. No more quiet weeks while designs are built, and then big, ugly surprises on demo day. This efficiency allows for full insight into and collaboration during the development process, so teams can work in tandem to make The Right Thing.
Everyone benefits from this collaboration, from stakeholders and company leadership to designers, QA folks, and content strategists. Isn’t it time your teams started working better together?
Want to see what working in Storybook could look like for your team? Get in touch with one of our Storybook experts.
