StorybookJS is a powerful development tool that will improve your team’s ability to test changes, communicate with design, write better code, document and discover components, and much more.

Here are just some of the ways that a very basic design system built

Designers and developers develop a common language:

Designing and developing an app is complex. Communication is critical.

If we don't develop a common language to describe things, design and development can fail to understand one another. When adding components to our design system we name each component. This is a perfect opportunity for developers and designers to agree on a name. When designing pages, both can point to a component and name it.

Testing and reviewing components is easier: 

Once a developer implements a component, design review is often required.

In the past, you might have sent a screenshot back and forth in Jira tickets. With a Storybook design system, you can simply share a link. With controls, designers can test different states, and if a state isn't available they can inform the developer, improving on the component's implementation.

Provides organization and search to components:

The easier it is to discover components, the less likely you are to duplicate work, and the faster you can onboard new developers and designers.

When building a design system, it is important to consider organization. At first, though, it can help to use a flat structure so search is important. Storybook supports searching for the name of a component or its description. The search is really quite detailed. As you build more components, you can get pretty advanced with the organization.

Provides code samples and technical documentation: 

When using an unfamiliar component it is important to have access to examples of how to use it.

Storybook stories are code samples. Code samples that happen to exercise your components in all visible states. This means that the Storybook stories you write when creating your design system also serve as searchable documentation for your components.

Improves component design with clearer prop types: 

Using Storybook Controls forces you to be selective about the types of props your components take.

When components need to be extended to support more options, it can be tempting to add complex config props to components, but these quickly become difficult to manage and refactor. When reviewers are looking at components in Storybook, these hacky types are extremely apparent and difficult to hack in.

I hope this convinces you to consider adding a StorybookJS design system to your web app.

If you're interested in learning how to add a StorybookJS design system to your app, you can see my other article here.

Good luck and happy building!