Skip to content

Introduction

A Design System is the single source of truth that groups all the elements that will allow the teams to design, realize and develop a product. It is a library of reusable components and guidelines that people within a company can combine into interfaces and interactions.

Design Systems are composed of tangibles and non-tangibles elements: patterns, components, guidelines but also such things as brand values, mindset, shared beliefs, and shared ways of working.

Why Use a Design System?

Design systems, when implemented well, can provide a lot of benefits to a design team:

  • Design (and development) work can be created and replicated quickly and at scale. The primary benefit of design systems is their ability to replicate designs quickly by using premade UI components and elements. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.

  • It alleviates strain on design resources to focus on larger, more complex problems. Since simpler UI elements are created already and reusable, design resources can focus less on tweaking visual appearance and more on more-complex problems (like information prioritization, workflow optimization, and journey management). While this payoff might seem small when you create only a small number of screens, it becomes significant when you must coordinate efforts across dozens of teams and thousands of screens.

  • It creates a unified language within and between crossfunctional teams. Especially when design responsibilities shift or when teams become geographically dispersed, a unified language reduces wasted design or development time around miscommunications. For example, the functionality or appearance of a dropdown menu would not be debated, since that term is reserved for a specifically defined element within the design system.

  • It creates visual consistency across products, channels, and (potentially siloed) departments. Particularly, when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand. Design systems provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem. As a bonus, any major visual rebranding or redesigns can be managed at scale through the design system.

  • It can serve as an educational tool and reference for junior-level designers and content contributors. Explicitly written usage guidelines and style guides help onboard individual contributors who are new to UI design or content creation and also serve as a reminder for the rest of the contributors.

What is Material design system?

Material 2

Start exploring the design-system patterns and general guidelines at material.io

Material is the design system from Google. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers and helps teams quickly build beautiful products.

For more information on the latest updates within the design system visit: Release Notes