Learning Resources for Software Engineering Students »
Author(s): Tan Heng Yeow
The following definition best encapsulates the essence of a Design System.
A Design System is the Single Source of Truth which groups all the elements that will allow the teams to design, realize and develop a product. --Blog post from UX Collective
The typical structure of a Design System looks like this:
Figure 1. Typical structure of a Design System (source)
Below is a brief explanation of the parts that make up a Design System. The explanation includes reference to a living example, Polaris, Shopify's Design System.
Figure 2. Typical Design and Development process (source)
Consider the typical design and development process. Designers come up with sketches, wireframes and hand them over to the developers to implement them through code. Here's the problem:
Designers are looking at multiple directions and solutions, constantly comparing and tweaking their design. On the other hand, developers are ultimately accountable for shipping code. They focus on making sure that the correct architecture is in place, thinking about security and the performance of the product, hoping that the designers already have all the design details thought out.
Over time, it is likely that many teams working on different parts of the product will create UI/UX design inconsistencies in the product. For example, HubSpot explained how they found UI/UX design inconsistencies in their interface after auditing their User Interface (UI) components.
Here is another example of a conversation held at Modus Create, a digital product agency, highlighting a similar problem.
Figure 3. Conversation at Modus Create (source)
Front-end frameworks such as Bootstrap have reusable components that save a lot of time and effort. However, there are a few disadvantages:
Style guides present components that can be used quickly in mockups. This is an example of Tor's style guide. However, there are a few disadvantages:
Design Systems combine the good parts of front-end frameworks and style guides.
Benefit 1: Shared Common language
Design Systems act as a Single Source of Truth. This allows the whole organization to access changes and updates. Any member of a team would have complete documentation of design mock-ups at their fingertips. This results in fewer misunderstandings and much better implementation of designs.
Design Systems also elimate knowledge silos. There is a lesser risk of context gaps being formed because information is shared across teams.
Benefit 2: Reusability
Design Systems provides a shared library of reusable components. When every component in a design system is reusable, teams can use these reusable components to quickly assemble and implement new pages.
As a result, this process substantially decreases the possibility of teams having to duplicate components, which means extra resources for focusing on more valuable things such as customer experience.
Benefit 3: Faster Development
When products are integrated with a Design System, updates are only required to be carried out in one place. This blog post from Modus Create explains how Design Systems helped them to achieve faster development speed.
In a blog post from Airbnb, the team explained how they were able to create nearly 50 screens within just a few hours by using their Design System. It was also mentioned by the team that they build and release features on all native platforms at roughly the same time now. Development is faster for them now since product engineers can focus more on writing the feature logic rather than code that is responsible for the presentation layer of the application.
There are paid solutions out there to help organizations build Design Systems. However, there are open source tools to assist you in building your own Design System.
Figure 4. Storybook (source)
Storybook is a development environment for UI components. It helps you build UI components in isolation and offers handy features to visualize any mock data you supply. It helps in setting up the pattern library of a Design System.
Figure 5. React Styleguidist (source)
React Styleguidist simplifies creating and maintaining a UI documentation site. It allows you to create pages in Markdown and import UI components. It helps in setting up the style guide of a Design System.
This website presents a comprehensive and curated list of design systems.
Out of the list, there are some noteworthy open-source Design Systems that you can use, contribute or take reference from:
Design Systems keep things in order by acting as a Single Source of Truth, providing a common shared language across the organization. It encourages reusability of components, resulting in faster development time.