Companies like Airbnb, Uber, and IBM have changed the ways they design digital products by incorporating their own unique design systems. By utilizing a collection of repeatable components and a set of standards guiding the use of those components, each of these companies has been able to change the pace of creation and innovation within their teams.
Many organizations have what they consider to be a design system, but these collections typically amount to no more than a group of elements and code snippets. While a style guide or pattern library can be a starting point for a design system, they are not the only components. Let’s dig into the fundamentals of design systems, plan how you can build and implement one in your organization, and explore several examples of organizations that are using design systems to drive success.
“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.” –Chris Messina, tech evangelist and former Developer Experience Lead at Uber
The importance of design systems
What is a design system?
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
What’s the difference between a design system and a style guide or pattern library?
A design system isn’t only a collection of the assets and components you use to build a digital product. According to Emmet Connolly, Director of Product Design at Intercom, “… most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”
Marco Suarez, one of our product designers here at InVision, adds that “understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.”
More simply put, the difference is in the standards and documentation that accompanies the assets. With a guide on why and how to use them, design components because easier to use and clearer to discern.
“Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well.” –Diana Mounter, Design Systems Manager at GitHub
More resources: Design systems overview
from Diana Mounter, Design Systems Manager at Github
Examples from building design systems at GitHub, how this can improve the design and development workflow, and when you need to start building design systems and how much of a system you might need.
from the InVision Blog
In order to quickly iterate with confidence, design teams need access to a single source of truth that allows for a scalable UI language and streamlined UX guidelines. With brand touchpoints reaching over multiple channels and platforms, consistent user experience can be assisted by leveraging a central design language.
Building a library of design patterns, rules, and UX guidelines prevent inconsistencies when shipping products at scale.
from Brad Frost’s Atomic Design
As the number of devices, browsers, and environments continues to increase at a staggering rate, the need to create thoughtful, deliberate interface design systems is becoming more apparent than ever.
Enter atomic design.
From Brad Frost’s Atomic Design methodology, 2013
from Intercom Blog
UI methodologies like Atomic Design bring logic and structure to individual screens. Now it’s time to extend that thinking to every aspect of your product.
from Smashing Magazine
I’ve yet to encounter a client that would be genuinely, passionately excited about the atomic design methodology or a module naming workshop. However, everyone does get passionately excited about time-saving features and better, faster output that they can engage with … Next time you encounter somebody not seeing the benefits of a modular approach, try to convince them of the tangible benefits and the output, not the workflow you’re using.
I’ve been involved in no fewer than three different initiatives to create a design system in my career. 10 years ago, we simply called them pattern libraries. A few years ago, Atomic Design entered the scene and provided a more comprehensive grammar around design systems. Once Google unveiled Material Design in 2014, the concept of design systems had finally matured.
Now, the design system concept seems to spawn an article every day. The theme of these articles typically espouse values of systems as providing consistency, efficiency, and scale. But at what costs? Are design systems a panacea for all that ails UX design?
Projekt202 Senior UX Designer Anne Grundhoefer and Solutions Architect Drew Loomer provide an in-depth, informative look at the many ways that design systems have significantly impacted the enterprise user experience.
Your technical approach doesn’t matter as much as creating a living, breathing system that’s flexible, maintainable, stable, scalable, and successful in the long-term. —Katie Sylor-Miller Senior Software Engineer – Design Systems team at Etsy
Building a Design System
What are the key steps and benefits to building a design system?
- Conduct a visual audit
The first step in building a design system is to do a visual audit of your current design, whether that’s the design of an app, a website, or some other digital product. Taking inventory of the CSS you’re using and the visual qualities of the elements can help you gauge how much of an undertaking this process might be.
- Create a visual design language
The visual design language is the core of a design system. It’s made up of the discernible components that you’ll use to construct your digital product. Your visual design language is made up of four main categories, and you should consider the role each of these design elements plays in every component on the screen.
Common colors in a design system include 1–3 primaries that represent your brand. You may want to include a range of tints—a color mixed with white—and shades—a color mixed with black—to give your designers a few more options.
Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keep it simple to avoid overloading and confusing your user. Keep the number of fonts low; it’s not only a best practice of typographic design, and it also prevents performance issues caused by excessive use of web fonts.
- Sizing and spacing
The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
The key to success with imagery in your visual design language is having a plan and sticking to it. Set guidelines for illustrations and icons, and use the best image format for the situation.
Unlike the visual audit you’ve already conducted (which looked at the visual qualities of your design elements), this step in the process looks at the actual components of your UI. Collect all of the parts and pieces of your UI currently in production. That means every button, form, modal, and image. Merge and remove what you don’t need.
This step is important. Documentation and standards are what separate a pattern library from a true design system.
Before beginning work on your design system, take a moment to think about the team you’ll need to bring it to life. Who needs to be involved? Spoiler alert! You’re going to need more than just designers.
Jina Anne, design systems advocate and former lead designer at Salesforce
The easiest way to get started building your design system is to use the Craft Library plugin in Sketch. The Craft Library plugin lets you generate a custom style guide inside of Sketch, including color palette, fonts, and text styles.
To keep files in sync with your team, you can push changes to any symbols in your shared library as well as share symbols, text, and color styles. If you share the Library via Dropbox or another shared folder, Craft will even notify you when new updates to your assets are available in the cloud, and pulling down changes only takes a single click.
For a great guide on how-to practices, we’ve released our Design Systems Handbook to help you learn how you can create your design system and help your team improve product quality while reducing design debt.
Stay tuned for our Design System Manager scheduled to be released soon. Here is a preview of what you can do with InVision DSM:
- Create a single source of truth
One place to manage all brand and UX components, so teams can stay in-sync
- Design with ease
Access libraries directly from Sketch or InVision Studio to push and pull changes—from assets to deeply nested symbols—all with a click
- Iterate with confidence
Changes sync to the whole team, and designers can switch to the latest version or roll back changes at any time
- Manage updates collaboratively
Roles and permissions provide complete control over who can view or edit each library within the system
- Share with external teams
An automatically generated and customizable web portal lets any stakeholder preview and use design, documentation, and code
- Keep code in sync
No more manual updates or time wasted tracking down updated specs—developers can use the DSM API to integrate directly into live code
- Protect confidential information
Enterprise-ready features like SSO, Private Cloud, and more protect your company’s most strategic assets
More Resources: Building a Design System
Paul Farino will discuss the lifecycle and iterative nature of building a design system. He’ll cover creating buy-in with internal stakeholders and tactical ways to scale and maintain a design system.
From A List Apart
Approach a design system as you would a marathon, not a sprint. You’re laying the groundwork for an extensive effort. By understanding your organization through its product portfolio, you’ll strengthen a cornerstone—the design system—that will help you achieve a stronger and more cohesive experience.
from the InVision Blog
Maintaining the system over time is extremely challenging. What happens when the horizontal tabs component gets a bug fix? What happens when that card pattern gets a visual design overhaul? What happens if the data table pattern gets a team 90% there, but needs tweaks in order to fully meet their needs? Establishing these processes before the system is complete is critical to its ongoing success.
Selling is a process, probably more than a single meeting. Look for teaching moments. Use your storytelling skills. Show your team that a better way is possible. Come up with a memorable name and say it a lot. Get people excited with a splashy presentation. Channel your inner Don Draper or 2007 Steve Jobs.
From ‘You Gotta Love Frontend’ Conference 2016
Topics covered in this talk include strategies for how to approach, design and build an effective design system, how to successfully maintain the system to ensure ongoing usefulness, and elements that design systems need to be sustainable that are critical for success.
Examples of design systems (Who’s doing design systems right)
Atlassian’s design system
Atlassian’s design system is about using personality to connect tools with people—or as they describe it, “practical with a wink.” It’s personal, peppy, and all about making a bold brand statement. “Dragon’s blood,” “cheezy blasters,” “hairy fairy,” “herky jerky,” and “sodium explosion” are all names of colors referenced in their secondary brand palette.
Accessibility is important to Atlassian and their design adheres to standard contrast ratios that ensure users with low vision can see and use their products. In essence, the Atlassian brand is optimistic and focused on being “human” over “humorous”.
Salesforce’s Lightning design system
Learn how the Salesforce UX team took it further with a living design system to help maintain brand alignment and quality.
Shopify’s design system
Shopify’s design system is called Polaris. It’s a system that reflects Shopify’s global, immense presence. It’s about scalability and ease of use. With precision in their copy and design, Shopify is solely focused on the experience of their merchants.
It’s easy to see how Shopify helps businesses manage global complexity, with an experience that gives “even the most inexperienced entrepreneur the best chance to succeed.”
Accessibility and intentional design areparamount in Polaris. Scaling a business is like climbing a mountain, so their design decisions seek to make any user feel like they’re up the challenge.
For more examples, check out our previous post on design systems from some of the world’s leading brands.
More resources: Design system examples
from the InVision Blog
The overall structure of IBM’s corporate design program is “People + Practice + Places.” The motto represents the idea that “careful attention to those 3 things will bring the culture change we seek with respect to design in the company.”
Practice, the middle pillar, is a crucial part of the equation and the charge of the IBM Design Practices team. The team knew they wanted to build out 3 distinct Practices at first: Research, Language, and Thinking.
They started with the IBM Design Language.
from Airbnb Design
While this was a monumental task that ended up requiring efforts from many of our product teams, we found that creating our Design Language System was worth the investment and a huge leap forward.
“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.” —Alex Schleifer, VP of Design at Airbnb
Unlike cobbling together design components like pattern libraries and style guides, a design system functions as “the official story of how an organization designs and builds products.” It includes ingredients, as design system expert and Atomic Design author Brad Frost says, like design principles, UI components, UX guidelines, code standards, processes, design toolkits, code repositories, resources, and more.
Design systems have the power to transform a typical organization into a powerful product design force. So we recently hosted a cozy fireside chat with design systems experts Brad Frost, Jina Anne, Marco Suarez, and Aarron Walter to unpack key insights—and answers to all your burning questions.
InVision Design System Manager (DSM) is a platform that provides a simple, unified way to design at scale by helping teams create, maintain, and evolve a powerful design system. The DSM platform includes a Sketch plugin, a web view, and a set of APIs—everything a company needs for a powerful design system, including the potential for multiple libraries. DSM serves as home base for the design team—a shared structure housing the collective knowledge of thoughtful design decisions.
Don’t have a DSM account yet? Be sure to sign up today. Current DSM users, sign in below to try out some of our newest features.