Lossless Design Collaboration Based on C2D2C at NetEase Cloud Music

This article is a comprehensive technical sharing from NetEase Cloud Music's presentation at GMTC Conference, introducing their innovative C2D2C (Code to Design, Design to Code) approach for achieving "lossless" design collaboration between designers and developers.

The presentation begins by analyzing the fundamental problems in traditional design collaboration: design assets are manually managed, design specifications are manually synchronized, different design teams have inconsistent standards leading to duplicate construction, and developers face repetitive component development and inefficient collaboration due to communication gaps.

The core issue identified is the lack of a unified collaboration language between design and development tools - designers use design languages while developers use code languages, causing inevitable information loss during intent transfer.

The proposed C2D2C solution uses code and its derivatives as a unified collaboration language. Designers express design intent through C2D, including layer data and component metadata (component names, configuration parameters). Developers then use D2C to convert design language into code by consuming layer and component metadata, achieving theoretically lossless design intent transfer.

The article details the technical implementation including: cross-platform plugin architecture supporting Sketch and Figma; design configuration solution using dynamic forms and metadata binding; C2D technical selection between react-sketchapp and html2sketch approaches; html2figma implementation原理 (converting HTML to Figma Schema through DSL transformation); D2C solution based on metadata for material recognition; and layout optimization algorithms for converting absolute positioning to relative positioning.

The solution has achieved significant results: 25% efficiency improvement for designers, 33% for developers, and 38% overall collaboration efficiency improvement across 4 major scenarios (events, mall, membership, and musicians).

Key technical concepts discussed include Design Token (decoupling component styles from code), virtual components for multi-platform code generation, and the integration with low-code platforms for secondary development.