Muhi Logo Text
Work With MeAboutTestimonialsBlog

4 Effective Tools for Building a React Design System

Sharing my experience with tools that helped me build a successful design system in React

Last updated on February 02, 2022

design system
react
architecture
React Design System.webp

Building a design system is a progressive and abstractive approach to maintaining a consistent and cost-efficient components library that follows a specific styling guide and is sharable across multiple products. A design system has always been associated with designers but now it’s becoming critical for frontend developers to understand it from the technology perspective.

In this article, I will share some of the tools I used to successfully build a design system in React. Of course, before building the library, we require the designer’s expertise to develop the brand’s look and feel, user experience, style guide, etc.

create-react-library

One of the essential parts of providing a design system library is to be able to have an independent React components solution that can be published and used by other projects.

create-react-library is a CLI for creating reusable React libraries using Rollup and create-react-app. All you need to do is a simple global installation npm install -g create-react-library, then create-react-library, followed by few questions about your package and you have it all! A Boilerplate project for publishing React components.

image 7 1024x928

  • src folder is where you develop and export components.
  • example folder is for testing your components.

Material UI (MUI)

MUI can serve as a powerful base layer for your design system and can be easily customized to meet your component’s requirements.

Advantages of using MUI over building components from scratch:

  • Built-in functionalities that will take a while to build from scratch, e.g. Dialogs, Autocomplete, Trees, Tables…
  • Material is not only a library but a design system guide that helps you follow best design practices
  • Responsive components that work on different devices
  • Supported by Google

MUI uses Emotion as the base styling solution to style your application, but it also provides several other options such as plain CSS, Tailwind CSS, Styled Components… For more details, you can read the documentation on Style Library Interoperability.

image 1 1024x216

Storybook

Storybook is a great tool for documenting, showcasing, and testing components with designers, managers, and developers. It allows you to create a story for each component that showcases different variants, behaviors, and features of your component.

Button story with args

Designers can provide feedback and updates while developers can test and learn how to work with your components.

Besides documentation, it has plenty of other useful features and plugins such as:

  • Unit test functionality
  • Accessibility testing
  • Visual test appearance

Style Dictionary and Design Tokens:

Design tokens are defined as all the values needed to construct and maintain a design system — spacing, color, typography, border, shadow, etc.

Style Dictionary enables you to create and organize all Design Tokens as variables in a JSON format and automatically transform it into any format like JS, SASS, XML (for Android), etc.

image 10 1024x308

It is a powerful tool for both designers and developers. As a designer, you control all the design system values to ensure consistency, and as a developer, you don’t need to create and structure style variables for every project that follows the same style guide. As soon as there is a design update, the designer will change the value and it will reflect on all platforms. Awesome!

Takeaway

A design system is a hot topic and an integral part of many companies. Following the best practices to building a design system will ensure scalable and cost-efficient products.

Bye for now đź‘‹

If you enjoyed this post, I regularly share similar content on Twitter. Follow me @muhimasri to stay up to date, or feel free to message me on Twitter if you have any questions or comments. I'm always open to discussing the topics I write about!

Recommended Reading

Learn how to create, customize & style vertical tabs in React & MUI with icons, labels, and custom styles.

react
mui

Discussion

Upskill Your Frontend Development Techniques 🌟

Subscribe to stay up-to-date and receive quality front-end development tutorials straight to your inbox!

​

No spam, sales, or ads. Unsubscribe anytime you wish.

© 2024, Muhi Masri