简介

code

支持识别设计系统组件

无需频繁翻阅组件文档，即可快速得到组件代码。支持 Semi 组件识别，也支持接入其他设计系统组件。

{ }

DSL

Vue

React

轻松定制转码结果

提供了中间产物 DSL 和 19+ 钩子函数，支持用户定制化转码结果，比如转码为 Vue、Svelte 代码，自定义模板代码等。

Open API

Node SDK

快速封装提效工具

支持 OPEN API 或 Node SDK 形式脱离 Figma 插件使用 D2C 能力，可将 D2C 能力嵌入自建平台或工具，比如搭建平台，VS Code 插件等。

调用方式

• Figma 插件：通过 Figma DevMode 快速启动，点击图层直接获取对应代码，支持不同代码格式 Output。支持通过自定义插件自由消费 AST，自定义出码结果
• OpenApi：开放式 Http 服务，提供基于 Figma URL 解析出对应代码的能力，可用于将 D2C 集成到业务流程，如 LowCode 搭建平台，构建 MCP 服务等（字节内部可用，社区版本暂未提供该能力）
• NodeSdk：定制性强，可用于封装团队私有的 D2C 能力，如 CLI/HTTP 服务/VS Code 插件（字节内部可用，社区版本暂未提供该能力）

示例

截图 & Figma URL	类型	说明	Codesandbox
	不含组件，内容较简单的模块	可用于快速还原布局及内容	Link
	不含组件，内容较多或布局稍复杂的模块	可用于快速还原布局及内容	Link
	含 Semi 表单组件的模块	可用于快速还原布局及内容，并识别出 Semi 组件的 Props	Link
	含 Semi Table 组件	可用于快速识别表格列、创建 Table	Link
	整页 Landing Page	可用于快速还原布局及内容	Link

与其他技术路线的差异

• 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 类型声明补充。

更多说明