Design System
Consistency and efficiency through systematic design thinking
Why do we need a design system?
Working in an agile environment with ever growing demands, I needed structure to help us succeed. Our chaotic library was unmanageable and causing friction. A design system would solve this problem. It would save time with design iteration, help prevent development error, instill brand trust in users with reliable design, eliminate the chaos of inconsistencies at scale, and clarify confusion across the team.
Where to start?
The first step - figure out what our development team is using and lean into it. Instead of trying to create something new and imposing it on the developers, I wanted to work with them. Development confirmed they were using Angular Material in our current product. Knowing this I could begin gathering the resources needed to set up a successful system.
Resources
Material
One thing I love about Material is that it is an in-depth open-source design system that anyone can use. Built by Google, it provides comprehensive guides online with many other resources to get you started. Looking into all versions, I decided to go with their latest Material 3. Being the most recent system, it is still receiving regular updates and support. Their online web guide offers in-depth explanation for each component they add while also highlighting the changes from M2.
Figma library
Another thing I love is the downloadable resources provided. Google's Figma UI kit for M3 already has the core framework in place matching design components to their web guide. This would save valuable time when it comes to a design system creation. Instead of needing to make hundreds of components from scratch, I just needed to take the M3 framework and adjust the branding to our own.
M3 icons
In addition to comprehensive guides, M3 has a pre-made icon library accompanied by Figma plugin. With an easy search function, this made adding icons a breeze and opened the door for adding iconography to our designs without the stress of figuring out what to create.
Creation
Customizing variables
The first action I took in the creation of our own system was updating the basic variables to match our brand, including colors, fonts, and spacing. M3 offers multiple themes within their variables for full customization, beyond anything our current product would need or use. I removed unneeded themes in order to reduce the complexity of our system and prevent error in unused variable selection.
Adding our brand colors and font styles was straight forward. Anytime I had a question I could reference their guidelines to quickly understand how their structure works. I learned how their naming conventions work and followed their pattern when adding colors that didn't quite fit into their premade list.
Updating design tokens
I hadn't worked with design tokens before and wasn't sure what value they would add thinking they were really only for development use. Thankfully, I still took the time to look into them and realized how helpful they truly are. By utilizing design tokens, the amount of work required to make updates to core brand colors is drastically reduced.
For example: our primary blue is only one variable in our variable list. However in the design tokens, our primary blue is used over 5 times. If we needed to update our primary blue, without design tokens I would need to have each of those variants added as variables and update them manually. With design tokens, I can just update the main variable and all tokens will update automatically.
If I can offer any advice for a product team it would be to use design tokens, even if your library is small. They are scalable while maintaining consistency. Figma has made significant improvements to how variables and tokens work making them a great addition.
Component adjustments and creation
With variables and design tokens updated, component adjustment was straight forward. Going through the various templates I made sure all brand elements were updated correctly and adjusted any spacing to match our standard. For the most part there wasn't a lot to adjust component wise, swapping a few colors here and there to align more to our current brand was the most required. The real test would come when adding custom components specific to our product.
I referenced the M3 components to identify their structure, learning how state-layers work with help from their visual guide. It surprised me how simple the actual creation became. Granted some of the more complex custom components took a bit more time overall I quickly felt comfortable adding what we needed. Any custom component I add to our system follows the same structure of all material components. This type of consistency helps the development team create these components when it gets to them and they can easily implement their Material UI kit from their side to match!
In Action
Developer reaction
I was nervous when the design system began appearing in our design files. Would development appreciate the consistency? Would they understand the customization I had created? Would actual design implementation improve?
The answer to all of these - YES!
The design phase gained efficiency and we saw a significant reduction in errors between design hand off and release. The overall look of our product began elevating and now we are at a point that project managers are eager to update old pages with a UI overhaul. Not only are these great wins, but even some of our non-design team members are able to understand the new design system and reference it in their own work.
New designer onboarding
A few months after the creation of our system a couple new designers joined the product team. The design system allowed them to quickly understand our product branding and answer common questions they have. They were able to begin drafting designs on their own right away with the resources provided.
I am very proud of creating this valuable team resource.