Over the years I have been a part of creating design system at various stages of their lifecycle. Below is some of documentation that I wrote for a company wide playbook for my previous employer. It helpfully outlines my essential thoughts on design systems.
What is a design system?
A design system is a documented library of interface tokens, components, patterns and best practices that is used to build products. Design systems are supported by a shared set of goals, a well defined process, and a plan to continuously improve.
Tokens
Tokens are the baseline of the user interface, they make up the visual look and feel and are crucial to maintaining consistency across even the most complex experiences.
Some examples of tokens include:
- Colours
- Typefaces
- Spacing and sizing
- Decorations: shadows, borders etc.
Components
Components are small, flexible pieces of an interface that can be combined into larger reusable parts and experience.
Some examples of components include:
- Buttons
- Form fields
- Alerts
- Headings
Patterns
Patterns are made up of several components into reusable parts, a single page may be made up of several patterns.
Some examples of patterns include:
- A login form
- A modal
- A navigation bar
- A shopping basket
Best Practices & Process
A design system is tricky to maintain and use if it is not clear how to do so. It is important that the system has clear documentation, and a well defined process for keeping the system up to date.
This might include:
- A tool that everyone on the team can use to browse and use tokens, components, and patterns.
- A way for anyone to raise issues and offer suggestions for the design system.
- Regular reviews to determine new additions, variations and deprecations of tokens, components, and patterns.
- A quality assurance process that reviews design and code to ensure quality, and identify areas the design system can improve.
Why we design in systems
We choose to design in systems because they can offer and improve consistency, collaboration, and productivity.
Consistency
We design in systems to give us the best chance of ensuring consistency in our interfaces. Consistency is an important part of what makes interfaces more usable, if people know what to expect they are often able to use your product faster, and more easily.
A mature design system should allow the whole team to create designs with less concern about consistency because they can feel confident that the design system they are using has built consistency into every output.
Collaboration
Design systems can be helpful for collaboration across the entire team, for example teams often find the handoff period between design and development to be a challenge, something a design system can help with. Ideally a design system can enable the whole team to be involved in the creation of new features from beginning to end, even team members from departments that have traditionally felt detached from the design process for example the marketing and sales teams.
Productivity
Design systems can, over time, increase the productivity of the whole team. Eventually a design system will enable designers to construct interfaces by assembling blocks into entire pages without having to start from scratch.
Design systems, when well documented can also help the development team to work faster, especially if there is a way for them to copy and adapt code snippets that have already been crafted, and tested.
In a mature design system it is possible to skip early design exercises like wireframing and prototyping because working interfaces can be built so quickly out of real tokens, components and patterns. So users can test something much more realistic in the same amount of time.