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. To keep it even simpler, a design system is a combination of pattern libraries, style guides and guidelines on the structure and overall experience. Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the primary value of design systems.
Standards encompass both design and development. Standardizing things like naming conventions, accessibility requirements, and file structure will help teams work consistently and prevent errors.
Standardized components used consistently and repetitively create a more predictable and easy to understand application. Standardized components also allow designers to spend less time focused on style and more time developing a better user experience.
Working within an existing design system allows you to piece together flows and interactions quickly. This allows you to build an endless amount of prototypes and variants for experimentation, helping your team gain insights and data.
Even with all their benefits, buy-in for creating a design system can still be a hard sell. Designers can feel limited, but often these perceived weaknesses are the greatest strengths of a design system.
Design systems are not a fad or even an untested idea. For design to find the scale necessary to match the rapid growth of technology, component-based design and development is a proven solution.
A design system is living, meaning it will require ongoing maintenance and improvements as needs arise. Because your application is powered by the reusable components of your system, however, the application automatically inherits improvements to the system, lowering the effort to maintain the application. This is the power of scaling that a design system offers.
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.
So a Design System is not a deliverable, but a set of deliverables. It will evolve constantly with the product, the tools and the new technologies.
A design system should include:
- Purpose and shared values
- Design principles
- Brand identity & language
- Components & patterns
- Best practices
Design systems can also save you time and money. While it might feel like you're adding on another layer, design systems can actually help you increase your efficiency. To better understand how this applies to you, consider these questions:
- Scale - Are you designing a product (or products) that has more than 100 screens? Will your product grow significantly?
- Consistency - Do you want your products to have consistent branding, look and feel? Does your product currently have 15 different button styles?
- Efficiency - Do you want your UI designers, UX designers, and front-end developers to work faster and save time?
- Teamwork - Do you have projects where there's a lot of handoff between designers or multiple designers work on the same project at once?
Many of the world's leading brands have made their design systems public, contributing their ideas and processes to the design community at large.
Their design systems bring together branding, color, tone of voice, typography, animation, data visualization, and more to form the design language that power some of the biggest brands.
Examples:
https://atlassian.design
https://airbnb.design/building-a-visual-language
https://polaris.shopify.com
https://www.carbondesignsystem.com
https://design.trello.com
https://design.firefox.com
Creating and maintaining a design system is a significant amount of work, but if we do it well in the beginning it will be much easier and faster to build features and products.
If you have any thoughts or questions, please don't hesitate to reach out. We'd love to hear your stories about how you implemented a design system or the challenges you're facing.
