7 Tools for Building Your Design System in 2020

Building a component design system? Seeking better designer-developer collaboration? Here are some awesome tools :star:️

Legend has it that the first design system was introduced by NASA in 1976. Since then, design systems turned into a widely common practice used to standardize design and development of a visual language in multiple instances across different teams, projects and applications.

Today, modern components take the notion of design systems beyond visual elements, opening the door to the true consolidation of component-based design and development . However, the current ecosystem is still gapped between design tools and developer tools. Through tools built to bridge this gap from both design and development ends, we can bring together designers and developers to collaborate like never before, in one unified system.

In this post we’ll explore some of the most popular and most promising tools and technologies that pave the way into this future. We’ll explore how familiar design tools like Invision and Sketch manage component design systems, introduce groundbreaking developer-first component collaboration tools like Bit and component-based design tools like Framer , and beyond.

Feel free to comment below and share your own ideas and insights!

1. Invision Design System Manager and Sketch Libraries

Manage your visual language as a component design system.

Invision DSM

Invision Design System manager empowers designers to manage the design angle of their system in a way built for standardized and unifed systems. It provides tools such as component drag & drop, component search, enhanced team sharing, management of version history and a semi-automatically generated style guide to complete the visual system you build. It even integrates into your Sketch libraries to create a unified workflow.

Sounds useful? it is, and just think of the potential if combined with component platforms like Bit on the developer’s side, to turn the visual design system into a managed, reusable and cross-project controlled set of visualized and consumable components which can be used and updated anywhere.

Sketch Libraries

If you’re working as part of a team with other designers, Sketch’s Libraries let you place your document somewhere where your colleagues have read-access such as a Dropbox folder, or repository in GitHub, etc, have them add the document to their Libraries in Preferences, and they will have quick and easy access to the styles and Symbols in that document. You can receive updates made to the file. And, it works with Invision DSM too, and hopefully soon it will integrate with platforms like Bit for an utopian component experience.

A Library is just an ordinary Sketch document that contains Symbols , Text Styles and Layer Styles, which you can then use in any other Sketch document. If you update any of the Symbols or styles in your Library file, documents containing instances of those Symbols, or any of your predefined styles, will receive a notification telling you that they can be updated. Definitely a mandatory option to explore when building a design system.

2. Bit’s collaborative component platform

Easily share and manage reusable components across projects and teams. Let everyone collaborate over your actual components.

Design systems made from real code components in bit.dev

Bit is a popular developer-first platform for managing and collaborating over components across projects and teams. It’s built for components written in any JS framework, or without a framework.

Through Bit you can seamlessly isolate components from different GitHub projects, and export them into a unified collection in the bit.dev platform. From there, everyone can discover, install and update components anywhere.

When building a design system, Bit lets your colalborate and reuse components to keep your UI/UX consistent and development standardized. It also brings everyone together over your actual managed code, in a visual way.

-> Explore component design systems in real code

-> Watch 5 min demo

A design system from real components in React: just choose, use and collaborate

Bit’s CLI tool tracks and isolates components in a reposiotry in an isolated capsule environment, so you can build, test and export each as a reusable and managed unit. It requires zero refactoring or configurations, and components can be used and updated right from any consuming project. The result is a nearly limitless ability to build, distribute and collaborate over components.

bit.dev is where exported components are organized, visualized and made discoverable for teams to build together. Different team members can easily find shared components, view and save examples in real code, consume components and sync updates driven from any consuming project. Apart from developers, designers, products and marketers can also collaborate over the code itself, so the entire team knows exactly what’s going on at any moment.

Each component is even sandboxed and rendered so that everyone can learn how it looks and works, and monitor new versions as they are updated.

A collection of Vue slider components in bit.dev

Large organizations use Bit to manage components from their library across projects and teams, in a democratized and collaborative workflow, so that their components are truly adopted across products while regulated. This creates a component ecosystem within larger organizations, which leads to a collaborative workflow for building and updating components everywhere.

