Using React within a Design System

You’ve probably have heard about concepts like Design Systems and Atomic Design so far (if you haven’t please do read those two articles as some prior knowledge is assumed). You’ve read about all the goodness they can bring to teams building digital experiences and how it can bring designers and developers together, working in harmony, iterating quickly and getting awesome apps to their customers. But what does it actually mean, if you’re on the, let’s face it, receiving end of it as a developer? What can we, the developers, coders and the people that actually build the “stuff”, do to both be part of a design system, plus make both our and our non-coder colleagues’ lives easier?

Let’s look at some of the tools we are employing to help get things done.

The Problem

What is the problem? A “simple” one to express:

How do I, as the person that has to write the code, can collaborate with the designer and/or UX person that dreams up whatever it is I build?

There are buttons, drop-downs, forms, animations and what-not that we have to build, day-in, day-out to create the various apps we put out for our customers to use. The traditional approach so far was that some UX person does what a UX person does, then a UI designer does what a UI designer does and eventually a developer ends up with some PDF or PSD file that has a breakdown of the, let’s say, address details form to decipher and build. By the time the code is done, the UI/UX people have moved on…