介绍

关于 Semi 的 Design to Code 能力介绍

简介

Semi 设计稿转代码(Semi Design to Code,或简称 Semi D2C),是由抖音前端 Semi Design 团队推出的全新的提效工具。
Semi D2C 可以一键将 Figma 设计稿转为前端代码,帮助研发侧快速实现 UI 还原工作,提升研发侧需求交付速度。

我们提供了什么能力?

组件识别

一键识别设计稿内的 Semi 组件,快捷预览组件属性,支持转译为 JSX 和 CSS 代码

布局还原

一键识别 Figma 页面中图层布局,快速还原页面布局,无需从 0 开发

设计稿检查

查看设计稿中使用的组件以获得真实组件,以及更多检查能力

代码预览

在 CodeSandbox 中查看转码效果

支持导出不同框架代码

  • 支持 JSX + SCSS
  • 支持 JSX + Tailwind
  • 支持 JSX + @emotion/css
  • 支持 JSON Schema

支持 Dev Mode

可在 Figma Dev Mode 下快速查看组件代码,避免反复查看组件文档

支持接入第三方组件库

通过组件库标记让第三方组件具有转代码能力

支持接入第三方平台

JSON Schema 保留了转码后的抽象语法树,您可以导出它到第三方平台进行后续的开发流程,如绑定点击事件、发布上线
支持复制 Schema 到粘贴板、复制 Schema 链接、另存为文件

适用场景

✅ 使用了大量 Semi 组件的新页面

✅ 未使用 Semi 组件,但人工还原要写较多样式的复杂结构模块

❌ 已有页面的布局 UI 变更,增量需求

© 2021 - 2024 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED

  • 开始
    • 介绍
    • 快速开始
    • 选型对比
    • 相关术语
    • 常见问题
    • 更新日志
  • 研发使用手册
    • 代码转译
    • 标记图层
    • 标记表格
    • 标记组件库
    • 标记图标库
    • 设计稿检查
    • 转码插件
    • 故障排除
    • 基础转换原理
    • 支持组件列表
    • 全局设置
  • 设计使用手册
    • 使用 Semi Variants
    • 自定义 Variants
    • 设计稿规范
    • 使用 Table 组件
    • 使用 Form 组件
    • 迁移旧设计稿
  • 更多
    • 联系我们
    • 路线图
    • JSON Schema
    • 已知问题