You're reading the very first issue of Design Systems Weekly 🎉
I’ll be keeping an ear to the ground on what is happening in the colliding worlds of design systems, styleguides and front-end architecture and sharing a few links per week that I believe are worth your time. The surface area of these topics blurs the lines between design and engineering, and the content of this newsletter will reflect this.
Without further ado:
Diana Mounter leads GitHub’s design systems team, who are responsible for building and maintaining the Primer CSS framework. She gives a detailed and insightful run-down of how GitHub began introducing some order back into their system after accumulating almost 10 years of diverging styles and approaches.
One of the key takeaways from her experience is that it’s never too early to get started on this process — I’m sure many designers and engineers working on less mature products will have gleamed some encouragement from this.
Ben Wilkinson is Design Systems Lead at Airbnb. In this talk he takes us through the approach taken by Airbnb’s Design Language System (DLS); a flat component structure where each component is specific and named accordingly. The worked examples are especially valuable to those working with React or other component-based frameworks.
Our components are the vocabulary of our design system.
Focusing on the technical side of the HealthCare.gov design system project, this piece takes a look at the decisions made regarding architecture, documentation, developer workflow, audits, and distribution.
Colm Tuite dissects a number of problems with the current state of mainstream design tooling - primarily, the fact that our tools export to images, instead of resembling the fluid and interactive context of our products. Jon Gold’s piece Dragging Rectangles is another great read on the topic.
What’s really exciting is the next generation of tooling focused on solving this fundamental problem — the most interesting projects in this space are teased at the end of the piece.
Breaking down complex pieces of a UI into bite sized and logical units of work is always a challenge. The component folder pattern is a handy approach to have up your sleeve to help organise your directory structure and make your components easier to understand and maintain.