Design Systems

By

|

Created on

|

Last revised on

Reading time: 6 min

What Is a Design System?

A design system provides a single source of truth for design components. However, it is not only a collection of the reusable assets and components you use to build a digital product. It also guides on why and how to use the design components.

A design system assists a consistent and accessible user experience. In addition, it enables time-saving features and better, faster output. A good design system empowers designers to code, and engineers to design.

What Are the Elements of a Design System?

A style guide or pattern library can be a starting point for a design system, but they are not the only components. Depending on the case, the elements and grouping of a design system can vary.

Examples of design system elements are:

  • Brand guidelines
  • Design guidelines
  • Visual language
  • Content guidelines
  • Accessibility
  • Style guide (documentation)
  • Component and pattern library
  • Tools

To see an example, check for example the Atlassian design system.

When to Build a Design System?

A design system is not a silver bullet. If you work with a fast-moving small team on a single app, you might end up creating solutions for problems you do not have.

The economy of scale in a design system works in your favour when sharing UI components across many projects. Building a design system is beneficial for example when you want to

  • Decrease inefficiencies that come along when your team hits big enough scale.
  • Remove knowledge silos.
  • Ensure seamless experience across product portfolio.
  • Reduce implementation decisions.
  • Reduce waste (over documentation etc).

The Process of Building a Design System

During the whole process, remember that change happens on two dimensions – there is the business side of change and the people side of change. If you ignore the latter and people don’t know why the change will take place, cannot influence the changes, and don’t have enough knowledge of how to change, there is a small chance the change will happen successfully.

Determine Usefulness

  • Before beginning the process, take a moment to think about the team you’ll need to bring the design system to life. Who needs to be involved? Depending on the company size, the number of stakeholders can vary a lot. They can be for example from marketing, IT, product teams, or third parties. Internal stakeholders can be for example product managers, UX designers, visual designers, content/copy writers, motion designers, frontend developers, producers, and project managers.
  • Perform a high-level analysis to determine if building a design system is beneficial in your case and, with the relevant stakeholders, decide whether or not to start using a design system.

Conduct Research

Conduct research and collaborate across disciplines to understand the scope of your system(s).

  • Understand the brand guidelines
  • Analyse the current design (and development!) process and tools
  • Do a visual audit and take inventory of your current design, whether that’s the design of an app, a website, or some other digital product.

Decide on Tooling/Technology

Depending on the scope, invest in tooling/technology on an appropriate level. Depending on budget and needs, you can select one of three approaches to using a design system:

  • Adopt an existing design system in its entirety
  • Adapt an existing design system to your needs
  • Create your own proprietary or custom design system

There are pros and cons to each. Custom design system can be an option if the organisation has particular needs that cannot be met by open-source design systems.

On the other hand, using an existing design system can save time and money. However, it is good to remember that you agree upon a standard and you will have to either replace or update some UI elements over time. In addition, if you have to make a lot of customisations and adjustments to the existing design system, the cost savings you may have gained will diminish.

Design and Build

Create Design and Content Guidelines

  • For example, the visual design language is made up of the distinct elements that you’ll use to construct your digital product: colours, typography, sizing and spacing, imagery, possibly motion or sound.

Create a Component/Pattern Library

  • This step looks at the actual components of your UI – that means every button, form, modal, and image you will need. Divide the different UI elements into categories such as elements, components, regions, and layouts.
  • Remember that building design system patterns is an iterative process! Do not focus on building all the patterns in one go but start by identifying the best architecture for your pattern library. Then build it one by one.
  • Building components/patterns in sprints can be a good way to ensure quick learning across the entire team. Organise regular retrospectives to analyse progress and make necessary improvements.

Document What Each Component Is and When to Use It

  • Documentation and standards are what separate a pattern library from a true design system. Document everything in your design system by defining what the component is, when you should use it, and what are the related rules and recommendations.
  • Make sure you don’t separate the codebase from your documentation. This can lead to duplicate work and inconsistencies that could derail your entire design system.

Create a Process for Utilisation and Continuous Development

  • Ensure that all teams use the same shared language and address the possible questions/concerns.
  • Make sure the responsibilities are clear. There are multiple ways to arrange the design system governance – the governance responsibility can be given to an individual or a group of individuals, one team, or several people from several teams. You can also use a combination of these models.
  • What happens for example when the horizontal tabs component gets a bug fix? Establish these processes for contribution and bugs, and create feedback loops, to ensure ongoing success of the design system. Make sure you improve, not worsen, the workflow for designers and engineers.
  • It is also vital to communicate changes and updates to the entire organisation. Ship updates regularly and with a change log. The log should tell users what changes were introduced in the new version and how the upgrades will impact their work.

Maintain/Develop

  • Approach a design system as continuous development – design systems and their maintenance processes are always evolving. A design system should have its own roadmap and backlog.

Move up to

Sources

  1. Fanguy, Will (2019). A comprehensive guide to design systems. Retrieved 7 October 2021.
  2. Mounter, Diana (2017). Design Systems, when and how much? Retrieved 7 October 2021.
  3. Farino, Paul (2017). DesignTalk Ep. 65: Design systems – Zero to one. Retrieved 7 October 2021.
  4. Anne, Jina. Design Systems Handbook / Designing your design system. Retrieved 7 October 2021.
  5. Storybook. Introduction to design systems. Retrieved 7 October 2021.
  6. Hiatt, Jeffrey M. and Creasey, Timothy J. (2012). Change Management: The People Side of Change (Second Edition). Prosci Learning Center Publications.
  7. Prosci. The Prosci ADKAR Model eBook.
  8. Babich, Nick (2022). How to Build a Design System: 10-Step Guide. Retrieved 4 September 2023.
  9. Webflow. 6 outstanding design system examples you can clone for free. Retrieved 4 September 2023.
  10. UXPin. Design Systems: Step-by-Step Guide to Creating Your Own. Retrieved 4 September 2023.
  11. Webflow. Design systems: A beginner’s guide to building one that will last. Retrieved 4 September 2023.
  12. Nielsen Norman Group. Design Systems 101. Retrieved 4 September 2023.