Highlighted

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

Adobe Employee ,
Dec 13, 2019

Copy link to clipboard

Copied

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.

 

designsystem.png

 

 

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:

 

 

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:

 

 

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:

 

 

Important References:

 

TOPICS
How to

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Adobe Employee ,
Dec 13, 2019

Copy link to clipboard

Copied

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.

 

designsystem.png

 

 

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:

 

 

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:

 

 

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:

 

 

Important References:

 

TOPICS
How to

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 13, 2019 2
Adobe Community Professional ,
Dec 14, 2019

Copy link to clipboard

Copied

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, FragmentsAssets, ElementsSymbols, 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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 14, 2019 0
Adobe Employee ,
Dec 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 17, 2019 0
New Here ,
Jan 19, 2020

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 19, 2020 0
Contributor ,
Jan 20, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 20, 2020 0
Adobe Community Professional ,
Jan 20, 2020

Copy link to clipboard

Copied

"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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 20, 2020 0
Contributor ,
Jan 21, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2020 0