JavaScript Developers and Designers are very familiar with design systems. It is essentially the guidelines and specifications that relate to the project that you are working on. It is a subject that is very important when it comes to following brand guidelines for a company that you are working for. In the case of a Designer they are likely to be working with a design system which has a specification for the typography, colours, spacing, content and other design related information. Typically designers would have all of this managed in a design tool like Figma, Adobe XD, Sketch or something similar.
Now when it comes to the development side of things we don't usually a development design system setup. If we are using a framework like React for example then it is common practice to use a component driven development methodology. So basically creating lots of reusable components that can be used across the application meaning that we cut down on duplicate code and everything becomes modular, dynamic and interchangeable. As good as this is there was still no easy way for us to see these components in a design system. This is where the tool Storybook comes in.
What is Storybook
On the Storybook website they say that:
Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.
Essentially it is a development design system where you can showcase and test all of your components in a really cool user interface. All of your contents are laid out nicely it is fully interactive. You can see changes instantly for example how a button would look with different background colours. Or how font would look inside of a call to action component. The list is limitless.
Storybook takes your reusable components and organises them in a nice tidy library so that you can play around with them as you see fit before you integrate them into your application. What makes this tool even more amazing is the fact that it is always up to date and supports most of the popular JavaScript frameworks out there. The list includes, React, Vue, Angular, Svelte and much more! They have the top JavaScript frameworks covered so there is no excuse for you not trying it.
Why should I use Storybook
Storybook is user friendly and a very powerful tool that gives teams the freedom and ability to design, develop and organise all of their component assets allowing for a consistent design throughout projects. When you have a design system setup with ready made components you don't have to worry about having to recreate assets from scratch because they are already there and ready to use.
This article is only scratching the surface if you want to learn more then you should visit the Storybook website. The Storybook tool is already in use at many popular companies and it's a skill that tons of companies are looking for with new candidates. A few of the companies already using Storybook include GitHub, Adobe, Microsoft, BBC, IBM, Auth0, gov.uk, Atlassian, Lyft, airbnb and many more!
You can find use cases and examples which show more.
Final Thoughts
I really hope that you enjoyed reading this article and learned something from it. As a content creator and technical writer I am passionate about sharing my knowledge and helping other people reach their goals. Let's connect across social media you can find all of my social media profiles and blogs on linktree.
Peace ✌️
Top comments (4)
I used Storybook when I made my first iteration of a component library, a year ago I switched to bit.dev and now they have released a new version that has an interesting showcase similar to Storybook, take a look at it because you might find it useful.
It is not free though
What made you switch from Storybook to bit.dev? Which JS component library were you building with?
It was a React UI library basically, the change was because bit allows my team to retrieve components directly in the final project modify and reupload again, it also comes with features to build a monorepo but publishing components independently.
Back in the moment I remember to see bit as something like Lerna + Storybook.