"Component libraries (also known as design libraries) are what many people associate with design systems: these thorough libraries house predetermined, reusable UI elements and serve as a one-stop shop for designers and developers alike to learn about and implement specific UI elements. Creating these libraries takes significant time and resources.

In addition to the visual elements, they include:

- component name
- description
- attributes
- state
- code snippets
- front-end and backend frameworks"

The Component Library

"Style guides contain specific implementation guidelines, visual references, and design principles for creating interfaces or other design deliverables. They tend to focus on visual aspects such as colors, typography, trademarks, logos, and print media, but also offer guidance on content ( such as tone of voice and language recommendations) as well as interaction design standards (also know as front-end style guides)."

The Style Guide

Sometimes used synonymously with component library, pattern libraries feature collections of UI-element groupings like layouts, content-structure, and/or templates. They can be thorough or as high-level as needed.

The Pattern Library

There are two important parts to a design system:
- The Design-System Repository
- The People who manage it - The Design-System Team

The Design-System repository mostly contains:
- A Style Guide
- A Component Library
- A Pattern Library

The Design-System team may vary in size based on the how vast the design repository is, but at a minimum, the team should include the following roles:
- 1 Interaction Designer
- 1 Visual Designer
- 1 Developer

They should collaborate to create the interaction design guidelines, visual examples, code snippets, and implementation specification.

University of Michigan - Ann Arbor

"Summary: A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels."

Design Systems 101

NNG Article Reference: Design Systems 101

Some benefits of using a design system are:

- Easier replication of design and development work
- Reduced strain on design resources, allowing focus on larger, more complex problems.
- Easier communication with between cross-functional teams because a unified "design" language.
- Ensuring visual consistency across products, channels and potentially siloed departments.
- Serving as an educational tool and reference for junior-level designers and content contributors.

Why use a Design System?                                                                           

Some reasons for not using a design system are:

- Creating and maintaining a design system is a time-intensive activity, requiring a dedicated team.
- It takes time to teach others how to use the design system.
- There may be a perception that project are static, one-off creations, which generally don't require reusable components.  

Why not use a Design System?

Elements of A Design System

There are three possible approaches to using a design system:

- adopting an existing design system
- adapting an existing design system
- creating your own proprietary or custom design system.

Generally speaking, the more custom the solution is, the more time and money it will take to implement. Thus, it is important to evaluate organization needs before choosing one of the above approaches.

Learn Before

Related

Learn After