semi-design/content/start/design-to-code/index.md

---

category: 开始 title: Design to Code 设计稿转代码 icon: doc-code localeCode: zh-CN

order: 4

简介

Design to code（简称D2C） 是 Semi Design 提供的设计稿转代码功能，支持一键识别 Figma 页面中图层布局 + Semi 组件，像素级还原设计稿，转译为 JSX 和 CSS 代码，快捷预览， 无需从 0 开发。

从此，你可以将 UI 还原的工作交给工具，更专注于实现业务逻辑。

基础能力

支持 flex 布局、absolute 布局 已覆盖表单和表格场景 28+ 组件 多种代码风格输出： React + Scss、React + Tailwind 和 JSON Schema 支持识别自定义主题后的组件 识别设计师修改后的内容，将其识别为 ReactNode

如何使用

更详细的使用说明，可访问 https://semi.design/code 查阅

使用场景

将基础页面的布局进行还原，适合落地页快速开发 一键将复杂样式的卡片进行还原，无需关心卡片布局 利用 Semi Variants 搭建运营表格页面，D2C 帮助你自动识别表格列内容 利用 Semi Variants 搭建运营表单页，一键将 Semi Form 表单进行还原 自定义消费 JSON Schema，创建适合你项目的模板代码

实际示例

我们准备了一些 Figma 示例设计稿，以及使用 Semi Figma 插件实际转译的代码 Codesandbox 链接。

在安装插件后，你可以基于这些现有设计稿，快速体验 / 评估 Semi D2C 的能力

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

与其他方案的差异

更加符合设计师使用习惯

我们在 2021 ~ 2022 年调研了业界常见的 C2D 工具，它们将组件作为一个实例绘制在画布上，无论是创建实例还是切换变体都需要在插件内操作。

然而，在实际的设计流程中，设计师可能并不习惯打开一个插件创建和更新组件。Semi 提供的方案允许设计师继续通过 Figma 原生的方式使用变体，与原有的设计流程一致。

可用的设计组件

业界有一些工具支持任意的组件库转为设计组件，但是这些组件目前不具有 auto layout 能力，无法达到设计师可用的标准。另外它们的组件也没有使用设计变量，这导致设计师很难通过 design token 自定义这些组件库。

组件识别不依赖标注

Semi D2C 方案提供了精准到组件级 props 的识别能力，并且不需要研发手动对组件进行标注。同时对于自定义组件，我们也额外提供了标注方式将图层识别为组件。业界有一些工具提供了强大的组件标注能力，但由于没有默认提供一套组件库，所以在实际的使用中需要人工将组件以及组件属性进行标注，整体的使用成本较高。

更好的 Flex 布局支持

市场上常见的 D2C 工具，有一些具有比较好的 Flex 布局能力支持，但在一些细节上有一定问题。Semi 支持将 Figma 的 auto layout 布局还原为 Flex 布局。另外，如果图层间符合一定规则，也将自动识别为 Flex 布局。

更多说明

更多关于Figma 插件的安装，使用，标注自定义组件，Figma 设计变体的使用，D2C的使用受限等细节信息，请查阅 https://semi.design/code