Semi D2C: Design‑to‑Code System for Accelerating Frontend UI Development

Semi D2C is a Design‑to‑Code (D2C) tool created by the Douyin frontend team as part of the Semi Design system, which also includes the Semi UI component library and DSM design‑system customization. It aims to help front‑end engineers quickly restore UI from design drafts and reduce the cost of writing template render code.

D2C converts design drafts into code but the generated code cannot be deployed directly because design files lack business‑logic information; developers still need to add interaction and data logic. However, the generated JSX and CSS are usually production‑ready after a small amount of post‑processing.

The tool is positioned as an assistant for front‑end engineers and is suitable for B‑end scenarios that require component‑level accuracy, theme customization, and maintainable code. It supports output formats such as JSX + SCSS, JSX + Tailwind, JSX + Emotion, and JSON Schema for low‑code platforms.

Using the Semi Figma plugin, designers can select a layer and instantly preview the corresponding JSX + CSS in the DevMode panel, copy the code to a repository, or push it to CodeSandbox. Custom transformer plugins can further edit the output (e.g., adding click handlers, i18n, data fetching) by implementing a metaDataFactory method that maps Figma layer metadata to component props.

Compared with other D2C solutions, Semi D2C provides native component‑level recognition without manual annotation, preserves designers' Figma Variant workflow, and offers a highly usable design component library that integrates tightly with the Semi UI ecosystem.

The motivation behind the project is to improve efficiency for both designers and developers: designers gain more usable variants and seamless theme syncing, while developers save 30%+ of UI‑restoration effort and achieve consistent code style and UI fidelity.

Development started in 2021, with an MVP handling simple layout conversion, followed by component‑prop recognition for 20+ high‑frequency components, and ongoing work to expand component coverage, improve developer experience, and support third‑party UI libraries.

Core implementation follows a C2D‑then‑D2C pipeline: React components are rendered to HTML + CSS, captured via the Figma plugin API, and published as Figma components. D2C then uses pre‑embedded metadata from the C2D step to identify components and their props accurately.

Key challenges include handling Auto Layout, component nesting, and variant explosion in C2D, as well as accurately restoring layouts, recognizing components, and producing maintainable code in D2C. Solutions involve converting Auto Layout to flex, creating auto‑wrapper containers for overlapping layers, and merging duplicate CSS.

Benefits are twofold: designers obtain richer component variants and one‑click theme injection, while developers enjoy faster UI implementation, higher design‑to‑code consistency, and standardized code style across teams.

The article also addresses FAQs about absolute positioning, why visual‑recognition approaches are not used, how to extend D2C to non‑Semi component libraries, and the future role of AI in further automating the workflow.