How Design Tokens Revolutionize Design‑Development Collaboration

Why Talk About Design Token?

Design systems are large, complex projects. While design guidelines, component libraries, and asset repositories improve efficiency, variations in personnel, project lifecycles, and design trends create subtle, tricky problems such as ambiguous color choices, brand updates, and dark‑mode support.

Design tokens address these challenges by providing a unique, correct design decision that can be shared across the entire team.

What Are Design Tokens?

A token works like a nickname: the brand color #E5133A can be named WF-Primary. If the brand color changes, the nickname stays the same, ensuring consistency.

Design tokens offer four main benefits:

Design semantics become easier to understand.

Design output becomes more consistent.

Design changes are easier to maintain.

Design fidelity improves.

1. Design semantics are easier to understand

Complex design variables are turned into short, semantic tokens (e.g., color-button-border-focused) that instantly convey where a color should be used.

2. Design output becomes more consistent

When designers use tokens such as Red60, all components share the same color, eliminating confusion.

3. Design changes are easier to maintain

Updating a token in a JSON file instantly propagates the change across all platforms.

4. Design fidelity improves

Tokens enable automatic validation; if a developer references a non‑existent or incorrect token, the system reports an error, reducing verification effort.

Common design attributes—colors, spacing, typography, radii, shadows—can all be tokenized.

How to Create Design Tokens in a Design System?

Using the WorldFirst product as a case study, the team built a comprehensive design system with component and icon libraries. To reduce high coordination costs among UK, APAC, and front‑end teams, they adopted Component Tokens, which are tightly bound to specific components.

Tokens are named following a hierarchy of category, component, attribute, level, and state (e.g., color-button-background-primary-normal).

All token definitions are compiled into tables for reference.

Design Token in WorldFirst: Practice and Outlook

The team uses Figma with the “Figma Tokens” plugin to generate JSON token files that developers can copy directly, ensuring design‑development consistency.

Each UI component is linked to its corresponding token (e.g., a heading uses token H5-24 that encodes size, color, spacing, line‑height, etc.). This approach reduces the time to implement design changes from days to hours, and even minutes for simple theme swaps.

Design tokens also facilitate localization, accessibility, and cross‑platform consistency, allowing rapid adaptation for mobile, PC, and different regional color conventions.

Overall, adopting design tokens dramatically shortens the design‑development cycle and prepares the system for future expansion.

Thank you for reading; follow the Alipay Experience Technology public account for more SEE Conf 2022 talks.