Build your component design system

Blueprint React components

So far so good. But, how can you actually create a component-based design system on which UI/UX designers and developers can collaborate? This can be easier said than done (see: “UI Design System and Component Library: Where Things Break”).

So here’s a question… “what is your design system really?”

Ask a designer, and they will say it’s some images and guidelines. Apart from components, it will include guidelines for fonts, sizes, margins, positions, and other important aspects of the visual experience you provide to people.

As a developer, and they will say it’s a component library on GitHub, written in React, Vue, Angular or just JavaScript.

A UI design system is more than a component library. It’s more than the colors of your components. It’s an ever-growing and ever-evolving source of truth for the basic parts from which your entire product experience is made of.

Therefore, before implementing the first component you would have to set the styleguide and design language ruling these components. Here is a good start.

Then, these design principles should be translated into a code implementation of your components, from smaller Atoms to larger compositions (see: “Atomic Design and UI Components: Theory to Practice”).

Building a reusable component system

component design systems in bit.dev; just share, collaborate and reuse

At the end of the day, the real source-of-truth of your design system is the code you write. Why? because that is what your users really get in your apps.

So, you need to consolidate your design system and components into a unified system where both developers can designers can collaborate over components. You are really building a reusable component system, which should let you build, distribute and get adoption for shared components.

Modern tools like Bit, can come in very handy:

Bit is a developer-first component collaboration platform. It helps you bridge the gap between design and GitHub, through shared components.

A collection of spinner-components on bit.dev; share and use anywhere

Through Bit all your components become available for all developers to use and collaborate on across projects and teams. They also become available for the designers to visually view, sandbox and monitor for changes. Mainly, they become available for everyone to share and collaborate-on in one place.

Take a look:

Solo developers or small teams can use Bit to easily share components between different Vue applications while syncing changes between them. Gradually, your components will be added to your reusable collection.

Larger organizations can leverage Bit to grow their component-economy and help component-builders and applications-developers work together. More collaboration means greater component adoption which leads to faster development and a smoother and more consistent UI/UX for your users.

Bring development and design together

Design and code brought together: bit.dev

Developers can leverage Bit’s open-source CLI tool to build, test and publish individual components from any project or library in minutes, no refactoring or configurations required. Bit seamlessly detects and tracks components in your project, defines each component’s dependency graph and wraps each component in an isolated capsule so it can be used and run anywhere.

You can export all your components to bit.dev (or set up your own server), where your team can easily discover and use components in different projects. Bit even lets you import each component’s source code into consuming projects to make changes and update the component (and its dependents) without context switching. More adoption for shared code.

Designers can now view all the actual code components implemented for their design system. Not a documentation site, not images, but a live and interactive view of the actual components your users will get. When a change is made, the designer instantly sees the new version and can provide input. They can play with examples, change stuff, and stay on top of code changes.