Design and Implementation of the Meituan Design System Tool Based on Design Token

Abstract

In medium and large internet enterprises, designers and developers rely on independent design systems and front-end component libraries for digital product production. However, manual synchronization between these two assets leads to low production efficiency and inconsistent user experiences. Design tokens have been proven to be an effective solution to this challenge. However, few studies have explored how to implement design tokens in real production environments, particularly within medium and large enterprises. Taking Meituan as a case, this research examines how design tokens can be applied to enhance production efficiency and experience consistency. Through user interviews, we identified three key pain points. Based on these findings, we developed a design system tool integrating design tokens. The tokens are organized within a three-tier framework (Base–Semantic–Component). Additionally, the traditional collaborative workflow between designers and developers is restructured into a new process: Design Definition → Standardized Sync → Development Reuse → Global Update). The tool’s interaction design is also optimized for non-technical designers, enabling them to configure and manage design systems smoothly. The usability testing results indicate that the tool has good usability, with a System Usability Scale (SUS) score of 78.3. It significantly enhances collaboration efficiency between designers and developers, reduces synchronization time between design systems and front-end component libraries, and eliminates all inconsistencies between these two assets. This study provides a practical reference for the effective implementation of design tokens in medium and large enterprises.

Keywords: Design System Tool, Design Token, Production Efficiency, Experience Consistency

DOI: 10.54941/ahfe1008061