What are Design Systems?
A design system is a comprehensive recipe of the user-facing elements that will make up a product.
What are Design Systems?
A design system is a comprehensive recipe of the user-facing elements that will make up a product.
You can think of a design system as a single source of truth for all the design-related things that go into designing and building a product.
At the core, a design system will contain definitions of components (technical documentation) and information on how those components will be used (functional documentation).
A design system can include a one or more design languages, style guides, and pattern libraries.
It can also include things like:
brand/identity standards
values
objectives
best practices for accessibility
Why use design systems? Glad you asked! Read on to find out 🙂
Why Use Design Systems?
Design systems are used to make sure there's one set of standard elements used everywhere, and everyone knows how to use them.
Benefits of Design Systems
Here are some big benefits of using a design system for your product.
Quality
The team alignment around design practices and the consistent use of elements and interactions across your product often leads to better products. That's because design systems themselves incorporate the unity principle of design, and allow us to define approaches to consistently leveraging the other principles of design throughout our product.
Speed
Once you've assembled the framework of a design system, it's often faster to build your product. That's because the team has:
a library of modular, reusable components to draw from and deploy.
a shared understanding of design decisions, so it's easy to understand how to implement components in context.
Scalability
A clear, consistent, and well-documented design system means there's less technical debt in your product's codebase. This often makes products easier to maintain and scale.
Iteration
Not having to focus as much time on building, quality assurance, and maintenance means your team can focus on building new features for your product. In many contexts, rapid iteration is a critical contributor to market success.
Industry Example: Shopify
Check out Shopify's design system (Links to an external site.) for an example from the industry.
Design Languages
What's a Design Language?
A design language is a definition of a style to drive design for a product or brand. It sets a standard for how to adhere to the style in things like the use of fonts, colors, and patterns.
Establishing a design language aligns a team on how to use components and style those components to achieve product goals in a consistent way, and it usually motivates why design decisions were made.
Design languages often include style guides and documentation.
Industry Example: IBM
Check out IBM's design language (Links to an external site.) for an example from the industry. It contains everything from the use of typography and color, to data visualization and layout, to the philosophy (Links to an external site.) behind the decisions they made (Links to an external site.).
Pattern Libraries
What's a Pattern Library?
A pattern library or (component library) is a collection of components and design patterns that lay out how to implement the design language specifically for a user interface. These can be symbols and assets themselves, along with descriptions of when and how to use them.
A pattern library might include code snippets for components and documentation related to each. For example, an entry for a button component in React might describe what props are available to be passed in, such as color and values for button states.
Industry Example: Ant Design
Check out Ant Design's pattern library (Links to an external site.) for an example from the industry. Notice how the pattern library fits in with the rest of their design documentation. Getting very familiar with the Ant Design docs will pay off in Labs!
Last updated
