A design system is a common design language used to solve (product) problems and construct solutions. It is a visual system and reflects the characteristics, structure, and focus of the product.
Table of Contents
Why we need a design system?
- Ensure consistent design pattern and accessible interaction to let users learn faster and reduce confusion to recognise and use each component;
- Reusable, pre-defined modules save time for development even without a complete design.
Design Systems Principles
When we build a visual system or design an interface, we sometimes encounter ambiguities in deciding which solution is better or more in line with the product direction. Therefore integrating brand identity and product principles into a design system can help the team find agreement based on pre-defined values.
My Favourite Design Systems
|Material Design by Google|
|🔗 Carbon Design System by IBM|
|🔗 Lightning Design System by Salesforce|
|🔗 MailChimp Pattern Library|
|🔗 Polaris by Shopify|
|🔗 Semantic UI|
One of the most popular React UI framework and relatively complete pattern library for enterprise applications.
- Detailed guidelines backed by design principles;
- Organised and nested components for general situations and states;
- Support data visualization and animation, powered by AntV and Ant Motion;
- ⚠️ Some docs and resources are not fully translated from Simplified Chinese into English
The Pro version provides an advanced UI solution with higher-level components like admin dashboard, charts, search box, notification badge and count-down, and it’s FREE!
Their Sketch plugin, Kitchen, is a powerful tool combining Anima and InVision Craft, with handy features like icons library, auto-layout, data population, colour palettes, and module generator helps designers apply Ant Design components on the fly.
Material Design by Google
A leading visual language inspired by the physical world and boosted the industry to build a standard design system. The level of detail in guidelines and specifications are worth learning.
- Textbook well-detailed guidelines;
- Includes fundamental components;
- Intuitive transitions to improve the experience;
- Shaping your brand with customizable themes;
- Cross-platform development;
- ⚠️ Exclusive components like the Floating Action Button, Backdrop, Chips look stylish but not very useful on other applications;
- ⚠️ Elevations (cast shadows) – too many levels make it challenging to follow
With Material Themes and the recently introduced “shape” customisation, designers can express the brand better. However, it is not very creative and flexible to do it with strict specification. Designers who intensely follow the specs might generate another Google-like design lacking individuality.
What are Design Tokens?
There are values like spacing units, font sizes, colour hex values, sizes repeatedly applied to modules and templates to maintain consistency and maximise design efficiency in a design system. In the engineering world, it does the same. Long before design geeks talked about design systems, developers were already using systematic methods like SCSS or Sass to store visual design attributes. It ensures scalability and unity across all product experiences, so it is not something entirely new.
Assigning Design Tokens to Components
Let’s take “button” as an example:
#0A3155is the primary colour of a brand;
#0A3155as the value of
- The colour is often used as the background colour of a CTA, so assign
cta-background-color(alias token – relates to specific context);
- Finally assign
cta-background-colorto a component
Types of Design Tokens