是否支持除 Figma 外的其他设计平台?
不支持,其他平台的兼容性不在我们考虑范围内。我们团队自身是 Figma 的重度用户,在内部的业务中我们会常态化地使用 D2C 执行日常的迭代开发,如果有相关的问题能更早地暴露推动修复。而其他设计平台,我们自身并未有相关的使用诉求,没法保证转码质量以及长期迭代的可用性。
任意设计稿都支持通过 D2C 识别吗?
只有基于最新 Semi Figma UI Kit 搭建的设计稿,才支持进行代码识别。否则仅仅会将组件识别成普通的 div 图层,无法与真实 Semi Component Props 映射。
如果你希望接入 D2C 能力,可以推荐与你对接的设计师同学采用最新 UI Kit 进行设计即可,对设计同学而言,使用习惯与之前基本相同。
现阶段 D2C 对什么场景支持较好?
- 表单类场景(基本涵盖常用的 Semi Form Field 元素,所以在表单类场景,D2C的可用度会相对较好)
- 简单的表格,不涉及树形数据以及数据分组
- 布局或样式较复杂的自定义组件,区块
- Landing Page 场景(因其主要都是静态展示类内容,设计稿内一般不存在复杂 Semi 组件)
设计稿设计师使用绝对定位绘制,转码出来也是 absolute 布局吗?
一般不会输出绝对布局产物,D2C 会做适当优化。具体细节,参考 基础转换逻辑。
转码后不是组件?
如果你的设计稿中使用的是旧 Semi Variants,D2C 时无法将其识别为组件。
查看可被识别的 D2C 组件?你可以在转码时通过转代码检查查看画布上存在哪些 Semi 组件。

然后按照设计稿迁移文档对旧组件进行替换。
是否能作为通用方案开放?怎么支持非 Semi 的 UI 资产,例如自定义业务组件库、第三方的 Design System ?
实现通用型的 D2C 是我们的长期目标。当前 D2C 对于 Semi 体系的基础组件完善程度已经较高。我们 2023 Q3 建设目标,就是围绕自定义组件、第三方 Design System 的 D2C 支持开展工作。
有两种方式可以对 非 Semi Design 的 UI 资产进行接入。
- 一种是与 Semi UI 基础组件一样,采用 C2D2C 的链路
- 一种是市面上其他 D2C工具类似,通过批量标注图层的方式,提供识别能力
两种方式有不同的使用场景,当前我们已经在多套非 Semi 系的 library 上 进行了接入验证。更多技术细节可查阅 标记组件库文档。

人工标注方案主要的流程如下:在 Figma 中通过使用 Semi D2C 插件提供的标记组件库功能,对已存在的 Figma Variant 组件集进行标注生产。标记过程需要研发同学实现 metaDataFactory 方法,声明 Figma 图层或 Variant Property 与 API 之间的映射关系。

C2D方式是否适合所有场景?如何判断自己的场景适合使用 C2D 还是适合使用标注?
- 为什么 Semi Design 选择用 C2D,而不使用标注方式接入?
- 主要由于使用场景决定,使用 C2D 的收益会大于我们投入的成本。作为抖音BU的基础设计系统,广泛落地于不同形态的业务,我们有两个点是必须向用户提供的:1. 完备的设计变体,允许业务设计师在此基础上删减;2. 必须支持主题定制,允许业务设计师根据品牌基调结合业务场景,低成本调整样式风格
- 使用 C2D2C 方案对 Semi Design 的收益
- 之前 Semi UI 的变体,由设计师人工绘制,虽然数量也不少,但受限于设计师的人力,不是完整形态。使用C2D能进一步完善,通过C2D方式,我们补充了将近五倍的设计变体,变体属性增加 +98% ,与 API 完全对应
- Semi 有非常强的 品牌定制诉求,抖音创作,直播、客服等不同的业务,都基于 Semi Design 定制了 XX-A Design、XX-B Design 衍生的设计系统,对于我们的应用场景而言,主题不仅仅是用于研发侧,【同一个主题配置会同时在Figma 端、FE Codebase端被消费】,我们需要提供为 UI Kit 刷入主题的能力,将Figma 上的 Semi Design 定制为 Any Design,我们必须在图层上,种入我们相关的 Design Token。

对于其他场景而言,我们一般推荐优先使用标注方式接入,因为:
- 业务一般主题已经确定,不再需要作为 基础 Design 再次被定制
- 无论是设计、研发而言,成本都明显比 C2D 低
产物一定是基于 CodeSandbox 输出吗?可以提供其他类型的产物吗,例如 json schema?
支持 JSON Schema,查看详情。
如果你需要更多的产物支持,可以单独与我们联系,case by case 讨论跟进。
哪些场景会转换成 XXX?
关于具体的 D2C 效果以及代码产物为什么是 XXX,请查看 基础转换原理。
字节跳动内部用户版本的插件与社区版插件有何不同?
内部版与社区版基本功能一致,由于安全原因,社区版本没有提供图床功能,图片资源需要用户手动配置图床。内部版本插件无需手动设置图床,可在插件设置页选择将图片上传到内部(默认)或者外部。另外公司内部版本可以使用仅内部访问的 npm 包。
字节跳动内部用户访问插件 404?
如您是字节跳动员工,访问字节跳动内部版本插件显示 404。请检查您的 Figma 所在组织是否为 ByteDance Design。

Figma 插件有归属组织,如您的 Figma 账户不在 Semi 插件的发布组织内,则无法访问此插件。

如下图,你可以尝试在设计稿内搜索 Semi。如您仍然无法解决此问题,可联系客服。

有哪些已知问题或者 bad case?
对于大部分使用场景,D2C 对设计稿还原度较高,但也存在一部分场景未能完美支持,这部分一般是比较少会用到用法、使用场景。
如您在转码时遇见了问题,请查看是否是 已知问题。如果您遇到了新的问题,请与我们联系。