A design system is the single source of truth that centralizes a company's best practices, uniting teams to build products at scale. In other words, a design system is a communication toolkit.
Design systems help companies scale design practices, promote higher quality products that can be built more rapidly, and help users successfully achieve their goals.
A design system isn’t just a series of components in a Sketch or Figma file. It's way more than that. While this is a non-exhaustive list, a design system is typically made of high-level articles, styles guides, a component library, and documentation.
First let’s start with the high-level articles. Think of these like what you would see on a design team’s blog. These articles showcase interviews, case studies, opinions, events, and illustrate the design team’s culture and practices. Only really well established design teams include these in their system. A great example of this is Airbnb’s design site.
Next, there are style guides. Style guides contain visual and language guidelines, such as fonts, color, shadows, spacing, iconography, illustrations, voice, tone, etc. Style guides are often created at the brand, marketing, and product-level.
Then, there’s the component library. It lives in design software like Sketch or Figma for the design team and in code for devs. For a design system to be beneficial and scalable, there needs to be a one-to-one relationship between the component living in the design software and the component built in code. This way, when you hand off designs to developers, they can easily find each coded counterpart and recreate your designs with minimal communication.
The last piece of the design system is the documentation for the component library. It provides the information required for designers and devs to know how to successfully use each component. Without documentation, it's like driving a car for the first time without having anyone help you. Yikes!
A great example of a very well documented component library is Google Material Design. Their components are extremely well described. Each page's content follows a similar structure where they describe usage, anatomy, behavior, actions, theming, and specs. It’s also a great example of documentation that helps devs and designers by providing Do's and Don'ts, limiting the risk of misinterpretations.
Design systems are how large teams that work across the globe can still produce consistent, high-quality experiences at scale.
