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

University of Michigan - Ann Arbor

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.

Elements of A Design System

NNG Article Reference: Design Systems 101

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.

Learn Before

Related