Building a design system - introduction
- 2 min read
Let's build a design system. Several years ago, I wanted a design system that works everywhere. I wasn't satisfied with component libraries for specific frameworks. They're great but not generic. So I set out to build one. I'll show you how I did it and how you can, too.
Throughout several posts, I'll show you step by step how you can build a universal design system that works with any framework or no framework at all. There are many ways to accomplish this. This is how I do it.
What is it?
A design system is a styling solution, based on standards and guidelines, that abstracts designs into reusable patterns and isolates style and UX concerns in a tested, distributed artifact. In other words, a design system ensures consistent style and user experience, so designers don't have to start from scratch, nor do engineers. For example, in a web application, the design system decorates the front of the front end with a consistent look and behavior. The look might be the company brand identity or the application's appearance. The behavior is the user experience.
System diagram
The system diagram shows, at a high level, how the system works. The pattern library, in Figma or a similar tool, is a collection of token sets that describe different themes. The default theme will be our default theme.
The theming engine is what we are building. It takes tokens from Figma. The tokens represent a theme, and we create a usable theme from them. The theme is used in our styles, which are applied to components in a library.
Further, the theming engine can accept custom styles from the host application and return them as CSS.
Requirements
Our design system must support any framework or no framework and include themes. Furthermore, it should be fully tested and distributed in a tree-shakeable way that supports all import patterns.
Let's break it into parts. The design system will have a theming engine, a component library, tokens, and a bundler. This series will focus on the theming engine and its use with third-party component libraries or headless components.
The stack
- Typescript
- JSS
- Redux
- Jest
- Storybook
- Yalc
- Rollup
- Lerna
- React
- MUI
- Radix
- Stitches
- Mustache
- Material design
Disclaimers
As always, this is one way to solve a problem, not the way. There are many ways to accomplish what we're about to build, and some choices are for convenience. Material design is well known and valuable to us because we're building the code side of the system, not designing it. The theming engine is core Javascript, but we'll need React for components and Radix, Stitches, and Mustache to test everything.