The Design System

For over a year now, I've been working on the Design System for Reckitt. This is a multi-brand design system solution aimed at building almost 22 brand websites in at least 90 markets. It incorporates React, GatsbyJS, Storybook, Contentstack, and Figma files, and these are only few frontend solutions, among other technologies. There’s a lot I've learned and developed over this period, starting from design token creation to setting up the entire Figma file system for the creation and management of design components. It has been a lot of work and still requires more effort.

The system

More than a year ago, I developed an interest in design systems. After a digital transformation within the company, there was an opportunity to change my role and join a team focused on creating websites using a design system. I thought, "What could go wrong? I will learn something." So, I seized the opportunity. It has been a bumpy road. The system was, to put it mildly, disorganized. There were three documentation spaces, four different tools, and all the information was scattered. Design tokens? Don’t get me started. There was a design library in Figma, but design tokens were a novelty, so design decisions were tied to styles. Meanwhile, the system's visuals differed from the internal product theme we were developing. There were numerous inconsistencies in nomenclature, types, hierarchy, and status. I created a master spreadsheet to understand what was what and where it was.

Figma Files

Initially, I didn’t even know where to start. I watched videos and read every paper on the subject I could find. Two names worth mentioning are Nathan Curtis and Esther Chen; without their guidance, I’d probably still be stuck. I based my Figma file work model on Esther’s approach, deciding to separate every component into its own file for better visibility of changes and documentation. This also provided a good space for notes and component creation.

Documentation

This was tough. I was looking for a technology that would ease creation and provide great visibility for end-users. Even though I found something, we couldn’t proceed with the purchase due to organizational issues. So, I went back to the drawing board. We had to utilize what we already had, which was either Storybook or SharePoint. I chose Storybook, created an .MDX template for components, and migrated all scattered documentation. We also used SharePoint as an external training platform for anyone needing assistance with website knowledge. I structured everything using Brad Frost’s Atomic Design approach.

Tokens

I’m currently remapping and rewriting tokens, a task almost impossible for one person. I wouldn’t recommend it to anyone. I set it in Tokens Studio to be future-proof, though Figma's variables haven’t been very helpful. I’m keen to see what TS has in store regarding graph engines. AI has been super helpful in mapping, and I believe the future of design lies there.

To be continued...