3 Foundations of a Reusable Component Design System

The 3 essential pillars of a modern reusable component system.

Compose apps from independent components with Bit.dev

Many teams face the need to create a reusable component system. The need for such a system often rises from three main reasons: a) Keeping a consistent UI/UX b) Standardizing the frontend codebase c) Speeding development.

In the modern development workflow, your reusable component system serves another important purpose. It creates a common collaborative common ground between designers, product and developers.

To achieve these goals, and set the foundations for a sustainable design system, there are three essential foundations to set in place:

• A design library — where components are designed.
• A GitHub repository — where components are written.
• A Bit.dev collection — where components are shared and reused.

Through these elements, put together, you can effectively enable the reuse of components in one collaborative and scalable system. Here’s how and why.

Design elements style guide

This is the first step in your reusable component system. Nearly every company building a tool you love has such a visual language system . To dive into the merits and hows of such a system, I’d advise reading the wonderful Nathan Curtis and particularly this blog series . It’s A+.

The stunning Slack Engineering design system (source)

What: Commonly, this includes a series of consistent visual elements created using tools like Sketch , Figma etc and uploaded to tools like Zeplin in concrete designs. This system also includes a written style-guide.

Why: Creating a visual language is much more than creating some image. It’s creating a consistent brand at every touchpoint, that gives users a warm familiar feeling. Through a component-based design system, we aim to achieve both visual and functional consistency.

Functional consistencymakes your product more predictable. Users know how an element behaves, and therefore will also feel more safe and secure to interact with it even on a page/screen they visit for the first time.

Visual consistencyincludes the colors, fonts, sizes, positions and other visual aspects of your UI which help your users cognitively identify and classify UI elements. A certain font color, for example, could be strategically used to help your users understand what they will get if they push a specific button.

4 Examples:

GitHub source-code repository

Many will jump and say “why GitHub? I’m on GitLab/BitBucket!”. Well, because I think you should open-source your library. And that’s GitHub.

Shopify’s Polaris design system; a developer’s perspective

What: Your GitHub component repo reflects the code implementation of your visual elements. It’s a Git-based project containing components written with our without modern frameworks (React, Vue, Angular). It also contains the required configurations, styling etc of the components. It’s often single-versioned and published as a package. Using tools like Bit component can be developed, versioned and published with modularity. It can be enhanced with visual example documentation using tools like Storybook or Styleguidist .

Why: Separating your components’ from the source-code of your consuming applications encourages modularity and reuse. If done right. A standalone repository makes it easier to develop all shared components in one place.

4 Examples:

Bit.dev reusable components

Bit.dev is the holy grail of your reusable component system.

It hosts the actual code of every component in the cloud and lets you reuse it in different projects. It manages everything from versions and updates to visual interactive documentation for all your components. All in one place.

Bit.dev — host, share and reuse any component

What: Bit.dev is the cloud for reusable components. It’s where all your components are hosted, managed, visualized and reused off the cloud. Through Bit.dev every developer can instantly find and consume any component into new projects, get updates, and stay in sync.

Why: A dedicated system for reusable components that makes every component independently available to develop, use and update. It also makes all your components discoverable in one place for everyone: developers, product and designers alike. It’s simple, scalable and collaborative.

4 Examples:

Conclusion

A reusable component system is key to scaling frontend development without losing control over UI consistency or codebase standardization. The three parts described above fall short on their own, but put together hold the power to create a collaborative component economy and compose UIs together.