What are Design Systems? How are they different from Style Guides and Pattern Libraries?

[Preran]

I could begin with the many definitions and comparisons out there, or I could just focus your attention to the graphic below from Jan Toman @HonzaTmn. While this graphic may not apply in its totality to every use case, Jan says that the representation helped visualize how he would present the idea to his team.

Note: This article is my understanding of the differences based on my reading. I would love to hear from you about your observations on the differences between these three. Do they differ from mine? Is there anything else that you feel should have been included? I look forward to hearing from you.

A Design System provides the framework, guidelines, and assets required to ensure consistency and predictability in terms of voice, tone, look, and feel for all properties owned by a company.

For example, irrespective of whether you are a designer working on company’s website or the one designing a brochure, the design system is your go-to.

The contents of a design system will vary based on the nature of its audience. For example, if you are a company that is only into design, your design dystem will, most likely, not have a requirement for code snippets.

That does not, however, mean that when there is a requirement to standardize code, your design system will not support it. A design system is a living breathing entity that is responsive to changes when required.

Examples of Design Systems:

• Material Design by Google
• Shopify Design System
• IBM’s Design System

Smaller companies sometimes may dispense with an exhaustive design system and choose to create just the style guide and pattern libraries.

The Style Guide, as the name implies, helps achieve consistency in style by providing guidelines around color, typography, spacing, and so on. When in doubt, designers refer to the style guide for information on such as the fonts they are allowed to use and the colors that have been chosen to represent the brand.

Examples of Style Guides:

• Spotify Style Guide
• Netflix Style Guide

Pattern Libraries or Component Libraries contain reusable assets that that can be used across projects. These assets follow the rules outlined in the Style Guide. Designers can quickly copy components such as buttons, images, and clipart from the library saving several hours of work in creating these or getting them reviewed. Because these assets are linked to a master, any changes made to the master are reflected across all its instances.

Examples of component libraries:

• Mailchimp component library
• Starbucks component library

Important References:

• Differences between Design System, Style Guide, and Pattern Library by Adi Shanbhag
• Pattern library, Style guides, Design Systems. Do you need one? by UX bootcamp

[Peter Villevoye]

Hey Preran, thanks for your successful effort in trying to make these differences clear ! 🙂

But keep in mind that many UX terms and their definitions are being mixed and mangled by many, all the time. Just like in other not-so-strict areas and industries, these idioms are not set in stone. And translations of these terms also often add to a massive confusion. We're not using a Latin vocabulary or standardized jargon to name stuff (like doctors or construction engineers would do). Just like with the term "pop-up" – when uttered by anyone, I always ask what they mean by it. So the additional description of these concepts is a more helpful, valuable, and secure way to establish a consensus about any used term within a team.

Take for instance terms like Libraries, Snippets, Fragments, Assets, Elements, Symbols, Components. The way how Adobe is using them (and altering their use and names) is just a sign of the times, of a generation, a trend within their eco-sphere. Other developers might use different words for similar concepts. 

As a matter of fact, in many media areas, when technologies and jargon are eventually culminating into a standard, it often indicates the downfall of it...

[Preran]

Hi Peter_Villevoye,

Thank you for your insights. I completely agree with everything you said.

The reason I started this discussion ahead of time is that we will see a lot of Design System related features make their way into XD soon, and understanding these differences (even if they happen to change over time) would be useful to beginners like me. I was trying to get to a basic understanding of these myself, and I tried to do my best with the research from the Internet.

If there is anything terribly inaccurate, I would love that to be pointed out so that I can make the necessary changes.

Thanks,

Preran

[DonVadi]

Agreed, Design systems will be a great added feature to XD with a few different themes and start formats. Like the downloadable UI kits that are available. Where the user who has no idea what a design system is supplied one from XD to start thier work flow with a design system present an active. The main purpose of Design systems are to allow users to work in a uniform, orderly, discipline manner. Having fonts, colours, styles, and libaries present and active making the work process faster. Allowing many users on the same piece of work to pick up and start working by refering to the current design system. So yes I agreed adding a few themed Design systems as standard features on XD will be a great feature. 

[FrancoBits]

I hope XD supports any kind of design tokens in the future.

[Peter Villevoye]

"Design Tokens" ? You mean those JSON-based fragmets/rules for anything visual ? Those kinds of very production-inclined implementations are exactly what's so killing for every kind of tool (and its developer) to keep up with. In fact, that's why this strong schism appeared between design tools (and their users) and developers. And with the influx of more open source frameworks and brand (in)dependent technologies, I think it would be a bad thing if a tool like XD would relentlessly try to cater for all of them, both designers and developers. But that's just my humble opinion...

[FrancoBits]

Yeah, I can imagine adding tokens/variables compatibility adds a ton of complexity to the software.

Adobe XD is a very flexible tool and users ended up using it from a lot of things, from prototyping to animations. We're planning to use XD to build an UI Kit and any integration with our Design System/Tokens would be welcome. 

XD is receiving new features every month and reading that it'll receive Design System related features gives me hope haha