But Why?
A design system is a big deal! It makes our whole application look and feel consistent. I want our UI elements to be pixel perfect and give the impression that everything is polished. More importantly, having a design system helps our design team speak the same language and work together seamlessly. Since our design philosophies and style have deviated since I took over as the team lead, we focused on identifying the design patterns we commonly use and created guidelines to keep everything in sync.
Atomic Design Methodology
To build a solid foundation for our design system, we did some digging. I initially read about atomic design methodology – I was amazed and really wanted to apply it. But I quickly realized that it was only good in theory but bad in practice. The distinction between each stage got blurry real fast once it got past the atomic size. I naturally turned to looking at what other big, experienced players like Apple, IBM, Google, and Atlassian were doing (especially Apple, because I am a huge fanboy). We analyzed what worked well and picked the best parts that suited our needs.
Then, we sorted our design system elements into categories: Foundations, Base, Components, and Modules. For each category, we wrote guidelines that covered the general usage for each element. When it came to building the components in Figma, I made sure that each element was accessible, easy to find (good naming) and that they were built properly with auto layout, layer names, comments, and variants. The inner OCD in me would not allow it otherwise.
Takeaways
Creating a design system is more than just categorizing UI elements together. It helps the designers in my team design with the same philosophies and ensure a baseline level of polish to our designs. Design systems are made by designers, for designers. Designers are finally the users – checkmate, Jakob Nielsen. (https://www.youtube.com/watch?v=gZeXyVJC-Jg) We may not have a design system as comprehensive as those of big companies yet, but we're always striving for constant improvement. Design systems should and will always be ever evolving.
Bucket list
Some of the items on my bucket list:
- Build a workflow to ensure our designs are implemented with pixel-perfect accuracy in our front-end library. What’s the point of having a perfect design system if it can’t be reflected in our actual product?
- Provide more extensive documentation on different design patterns to help onboard new designers.
- Accessibility is a big deal, so we're committed to improving it in our user interface.