Maxwell UI

Maxwell UI is an NPM component library as well as a reference website for Maxwell's designers and engineers.

As part of product's efforts to solidify a design language, I worked closely with designers and engineers to develop a philosophy of component based design at Maxwell and to implement our first interactive component library.

Understanding the Problem

As designers, we're often taught to think of our products in layers, with each layer composing a feature. Lately, the concept of symbols has been adopted by tools like XD and Sketch, which more closely parallels the real world application of React, which is Maxwell's standard framework

As a result, I introduced the concept to the design team in a series of learning sessions, leading into the tooling we use and how we can better use Sketch as a UI tool, while finally moving us away from Photoshop and Illustrator

We began the process by creating symbol libraries in Sketch

The Technical Stuff

We used RSG to generate a templated module that not only allowed external exports but also rendered a static site, which we deployed onto Heroku.

The brunt of the work came into three parts: Styling the guide itself, standardizing the components used across our 4 main applications, and deploying a pipeline that kept the styleguide module, website, and repository in sync.

Basic style usage is also added to the site for clarity Special components get sample code that is production ready

MUI is a living document and thus is continually improving