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.
Try Design System Manager for yourself.
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
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
**Design Systems, when and how much?**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.
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.