--- category: 设计协作 title: Design to Code 设计稿转代码 icon: doc-code localeCode: zh-CN order: 5 --- ## 简介 D2C 为 Design to Code 的缩写，即设计稿转代码。作为前端工程师的辅助工具，能有效加速设计稿还原的效率，降低人工编写 Html / CSS 的成本。得益于 Figma 平台生态原生能力（Variant 变体、DevMode、CodeConnect 等）的不断增强，D2C 类工具近些年在生产环境下的可用性已经有了非常大的提升，可以支撑完整的设计系统接入，做到组件级的识别与代码输出。同时借助 AI 大模型，可以有效对 Figma 转译出的模板样式代码做进一步改写，实现业务逻辑补充。 Semi D2C 提供开箱即用的设计稿转代码：支持一键识别 Figma 页面中图层布局 + 设计系统组件，像素级还原设计稿，转译为 React JSX 和 CSS 代码。此外还提供了丰富的扩展能力，基于自定义插件系统快速打造团队专属的设计研发协作工具，无需从 0 开发，借助 D2C，你可以将 UI 还原的工作交给工具，更专注于实现业务逻辑。 ## 调用方式我们提供了多种形态的调用方式： - Figma 插件：通过 Figma DevMode 快速启动，点击图层直接获取对应代码，支持不同代码格式 Output。支持通过自定义插件自由消费 AST，自定义出码结果 - OpenApi：开放式 Http 服务，提供基于 Figma URL 解析出对应代码的能力，可用于将 D2C 集成到业务流程，如 LowCode 搭建平台，构建 MCP 服务等（字节内部可用，社区版本暂未提供该能力） - NodeSdk：定制性强，可用于封装团队私有的 D2C 能力，如 CLI/HTTP 服务/VS Code 插件（字节内部可用，社区版本暂未提供该能力）更详细的使用说明，可访问 D2C 官网查阅 ## 示例我们准备了一些 Figma 示例设计稿，以及使用 Semi Figma 插件实际转译的代码 Codesandbox 链接。在安装插件后，你可以基于这些现有设计稿，快速体验 / 评估 Semi D2C 的能力 | 截图 & Figma URL | 类型 | 说明 | Codesandbox | |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---------------------------------------------------|----------------------------------------------------------------------------------------------| |

| 整页 Landing Page | 可用于快速还原布局及内容 | Link | ## 与其他技术路线的差异通常而言，设计转代码除了依赖于特定设计平台的 Figma To Code / Sketch To Code 外，还有 Image to Code，基于多模态 AI 大模型的 Code 生成也可以认为是 Image to Code 的一种变体。 - Image to Code： - 传统的 ImageToCode 路线依赖 yolo 等手段对图片元素进行切割，然后识别。这类技术路线对相似元素的识别不佳（例如 Select 与 TreeSelect 在样式相似的情况下，识别可能会混淆），同时设计稿还原度在达到一定阈值后很难再优化 - 大模型时代，依赖 LLM 多模态能力如 GPT-4V 等手段亦能做到对简单设计稿的 toCode 还原，但该路径目前依然很难承载一个特定的设计系统（或者一个特定设计系统 + 主题定制的衍生体），并基于特定的设计规范去还原。同时对于间距、对齐、元素识别等存在非常多边边角角的 diff，对设计师来说，验收成本会剧增，对于 Pixel Perfect 视觉还原效果要求高的场景而言，实用性依然不佳。针对这些 case 的改善成本，目前依然居高不下 - Figma to Code： - 23/24年业界主流的 D2C 产品基本都是基于该技术路线，它由于属于结构化信息的互相转换，所以对设计系统，相似元素等 Image to Code 无法解决的 case 里，**识别精准度上会有非常大的优势**。Semi 的 D2C 亦基于此。 - 与其他 D2C 方案提供者不同，我们本身亦是设计系统的维护者，会更注重与特定设计系统的联通，**提供的 D2C 原生支持 Design System 组件级转码识别，也支持第三方设计系统**，基于 Code To Design 能力跟 Figma 的 Variant 做了打通。对 Figma 平台上各类功能的更新也更及时 - 我们正在将上述两个路线做结合，结合两者优点去做更靠近实际应用的生成，先基于 Figma To Code 生成基础代码，再结合 Image 图像信息，借助多模态 AI 大模型将基础代码做更合理的改写，在字节跳动内部版本的 D2C 插件中，我们提供了 Quality 模式，基于 Doubao / Deepseek 集成以下开箱即用的能力：更智能的子组件拆分、列表循环结构基于 map render 实现、classname 语义化、jsx -> tsx 类型声明补充。 **D2C + AI 是当下阶段能最好兼顾设计还原度 + 生成代码高可用性的技术路线（D2C + AI = 🚀 Pixel Perfect + 🔩 高可维护代码）** ## 更多说明更多关于 Figma 插件的安装，使用，标注自定义组件，Figma 设计变体的使用，D2C 的使用受限等细节信息，请查阅 https://semi.design/code