A design system is a shared design language used to solve product problems and create solutions. It is a visual language that reflects the product’s characteristics, structure, and purpose.
Table of Contents
Why do we need a design system?
- Ensure a consistent design pattern and accessible interactions to help users learn faster and reduce confusion when recognizing and using each component.
- Reusable, pre-defined modules can save time during development, even without a full design.
Design Systems Principles
When building a visual system or designing an interface, it can be difficult to decide which solution is best or most aligned with the product’s direction. Integrating brand identity and product principles into a design system can help the team reach an agreement based on pre-defined values.
My Favourite Design Systems
| Ant Design |
| Material Design by Google |
| 🔗 Bootstrap |
| 🔗 Carbon Design System by IBM |
| 🔗 Lightning Design System by Salesforce |
| 🔗 MailChimp Pattern Library |
| 🔗 Polaris by Shopify |
| 🔗 Semantic UI |
Ant Design
One of the most popular React UI frameworks, providing a 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 offers an advanced UI with higher-level components such as an admin dashboard, charts, search box, notification badge, and count-down – all free!
Their Sketch plugin, Kitchen, is a powerful tool combining Anima and InVision Craft. It has useful features like an icons library, auto-layout, data population, colour palettes, and a module generator. This helps designers quickly apply Ant Design components.
☞ Ant Design: Guidelines | Components | Design Resources
☞ Pro Version: Preview | Docs | Components | Design Resources
Material Design
A visual language inspired by the physical world has revolutionized the industry, creating a unified design system. The level of detail in the guidelines and specifications is well 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 better express the brand. However, it is not very creative or flexible to do so with strict specifications. Designers who strictly adhere to the specs may end up with a design that lacks individuality, similar to Google’s.
☞ Material Design: Components | Docs
Design Tokens
What are Design Tokens?
Design tokens are values like spacing units, font sizes, colour hex values, and sizes applied to modules and templates to maintain consistency and maximize design efficiency in a design system. In the engineering world, it does the same.
Long before design geeks discussed design systems, developers were already using systematic methods like SCSS or Sass to store visual design attributes. This 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;- Assign
#0A3155as the value ofbrand-primary(global token); - The colour is often used as the background colour of a CTA, so assign
brand-primary to cta-background-color(alias token – relates to specific context); - Finally, assign
cta-background-colorto a componentbutton-cta-background-color(component-specific token).
Types of Design Tokens
| Spacing | spacing-s, spacing-m, spacing-xl |
| Font | font-family-heading, font-size-1, line-height-text |
| Colour | color-blue, color-blue-text, brand-primary, color-background, opacity-5 |
| Radius | radius-circle, radius-s |
| Size | size-xl, square-icon |
| Shadow | card-shadow, page-header-shadow, shadow-5 |
Constance Tang 