What is a design system?
This is a complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards - UXPin.com
It's the collection of all of these documents that help reinforce a consistent brand. 65% of companies surveyed by Forrester in 2020 said they use one.
Examples of Design Systems
Atlassian's design system
Salesforce's design system (Lightning)
Shopify's design system (Polaris)
Building a design system
The steps to building a design system
Conduct a visual audit
By taking inventory of the CSS in use and the visual qualities of the elements.
Create a visual design language
This is the core of a design system. It consists of the components I would use to construct a digital product. It is made up of four main categories:
- Color
1–3 primary colors that represent the brand, including a range of tints and shades
- Typography
Headings and body copy should use the same font, while code should use a monospace font. Beware of implementation issues, caused by excessive use of web fonts
- Sizing and Spacing
It looks best when rhythm and balance are in place.
- Imagery
Having a plan and sticking to it, setting guidelines for illustrations and icons, and using the best image format
Create a UI/Pattern Library
Taking a look at the actual components of the UI, this means every button, form, modal, and image. Merge and remove what I don't need.
Document what each component is and when to use it
These standards are what separate a pattern library from a design system.
Parts of a design system
Design Repository
This can take many forms, but it often contains a style guide, a component library, and a pattern library.
People who manage it
A design system is only as effective as the team that manages it. It requires continuous maintenance and oversight to avoid becoming outdated.
Pros of a design system
Work can be created and replicated quickly and at scale.
It alleviates strain on design resources to focus on more complex problems.
It creates a unified language within and between cross-functional teams.
It creates visual consistency.
It serves as a reference for junior-level designers and content contributors.
Cons of a design system
It is time-intensive to create and maintain.
It takes time to teach others how to use a design system.
Perception of state projects, which generally do not require reusable components.
Key takeaways/learnings
I enjoyed this resource. I have always shied away from learning about design systems due to a fear of complexity and a steep learning curve. I realize now that, as a designer, what I am afraid to learn or do is where growth comes from. This resource is more theoretical than practical. I look forward to creating a design system, or rather, starting small by making a style guide and building from there on.
References
"What is a Design System? Design Systems 101 for Designers." 16 Aug. 2018, https://www.youtube.com/watch?v=wc5krC28ynQ.
"The Benefits of a Design System: Making Better Products, Faster." https://www.toptal.com/designers/design-systems/benefits-of-design-system.
"A comprehensive guide to design systems | Inside Design Blog." 24 Jun. 2019, https://www.invisionapp.com/inside-design/guide-to-design-systems/
"Design Systems 101: Nielsen Norman Group." 11 Apr. 2021, https://www.nngroup.com/articles/design-systems-101/
Thank you for reading my article, have a great day👋🏽