Building a design system at Alan & Questions going into Design Systems London
At Alan our current design system is a collection of CSS classes. It is similar to Twitter bootstrap. As the product and team have grown, it has often been the case that we need to ask our lead designer to do some one-off styles.
The result of this is having a bottleneck for shipping any visual code 🙀. And our designer is a very busy guy!
We recognize we want to have a long-term scalable solution to this problem, so I wrote a short google doc titled Design System Vision that I shared with our team.
To recap here is what I wrote:
Alan Design System Core Goals
1. New designs are composed entirely from pieces that exist in our design system
2. Designs that cannot be built with the design system should be rejected or the design system should change to accommodate for the new design
3. Engineers are capable of implementing designs using pieces from the design system with minimal guidance
The Vision
1. Components exist in a format that is useable by both designers and engineers. That means having components exist in both sketch and code.
2. Yet the source of truth for the design system is the code.
3. As much as possible, components should be platform agnostic. Their implementations on different platforms can be different, but they should share the same interface. For example typography and buttons are common elements that exist in both web and mobile.
4. The design system has documentation that acts as a guide and explains how to use the components (example).
5. The design system has a reference that shows the API of the components (example).
You may have noticed that the doc does not include anything about specific implementation details! Fortunately I have the opportunity to go to Design Systems London and I’m hoping to get more insight from those who have already built and are actively maintaining their design system.
Design Systems London conference
From going to the conference I’d like to verify that the original goals we set out make sense (and possibly modify them if need be). As well I’d like to gather as much information as possible about nailing the implementation of our design system. This includes both technical details as well as organizational details. I have so many questions I’d like the answers to! Although for brevity I’ve made the following list short(ish) 😝
1. What is the development process for new product features and improvements? What about for the design system itself?
2. How are designers interacting with their design system? How about engineers?
3. What tools or processes are people using to sync code with design?
Based off of this short list of questions I’m pretty excited for every talk at the conference. So when I come back I plan to write a follow-up post that details my general thoughts and takeaways and how we are applying this for our own design system here at Alan!
And if anyone else has their own thoughts, insights, and ideas from building their own design system, we’d love to hear from you 🙂.
