All About Design System

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

Ant Design web template preview

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:

  1. #0A3155 is the primary colour of a brand;
  2. Assign #0A3155 as the value of brand-primary(global token);
  3. 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);
  4. Finally, assign cta-background-color to a component button-cta-background-color(component-specific token).

Types of Design Tokens

Spacingspacing-s, spacing-m, spacing-xl
Fontfont-family-heading, font-size-1, line-height-text
Colourcolor-blue, color-blue-text, brand-primary, color-background, opacity-5
Radiusradius-circle, radius-s
Sizesize-xl, square-icon
Shadowcard-shadow, page-header-shadow, shadow-5