How Ant Design V5 Revolutionizes Design Engineering with Flexible Tokens

Preface

Hello, I am Wen Bing, an experience designer at Ant Group, also known as "Konggu" in the community. In this talk I will discuss the flexibility changes brought by Ant Design V5 from a design‑engineering perspective.

V5 Full‑Chain Flexibility Transformation

Ant Design now serves both design consumers and design producers, requiring a more powerful system to meet quality and efficiency demands.

1. Business Design System: Visual Theme Editor

V5 provides a visual theme editor that lets designers customize business themes without writing code, previewing changes in real time.

Previously, variables existed only as code, which designers could not understand or modify easily.

2. Business Asset Consumption: C2D Components + Custom Theme = Unlimited Design Assets

In earlier versions, designers had to manually maintain hundreds of symbols in tools like Sketch or Figma, making theme changes costly and error‑prone.

V5 combines C2D with Ant Design’s custom‑theme capability, automatically generating complete component assets and ensuring variant completeness.

3. General Design System: Token System Builds a Complete Design Semantic Model

The core of the above features is a robust Token System that defines colors, corners, sizes, shadows, etc., within a unified framework.

Design Token System

Design Token’s “Flower” and “Thorn”

Design Tokens are style variables that bridge design and front‑end development, offering two main benefits:

Flexibility: Changing token values updates component styles without touching component code.

Consistency: Tokens ensure visual consistency across the product.

In Ant Design V4, tokens were defined from a developer’s perspective, resulting in thousands of variables that were unusable for designers.

V5 New Token System

The new system consists of three parts:

Naming Convention: Namespace‑based hierarchical naming for readability.

Structure Framework: A seed‑to‑map‑to‑alias hierarchy that balances flexibility and maintainability.

Design Semantic Model: Layered UI element semantics for precise description.

Below I focus on the design‑semantic model.

Design Semantic Model

Tokens must describe design semantics such as color, corner, size, and shadow. Traditional color‑palette gradients assign a single value per component, which works for light mode but fails in dark mode because visual hierarchy differs.

To solve this, we introduced a layered semantic model that separates background, container, and elevated layers (B1, B2, L1‑L5), allowing consistent visual hierarchy across light and dark themes.

Examples:

Layout color (BgLayout) belongs to B1.

Container color (BgContainer) belongs to L1.

Elevated layer (BgElevated) belongs to L2.

In dark mode, L1 is darker than L2, preserving proper depth perception.

Business Design System Customization

Global Style Customization

The V5 theme editor lets designers quickly adjust primary colors, neutral text tones, corner radius, font size, shadows, etc., creating distinct brand styles.

Single Component Customization

Designers can modify individual component tokens (e.g., pagination corner radius) without affecting the global theme, enabling fine‑grained customization.

Color Algorithm Customization

Future support will include visual‑gradient algorithms such as Google’s HCT, allowing designers to fine‑tune color palettes and apply custom color‑space calculations.

Flexible Consumption of Business Design Assets

Component Consumption

After customizing a theme, designers export the configuration file and import it into Kitchen, enabling direct consumption of Ant Design assets without extra Sketch symbols.

Token Consumption

Design tokens become the primary means of styling, allowing developers to copy token values directly from Kitchen’s Measure tool into code, reducing design‑development gaps.

Design Delivery

Kitchen provides a Measure tool that maps tokens to front‑end code snippets for seamless handoff.

Learning and Copy‑Paste

Using C2D, designers can copy design drafts from the Ant Design website and paste them into Sketch via Kitchen’s “Super Paste” feature, completing a full design‑to‑development loop.

For more details, refer to the official resources:

Kitchen website: https://kitchen.alipay.com/

Ant Design website: https://ant-design.antgroup.com

Ant Design GitHub: https://github.com/ant-design/ant-design

Ant Design Yuque column: https://www.yuque.com/ant-design/ant-design

Ant Design Zhihu column: https://www.zhihu.com/column/c_1564262000561106944