Bridging Design and Code: JD Cloud’s C2D2C Approach to Unified Frontend Assets

Overview

JD Cloud frontend team and the Relay design platform jointly built a C2D2C (Code‑to‑Design‑to‑Code) workflow, linking the Mobius Design System assets to enable a single asset flowing both ways, addressing designer distraction, version lag, and limited D2C effectiveness.

Motivation

The JD Cloud frontend component library grew rapidly last year, accumulating over 140 business components that saved more than 840 person‑days and reduced labor costs by over 3 million RMB. The base UI library Mobius was adapted to the JDT Design Token system, improving design‑development collaboration. The team aimed to further enhance upstream‑downstream efficiency, focusing on designer‑developer collaboration.

Current design platforms (e.g., Figma, Relay) share many concepts with frontend development, prompting the idea of a unified source for design and development assets.

Designer attention is fragmented because high‑level components still require manual design, token binding, and hand‑off to developers.

Design assets suffer from version lag; token updates are often missed or delayed, causing inconsistencies.

Design‑to‑Code (D2C) achieves only basic results, with high maintenance cost and inability to recognize private frontend assets.

The team therefore attempted a “same‑source” redesign of design‑development assets.

Solution: C2D2C Model

Use Code To Design to eliminate version lag between design and code.

Leverage design‑platform plugins to manage and associate Design Tokens, achieving theme management across design and frontend assets.

Apply Design To Code to convert design files into code/components, allowing developers to focus solely on business logic.

First‑Phase Results

Using the Mobius component library, the team automatically generated Figma controls for the Button component, producing more than 10 controls in the first phase.

Designers use the generated Figma controls (which include hover/click effects).

Updating DesignTokens propagates to Figma variables and generates CSS/SCSS/JS files, applying new themes (e.g., changing sys.corner.regular and sys.color.brand).

Feasibility Study

During Code‑to‑Design, converting HTML/CSS to design controls may face mismatches (e.g., Flex layouts vs. Figma AutoLayout).

Because the component library is centralized and maintained by a small team, limiting CSS to features supported by design tools keeps costs low.

Not all component properties/animations can be rendered as design controls (e.g., modal animations, dynamic tabs).

Designers only need the visual representation needed for mockups; complex interactions can be omitted from the generated controls.

Design‑to‑Code accuracy is often low and hard to maintain.

Our goal is to generate code for initial layout components, not full Vue templates. Since design controls are derived from the component library, we can inject extra metadata during generation, and even train AI models on the generated dataset for higher reliability.

Evaluation of existing design tools shows both Relay and Figma support bulk control generation via APIs; Figma’s variable system is currently more mature for DesignToken handling.

Implementation Overview

Code To Design

Import DesignTokens into Figma via API to create Figma Variables.

Use ComponentSet naming convention propA=value,propB=value,… to generate a matrix of component variants and assemble them into a ComponentSet.

Render each variant in the DOM using the corresponding props.

Parse the rendered HTML and CSS.

Convert HTML/CSS into Figma layout configurations.

Map CSS variables (e.g., var(--jdt-foo-bar)) to Figma Variables for binding.

Design To Code

In collaboration with the Retail Relay platform, we imported the generated Figma component library into Relay, enabling simple D2C for components used in JD Cloud projects. Future work will focus on high‑quality D2C and AI‑driven code generation (e.g., Builder.io).

Future Plans

Make all JD Cloud frontend assets share a unified design‑development source.

Build a theme editing system with real‑time DesignToken preview, import/export capabilities.

Refactor DesignTokens according to community standards (https://tr.designtokens.org/format/#abstract).

Explore AI‑assisted Design‑to‑Code pipelines.