The Best Component Library Tools to Help You Scale Your Product Consistently and Efficiently
- Experience Design /
- Product Management /
- Technology /
As a product manager, you need an effective way to manage the user experience and user interface (UX/UI) of your digital product. It is essential that your digital product will scale effectively without requiring frequent additions or rework of design files and assets, while maintaining a consistent UI system. Several innovations over the last few years have helped reorganize the traditional UX/UI design process, and more recent innovations on the development side now allow for a complete design-to-development tool stack. This article will go over the most recent UX/UI design processes and the best tools that allow for tighter integration between design and development.
What’s the Difference Between Design Systems, Style Guides, Pattern Libraries, and Component Libraries?
Design systems have been around for a while, but are becoming more popular due to the shift to components in the development process, which has been accelerated by the popularity of the React development framework. Design systems enable people to take just the bits of the design system that are applicable to them and build the components that are missing more easily. It’s important to create a system that’s complete, flexible, and extensible so that it can be adapted easily.
Design systems holistically group all the elements that allow product teams to design and implement a product. Typically, a design system consists of the following parts:
- Style guide: focuses on the graphical representation of the UI elements
- Pattern library: focuses on the functionality of UI elements
- Component library: manages source code for the UI elements, often leveraging CSS and JS frameworks
While different design systems tend to group their deliverables differently, the core pieces should be included. A strong design system will also incorporate ‘subatomic’ parts, such as the grid system, color palette, and typography, which are commonly referred to as design tokens.
Let’s take a look at an example of some real-world design systems:
- Shopify publishes their design system, Polaris, not just for themselves, but for anyone who operates in the ecosystem of their eCommerce platform.
- Material Design is an extensive design system that bridges graphical guidelines, interaction patterns, and component libraries.
- GitHub publishes their design system, Primer, as an open source project. While it has a strong focus on the development aspects, it still includes a style guide, and pattern library. They even include templates for presentations and an iconography library.
- Atlaskit is the design system developed by Atlassian for its products. It is very exhaustive and includes a style guide, pattern library, and component library.
How does using a Component Library improve the UX/UI quality assurance?
Component libraries can be used for visual QA by visual designers once functionality is in development and before it is deployed into the application. Component libraries also enable UX quality assurance on how components function; this workflow can be collaborative. Edge cases typically can arise once real data is used in an application environment; by using a component library your team can catch more of those edge cases before they appear in your production application and more effectively address the UX required for modern stateful interfaces.
How Atomic Design fits with Component Libraries
Component Libraries borrow some concepts from atomic design, so it’s important to understand some of its basics. In atomic design, design concepts are composed of modular and reusable components created from individual atomic pieces. Brad Frost describes atomic design:
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems.
When connecting the atomic design practice with development, the resulting code is easier to read, contains less duplication, allows for more modular file structure, and improves the maintainability of the application. In particular, component libraries have become a popular tool to represent Molecules and Organisms as functional pieces of code that can be utilized in web applications.
I have a Design System, but how do I add a Component Library?
If you are ready to take the leap, congratulations! First off, ensure that your design system touches on all the required components:
- Purpose and shared values: Create a vision to ensure the design moves in the right shared direction. Follow these critical steps to define your product’s vision.
- Design Principles: These help teams with decision making and guide your team toward making appropriate decisions.
- Brand identity & language: The identity should be defined in line with the strategy and the objectives of the brand. This is often the very beginning of a design system for many businesses or organizations, helping define things like typography, colors, and more. Follow these steps to define your digital product’s brand strategy.
- Components & patterns: These are at the heart of the design system. All the previous elements will help you to create them and deliver a consistent experience.
With this in place, you can start working on your component library:
- Create a plan for what parts of your design system you want to represent in the component library. You can include different levels of atomic design, such as only atoms or everything up to organisms. Ideally, this is prioritized to maximize your return on investment, including prioritization of the most commonly used or shared components in your library.
- Decide if you want to leverage an existing component library tool and, if so, select which one to use (more on that below).
- Determine the hosting and governance of the library. Different tools will push you towards different options. Since your component library will be a shared resource that is likely utilized by more than one application in your ecosystem, it will need to be set up as a standalone, semi-autonomous entity–essentially like a web application itself. As such, it requires hosting infrastructure and the typical governance policies associated with a web application (source control, continuous delivery mechanisms, etc.). Teams other than development will need to be able to access this, so plan for it to be available to them as well.
- Decide on a distribution method, such as npm. This establishes how the code for a shared component is ported into the software applications that want to use them.
- Make sure you have a governance plan for the development lifecycle of each component, from build to release. Also, consider component dependencies.
The Best Component Library Tools to Develop Independent and Reusable Components
You could build a component library from scratch, but fortunately, there are several tools that can help you get a jump start. Here are our favorites that you should check out:
Storybook is an open source tool for developing UI components in isolation for some of the most popular JS frameworks (React, Vue, and Angular). It provides a sandbox to build and showcase UI components, provides visual previews of components, and runs tests on them. It is widely used, popular, and considered a mature software product.
It also supports add-ons, which can extend its utility. For example, the “knobs” add-on allows editing the props passed to a react component, thus enabling testing and viewing the component in different UI states.
Since it is an open source product, StoryBook does require setting up and managing your own hosting infrastructure to run it.
Similar to Storybook, Bit.dev provides a workspace to create visual components. It has a greater focus on isolation and more features around the full lifecycle of component development. It too allows for a visual preview of components, supports the most popular UI frameworks (React, Angular, Vue, etc.), and allows running tests. Bit.dev can work with StoryBook, or as a standalone tool.
Since it’s a commercial product, there is a hosted service option in addition to an on-prem option. The hosted option creates a low barrier to entry and reduces long-term infrastructure management. It also includes automatic deployment and additional collaboration options that the self-hosted tools do not provide.
Bit.dev defines, and can handle the full lifecycle for components: test, build, version, and distribute. It provides continuous integration (CI) for each component, in the cloud. It also includes built-in hooks for NPM and other distribution tools, which may save time. Compared to other tools, Bit.dev is geared toward greater isolation of components, where changes and versions are tracked per component. It also provides dependency management.
Styleguidist is another open source tool that is self-hosted. It facilitates isolated component development and is similar to StoryBook in features, but uses a slightly different technical approach, and only works for React. It allows visual previewing of components, runs tests, and allows you to model state, similar to the “knobs” add-on for StoryBook.
One feature that particularly stands out to us is how easy it is to create docs and controls as Styleguidist parses the source code and readme files to auto-generate docs. The output is generated in the JSdoc format.
This tool isn’t a direct comparison to the other tools listed above, but warrants an honorable mention. It is only focused on web components (not react, angular, etc.) and just does the work of generating and documenting them in code. It provides a toolchain for building a component library of web components, but does not provide a visual preview of components.
Getting Started with Atomic Design and Component Libraries
If you are interested in setting up a component library for your digital product, now is a great time to do so. The popularity of atomic design helps design teams structure design systems in a way that can be easily understood in terms of components. And the availability of several robust component library tools provides a good starting point for setting up your own UI library. If you are just getting started with your digital product’s design system, learn how to develop an effective digital product brand strategy in five easy steps. Also, don’t forget about the developer experience for engineers outside of your core product team that might engage with your product.