This Design System was a project that I spread-headed and designed completely on my own.

To help customers build and launch products faster, we set out to create our of design system and component library. The magic of this UI Kit was that you could:

1.
Change the fonts, colors and effects in the Figma file, then sync it to Quest to generate an MUI theme.
Copy and paste any of the components from the component pages into their custom designs and convert the designs into working ReactJS.

2.
We based the kit on MUI and I studied the MUI docs to understand what options to add to the kit. I created the kit with over 30 MUI components that we ended up supporting which were composed of additional atom components to make everything easy to customize. The styles for fonts and colors matched the standards defined by the MUI library.

In addition to all the components that were derived from MUI, we added templates for Applications, Marketing, and E-commerce that used the design system components.

Overall the project took roughly 3-4 months to complete design and another 1 month to code.

Here I’m showcasing some examples pages from the UI Kit but you can click the link below to see it in the Figma Community.