DEV Community

loading...
Cover image for What's a Design System and why you need one
GraphQL Editor

What's a Design System and why you need one

tomekponiat profile image Tomek Poniatowicz Updated on ・2 min read

Looking for a way of improving your design-development workflow? You need a design system! Why? Because it will help you work better, much faster & will take your team collaboration to the next level!

Design system is a very popular concept, arousing a lot of emotions and interest recently ... even the government of United States of America has one they call U.S. Web Design System :)

What's a Design System

A design system is a collection of reusable graphical components, design standards, style guides, which define a common visual language for product teams. It accelerates the design process and bridges the gap between teams involved in building a final product by having clear graphics standards, that makes assembling websites from components super easy. So basically the design system is a rulebook for graphical and development teams which we can breakdown like that:

  • Design System – the complete set of design standards along with principles, patterns & code components to achieve them,
  • Pattern Library – a subclass of a design system which defines allowed design patterns,
  • Style guide – a subclass showing how products should look, containing use cases for UI patterns, typography etc.

Design System

Source: Zack Rutherford for Studio by UXPin

The benefits

Design systems provide consistency in designing new elements of your company or product visual identification. Design system creates straightforward and beautiful experiences for end-user as well as product team makes collaboration a lot easier for:

  • designers as they can breakdown the design-process into smaller parts, easier to work on, manage, change than the whole webpage,

  • developers so they clear vision of how to build required components to maintain the unified styles,

  • product owners/managers as component-based approach makes requesting development teams for additional page elements a super easy process

Examples

You have all probably heard about the famous Material Design by Google:

Material Design

but that's not the only one you can draw inspiration from as big companies like IBM, Audi or Atlassian make their design system publicly available. Here you can take a look at a couple of them:

Carbon React Components by IBM
Carbon React Components by IBM

Zendesk Garden
Zendesk Garden

Atlassian Design System
Atlasian

Polaris by Shopify
Zendesk Garden

Looking for more?

Make sure to visit https://designsystemsrepo.com/design-systems/ for more samples & inspirations!

Discussion (8)

pic
Editor guide
Collapse
emmabostian profile image
Emma Bostian ✨ • Edited

Hi Tomek! Nice post! We should be careful when using the term Design System to only describe the physical design assets and branding guidelines! A Design System is made up of the Design Language (design assets like Sketch Kit, AI Kit, etc. and branding guidelines such as accessibility, motion, etc.), Component Library (coded components usually in React, Vue, Angular, or another popular JS library/framework), and the style guide (which are the physical websites you've linked above that document the design language & component library).

We often see designers use the phrase "Design System" to describe the Design Language and developers use the phrase "Design System" to describe the Component Library & Style Guide, but it's really all of these things.

You can take a look at my slides if you would like to learn more :) slides.com/emmawedekind/design-for...

Collapse
tomekponiat profile image
Tomek Poniatowicz Author

Thanks, good point :)

Collapse
emmabostian profile image
Emma Bostian ✨

No worries though, I see this all the time and it's because Design Systems don't have a ton of information out in the world yet!

Collapse
peterwitham profile image
Peter Witham

Hi Tomek,

Thanks for this post, I think it helps to clarify and categorize the various parts for those that are looking to understand what a design system is. I think for some the term still equates to colors, fonts, and just the style structure. I think for old school designers like myself it can be hard to not think of things like CSS when we hear these newer terms.

Collapse
giorgosk profile image
Giorgos Kontopoulos 👀

@tomekponiat
Great post thanks for taking the time to create a write up

I have been new to this world of design systems and component libraries and I was wondering whether there is any tool that can help ease the pain transitioning from the designs to actually creating the components/patterns.

@emmawedekind thanks for the clarification makes sense

Collapse
rohovdmytro profile image
Rohov Dmytro

What is the diff between DS and guidelines?

Collapse
tomekponiat profile image
Tomek Poniatowicz Author • Edited

Style Guide/Guidelines is a subclass of a proper design system, while design system, as mentioned by Emma, is more complex and contains Design Language, Component Library and Style Guide.

Collapse
rohovdmytro profile image
Rohov Dmytro

Thanks! Good to know.