Design Systems for React Developers

It's been a while since I've last written for the RisingStack blog, almost exclusively on Node.js. Since then, I've kept busy with getting into Design Systems, and I've wanted to share with you all what I've learned.

In this post I'll provide a brief introduction to design systems and describe the advantages and use-cases for having one. After that, I'll show Base Web, the React implementation of the Base Design System which helps you build accessible React applications super quickly.

What are Design Systems?

That's a hard question. I like to think about design systems as a collection of reusable components, constants and best practices that help both designers and engineers to build accessible applications with ease.

Let's dive a bit deeper into those three categories.

Constants, or Design Tokens

Design tokens codify values that are reused across applications to make them look and behave consistently. These tokens can include colors, grids or fonts, just to name a few.

By having these in your design system, application developers and designers can build consistent applications easier.

Reusable Components

Reusable components enable you to bootstrap applications fast, by reusing a set of already implemented inputs, pickers or surfaces. It has quite a few benefits:

• accessibility can be built into the component library, so not all designers and developers have to master it,
• each new feature to a component or a bug fix can be rolled out to all the applications depending on the component library, without having to ask all teams to update them,
• it also enables you to design more consistently - you don't have to ask each team to re-implement a component.

Best Practices

Design tokens and reusable components are just the very foundations your developers and designers will have to build on top of.

It is also essential to provide the best practices around how the components and colors or spacing should be used, and how they should not be used.

Are Design Systems for me?

Depends. If you are a small team, working on a small project, design systems would probably take up a lot of your time, while product would suffer. To decide if it's worth starting to invest in a design systems team, I'd recommend the article Why Do Organizations Need a Platform Team? .

Even if you don't think it's time to build a dedicated team for your design efforts now, it helps a lot to start to invest in it.

One step you can take today is to start to limit your choices when it comes to design. Define a set of colors (3-5 distinct ones) and shades, and always use those. A good example can be found here . The same goes for fonts or spacing too. It's a bit of work upfront but will save you a lot of time in the longer run, as you won't have to figure these values out every time.

To learn more about this process, I highly recommend reading the book titled Refactoring UI , especially the section "Limit your choices".

Design System Examples

I believe learning by examples is one of the most powerful learning technique - it helps you put the theory into context. To do so with design systems, I'd like to show you a few examples.

Atlaskit by Atlassian

Atlaskit is Atlassian's official UI library, built according to the Atlassian Design Guidelines.

What's really interesting about this design system is the structure of the repository and the published packages - they use a monorepo for the components, but they are published as separate packages to npm. This enables them to version the components independently.

Polaris by Shopify

Polaris is the design system built by Shopify, to power their merchant experiences.

What's really amazing in Polaris is the way they document the design system for the web, android and ios on the same page. A great example of this is the documentation site for their date picker component.

Base Web by Uber

Base Web is the design system created by Uber, to serve as the base design system for applications.

One of the most powerful features of Base Web is its override patterns. This is the system I'd like to tell you more about in the next section and will dive deeper into overrides.

Introducing the Base Web Design System

In the past year, I've been involved in the Base Design System, and I'd like to introduce you to it. It helps you build accessible React applications super quickly.

Base Web is the React implementation of the Base Design System. It ships with a lot of opinions but also takes customizability to an entirely new level.

CSS Engine

Under the hood, Base Web uses Styletron for component-oriented styling. It was built from the ground up for high-performance while also producing the smallest possible CSS output.

If you'd like to dive deeper into how Styleron works, please read the Virtual CSS with Styletron article.

Base Web's Components

As of today, Base Web ships with 37 components, ranging from simple components like the Avatar to more complex ones like the Select component.

To make sure the components work and look as they should for each release, we've dropped Jest's snapshot tests and started using a visual regression testing solution, called screener.io . What's really nice about this solution is that it integrates very well with GitHub pull requests, so if a component changes its visuals, your design team has the chance to review the changes before merging.

The Overrides Pattern

What makes Base Web extremely powerful is its overrides pattern. Base Web components typically consist of many subcomponents. Let's take a look at the drag and drop component:

import {StatefulList} from 'baseui/dnd-list';

export default () => (
  <StatefulList
    initialState={{
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
    }}
    onChange={console.log}
  />
);

Under the hood, it consists of multiple subcomponents like the Item , DragHandle or the Label .

With overrides, you can target all of them to change their

• styles,
• props,
• or the whole subcomponent.

To make this work, every top-level Base Web component exposes a property called overrides , that maps to the subcomponents. Let's take a look at how it works in practice!

Let's change the background color of the items, and also add a left border to them. To make this work, we will use the style overrides. Under the hood, Styletron will merge the original styles with the overrides we provide.

import { StatefulList } from 'baseui/dnd-list';

export default () => (
  <StatefulList
    initialState={{
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
    }}
    overrides={{
      Item: {
        style: {
          backgroundColor: '#eee',
          borderLeft: '1px solid blue'
        }
      }
    }}
  />
);

The style property is just the tip of the iceberg - if you want to get more familiar with the override pattern, please check out the Overrides section of the documentation of Base Web.

How Design Systems Help

If you are building a product or a suite of products, and both consistency and accessibility are of paramount interest for your company, design systems can help a lot by:

• reducing the time needed to bootstrap new applications, as there is a reusable set of components,
• enable you to roll out bug fixes and new features to all products quickly.

If you'd like to get started with Base Web, check out the documentation site here: https://baseweb.design/ .