All About Design System

2020-08-22 – Updated Design Token section

Design Systems

Why we need a design system?

  • Consistent design pattern lets 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 systemPlatform
Ant Design
Web, React Native
Material Design by GoogleiOS, Android, Flutter, Web

Ant Design

Ant Design web template preview

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 common 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 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 that helps designers apply Ant Design components on the fly.

Ant Design: Guidelines | Components | Design Resources
Pro Version: Preview | Docs | Components | Design Resources

Material Design by Google

A leading visual language inspired by the physical world and also inspired the industry to build good design system. The level of detail in guidelines and specifications are obviously 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 difficult to follow

With Material Themes and the recently introduced “shape” customization, designers can express the brand better. However, still, it is not very creative and flexible to do it with a straight specification. Designers deeply follow the specs might generate another Google-like design lacking individuality.

Material Design: Components | Docs

Other Design Libraries

Lightning Design System by Salesforce
MailChimp Pattern Library
Polaris by Shopify
Semantic UI

Developing a Design System

What are Design Tokens?

In a design system, there are values like spacing units, font sizes, colour hex values, sizes repeatedly applied to modules and templates to maintain consistency and maximize design efficiency. 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 to ensure scalability and unity across all product experiences, so it is not something entirely new to us.

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