Smaller teams use Bit to gradually build design systems bottom-up, collecting components from their apps into your bit.dev collection, which is very useful for smaller teams and startups which don’t have the time to build a system.

Check it out:

3. FramerX and BuilderX for component design

Interactively design components translated into React and React native

FramerX

Design facing, FramerX is a prototyping tool for designing interactions while introducing React (and JS/TS) in the design workflow itself over canvas. It lets you turn basic HTML and CSS or React components into visual elements.

You can import design elements from your canvas into code components. Use code to add logic and data, then go back to the canvas to tweak the style. You can also pull in components into Framer, or find pre-made components.

When building design systems, Framer can come in useful as you can organize your components in your team’s store, which also introduces push-updates for every change made to components by your team. Thorugh the customization of UI, you can save different instances (spacing etc) for component usage. You can even improvise to pull in your production’s real code into this system as shown in this example by Datadog HQ . Check it out.

BuilderX

BuilderX is a new tool built to translate component design into a code implementation in React or React native. Through a Sketch import ability, BuilderX aims to let you automatically translate designs from Sketch into code and export them into your project/library. You can dig into this demo application to have your own first-handed impression on how it works.

While there isn’t much information available in the community to date, it definitely looks very interesting to monitor and track looking forward, as visual editing tools like Framer or Builder combined with developer tools like Bit can pave the way into a truly consolidated designer-developer workflow.

4. Stencil, Svelte & lit-html for Web Components

Build pure and standardized components that work everywhere

Back to the developer’s world. Today, most modern application are built using modern component-based frameworks like React, Vue and Angular. But, there’s another way to go: no framework. And, this is probably the future .

Custom components and widgets that build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

This means more reuse, better stability, abstraction and standardization, less work and pretty much everything else that comes with better modularity. While many people are sitting around waiting on projects like web-assembly, in the past year we see new tools and techs rise to bring the future today.

Among the most prominent technologies built for web components, you can find Svelte , Stencil and Lit-html . I’ve written about these tools before, so please feel free to dig-in and take a look at how they can help you build a truly standard and reusable design system, used anywhere. Take a look:

5. Storybook and Styleguidist for component documentation

Visually develop and document your components

StoryBook and StyleGuidist are too wonderful projects that help develop components in isolation while visually rendering and documenting them.

StoryBook

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. When building a library, StoryBook is a neat way to visualize and document components and different AddOns make it easier to integrate into your different tools and workflows. A cool side-project is Storybook design system which can aid in consolidating components into one repository with useful boilerplating for the library.

StyleGuidist

StyleGuidist is a React component development environment with a living style guide. It provides a hot reloaded dev server and a living style guide that lists component propTypes and shows editable usage examples based on .md files. It supports ES6, Flow and TypeScript and works with Create React App out of the box. The auto-generated usage docs can help Styleguidist function as a documentation portal for your team’s different components.

6. Zeplin Connected Components

Link components from Zeplin to GitHub

With the introduction of Connected Components, as a developer, you will now be able to link components in GitHub to their design counterparts in Zeplin. Zeplin automatically collects your component documentation based on the platform/framework you’re working with; JSDoc and PropTypes for the React example above. This high-level overview is flexible and can customize the description, the code snippet and add links to any source like your internal wiki or your design system documentation. Integrations included. Look:

7. Sketch2react and React to Sketch

Because why wait for the future when you can try and build it? :smiley:

Sketch2react

This new tool, which began as a cool side project between a developer and a designer in Stockholm, aims to let you work inside your Sketch app with zero plugins required and export real code. Inside the Sketch app you can build and design with code components that you style & attach simple business logic, and leverage layout & structure with specific framework rules . You can get started by trying this simple pre-made S2R Sketch Shared Library .

React to Sketch

Airbnb’s integration between Sketch and React is used to build Airbnb’s design system, letting you implement your designs in code as React components and render them into Sketch, and even lets you fetch and incorporate real data into your Sketch files. The concept is simple, and the usage within design systems is a natural combination. Take a look:

Honorable mentions :star:️

• Know more useful tools? Comment and we’ll add them to the list :raised_hands: