How to Make Design Systems Work

Design systems can improve design efficiency — or destroy great design

Every designer has faced the frustration of an inefficient design process. As a company grows and builds more design teams, expanding its focus each step of the way, it becomes increasingly difficult to maintain a consistent experience across all platforms.

Design systems are supposed to help us build better products, faster.

Enter the rise of design systems. A design system is a collection of design principles and elements that help us build better products, faster. This systemic approach to efficiency isn’t new — it transformed the manufacturing industry during the Industrial Revolution. Up to that point, manufacturing of goods was often completed by hand, which ultimately couldn’t keep pace with the demand for goods at scale. So companies began using machines, which allowed for faster production, more cost-efficient processes, and increased uniformity from unit to unit. However, the improved efficiency of automated processes came at the expense of artistry and creativity.

Similarly, design systems emerged from the need to automate manual design work quickly and efficiently. But despite helping to ensure consistent user experiences, reducing redundant work and improving workflows, they can often fail to foster experimentation and innovation. Sometimes, design systems are created without giving enough consideration to the users and makers, which discourages adoption and leads to frustration. Other times, design systems are treated as rigid pattern libraries which quickly become outdated, require a high level of maintenance, and don’t cover all use cases.

Design system now and in the future

Image description: A gravestone with “Skeumorphism 1998–2013” written on it. Image caption: Here lies static design.

In the past few years, designers have transitioned from thinking about design as something static and permanent to something alive and constantly evolving. Even the most innovative or critically acclaimed design has an expiration date, because it can’t keep up with our ever-changing environment and rarely reflects the current state of product. Because all design is temporary, the source of truth for products always lies in production.

This mindset should also contribute to how we build design systems. When a design system doesn’t reflect the latest state of product, it becomes obsolete. To build a lasting system is to build a system that easily evolves.

Ultimately, a design system is the functional implementation of a design language. Design language is the what. The design system is the how. Different teams use different words for different concepts and ideas, so it’s imperative to create a clear structure and vocabulary.

The main elements of a design language include:

Design principles, the core guidelines that inspire visual coherence in a digital ecosystem. They answer the question: What is the common but unique denominator that all your designs share? What makes Fluent, well, fluent? What makes Human Interface Guidelines human? Once established, these principles will guide your design decisions.

Systems based on principles help you create interfaces without limitation.

Design fundamentals include baseline principles for designing experiences — layout and spacing, navigation principles, color, typography, iconography, motion and interaction principles, accessibility, etc. These are guidelines that help you create any number of coherent experiences that feel like siblings; they belong to one family, and therefore bear a kind of resemblance.

Design fundamentals are baseline principles that help you create any number of coherent experiences.

Pattern libraries (also called component kits or style guides) are reusable building blocks that help you quickly compile somewhat limited experiences. A compact pattern library optimized for minimum internal dependencies is an efficient library.

Pattern-based systems let you compile limited interfaces from a limited number of components.

The greatest success comes from starting at the bottom and moving upward. First, define principles and fundamentals, then create effective pattern libraries based on these fundamentals.

Image description: A pyramid with “design principles” as the bottom layer, “fundamentals” in the middle, and “pattern libraries” at the top. Image caption: To build a lasting system, start from bottom up: first define principles, then fundamentals and patterns.

Pattern libraries will provide you and your teams with guidance and direction, while design principles and fundamentals will offer more autonomy to those who need it. All these moving pieces will help you travel effectively and efficiently through your design process according to your specific needs:

1. Design principles will help you set the scene during the first stages of design creation.
2. In early explorations, a combination of freeform design, fundamentals and pattern libraries will help you quickly visualize, test and validate concepts. At this stage, design systems should provide you with maximum flexibility and inspire as many ideas as possible.
3. When finalizing and preparing for implementation, realign with fundamentals and pattern libraries to implement design that’s consistent and mindful.

In short, you’ll want a high level of flexibility during exploration and high levels of precision during an implementation.

Building a lasting system

So how do you design a system that will last?

• Adjust for continuous change. Great systems aren’t rigid. They’re versatile. They change and adjust to the needs of their users. With all this constant change, design systems should be like the ship of Theseus — as their components change and are replaced, they should fundamentally remain the same vessel with the same purpose.
• Build systems like you build features. Identify stakeholders and interview users and makers. Uncover their pain points. Define a minimum lovable version of a system that can solve specific user problems. Basically, apply design thinking to help design the way you design.
• Divide and conquer. Every member on the design team should each own a fundamental area (e.g. color, typography, iconography). Owners will be responsible for keeping their area up to date, running health checks, and introducing and communicating changes.
• Drive adoption with excitement. Adoption takes time. As much as design systems need believers to thrive, begin with excitement and adoption will naturally follow. Ask your team what excites or inspires them in design, then build it.
• Support — don’t enforce. Governance isn’t about policing your system’s users, but supporting them. Test the system’s usability and interview your teams to help it evolve meaningfully over time.
• Build for familiarity. Our goal is to design products that are coherent and look and feel familiar to their users. When it’s hard to reach familiarity through visual design, aim to reach it through coherent experiences.
• Make it feel natural on every device. Your design language should not only create familiarity but also feel natural. When people choose a platform to use, they expect an experience that’s native and easy to predict. Design systems should not interfere with effective native patterns.

Like the rise of automated processes during the Industrial Revolution, design systems emerged from the need to automate manual design work. Both came at the potential expense of creativity. As designers, we must be committed to addressing all of the challenges that come with the advantages design systems can bring.

To build a lasting system is to build a system that strikes a balance between structured guidance and autonomy, helping us create consistent and mindful design. Like great design itself, truly useful design systems should inspire innovation and inspiration wherever they appear.

To stay in-the-know with Microsoft Design, follow us on Twitter and Facebook, or join our Windows Insider program. And if you are interested in joining our team, head over to aka.ms/DesignCareers.