As the product team continues to scale at Cloudability, we’ve begun taking a more deliberate approach to how we work as a design team and how our operation and efficiency scales. Part of that process has been updating our tools. We’re using Abstract for design version control in Sketch and the rapid build-out of our design system.  Abstract allows us to include Shared Libraries when we begin to design a new feature – effectively pulling in the Design System to every project. There are still issues that I see on the horizon including overall governance of the system as the team grows. It feels very much like a situation where we’ll need to move slower in order to maintain long term velocity and avoid accruing design debt.

A couple of resources that I’ve found helpful are the Smashing Magazine published book Design Systems by Alla Kholmatova and the very detailed YouTube walkthrough of building out a design system by Christopher Deane. 

A specific issue I’m keeping top of mind is balancing vertical rhythm and information density. Our product is data intensive and much of the presentation is either a data visualization or a data table. 

Another tool we’re using is Catalog.style with the long term goal of consolidating React components in the design system to make the communication between front-end engineering and product design simpler.  I’m not yet sure how we’ll represent the design system that we need for day to day design work and the larger Catalog design system. I’m not quite there yet.

We’ve been working rapidly at both component inventory, progressing on the design system in Sketch (very tedious and onerous at times) and standing up Catalog in a github repo and working through the configuration and theming (very basic but sufficient for our needs). 

I’d love to hear any insight other designers may have about tools you’ve found successful and more particularly about governance models for design systems. I anticipate when deadlines pick up one of the first things to go out the window will be updating shared styles and symbols in the design system. HMU if any designers want to talk shop.