Design to Code 设计稿转代码

开始 · Design to Code

设计稿转代码

简介

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

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

基础能力

基础 UI 布局还原

支持 flex 布局、absolute 布局

精准的Semi 组件识别

已覆盖表单和表格场景 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 的能力

类型	说明	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 布局。

简介