Design system
Acquia currently maintains two distinct design systems:
Patterns is more mature, making use of more styles and variables and having a more robust structure.
ADS was workable, but somewhat weak. Structure was lacking, no variables in use, and numerous discrepancies between the Figma file and library used by engineers.
We don’t have any teams dedicated to the maintenance and governance of our design systems, so it falls on individual designers to take on various parts of the load.
The largest time spent was on components that had fallen out of alignment with those implemented in code. The code had been updated, but the Figma components hadn't received the corresponding updates. This was effectively creating new components from scratch to match what was implemented.
Batch action bar - Before
Batch action bar - After
Some components required some refactoring to improve their structure and responsiveness — things like adding auto-layouts, reframing elements together, and naming layers better. Like refactoring code, there was no visual or functional difference here, and none of these changes went to engineering. They were simply to make the components more usable for designers working with them.
We had some colour variables defined, but they didn't match 1:1 with the CSS variables used in code, so I added those and implemented them in components for more clear alignment and easier management in the future. This also allowed us to eliminate the need to separately create light and dark mode components since we can map colour schemes to modes.
Click image to enlarge.
Buttons - Light mode
Buttons - Dark mode
There were also several components defined in code that were simply missing from the Figma file, so I created those. This involved looking at the code documentation in the library and reverse engineering the Figma component to match that style and behaviour.
Click image to enlarge.
Carousel
As one software suite, we would ideally have one design system driving all of our designs, but the technologies underlying them prevents them from being fused. So our goal is to at least make them harmonious. Since Patterns is the more mature system, I worked to help better align ADS with it. Previously, all components in ADS were in their own frame but on the same page. Numerous designers on the team indicated that they had a hard time finding what they needed. One simple but helpful update was to change the structure of the ADS Figma file to match the structure of Patterns. Now each component has a dedicated page in the navigation, making it easy to scan. Other designers on the team appreciated having each component on a dedicated page, making it easier to find components.
Click image to enlarge.
Before
After
I also developed and shared a clear process for making new updates to the system. ADS has historically been kind of the Wild West with no ownership, accountability, or documentation. So this change process adds some rigidity and weight to the design system. In defining this process, I worked with both designers who use the system and engineers who maintain the code to ensure the process made sense and was workable.
Numerous components required maintenance, including:
Adding missing variants
Correcting colours
Restructuring
Removing old/unused
For each component, I created usage guidelines and accessibility details. This helps both designers and engineers understand when/how to use a component as well as how it should work in ways Figma prototyping can't capture.
Beyond working direclty in Figma with the design systems, I've acted as an advocate for broader use of ADS. It's not had widespread use across existing products because many are acquired. Using it in more products will improve consistency, accessibility, and velocity of new work. Part of this advocacy included designing some mock-ups to show how an existing non-ADS interface might look were it to be implemented using ADS.