<div><div><div>

            <div class="md markdown gatsby-p">Semi 设计稿转代码（Semi Design to Code，或简称 Semi D2C），是由抖音前端 Semi Design 团队推出的全新的提效工具。</div>

<div class="md markdown gatsby-p">Semi D2C 可以一键将 Figma 设计稿转为前端代码，帮助研发侧快速实现 UI 还原工作，提升研发侧需求交付速度。</div>
<div>
<section class="markdown md anchor-section gatsby-section">
<h2 id="sha15ea2e0cde2c8058d1ccfa7d115af73a3a581aea2" class="md markdown gatsby-h2">简介</h2>
<div class="md markdown gatsby-p">Semi 设计稿转代码（Semi Design to Code，或简称 Semi D2C），是由抖音前端 Semi Design 团队推出的全新的提效工具。</div>
<div class="md markdown gatsby-p">Semi D2C 可以一键将 Figma 设计稿转为前端代码，帮助研发侧快速实现 UI 还原工作，提升研发侧需求交付速度。</div>
</section>
<section class="markdown md anchor-section gatsby-section">
<h2 id="sha1feb669e78d52316fae64776d18341feabb40cb6a" class="md markdown gatsby-h2">我们提供了什么能力？</h2>
<h3 id="sha1c1961a249ff373e3c3aa91e512a434c745e53e91" class="md markdown gatsby-h3">组件识别</h3>
<div class="md markdown gatsby-p">一键识别设计稿内的 Semi 组件，快捷预览组件属性，支持转译为 JSX 和 CSS 代码</div>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf26-static.semi.design/obj/semi-tos/images/d61b8880-35b7-11ee-8dd3-fbb43044e72e.png" alt="Semi Design" width="800"></div>
<h3 id="sha19573b24e7a5e63a7d20ac883b73a51a93ecfaaf1" class="md markdown gatsby-h3">布局还原</h3>
<div class="md markdown gatsby-p">一键识别 Figma 页面中图层布局，快速还原页面布局，无需从 0 开发</div>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/use-layout-cut-2.gif" alt="Semi Design" width="800"></div>
<h3 id="sha11142596df30b7f79d48d94755619b2b85ca6e680" class="md markdown gatsby-h3">设计稿检查</h3>
<div class="md markdown gatsby-p">查看设计稿中使用的组件以获得真实组件，以及更多检查能力</div>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf9-static.semi.design/obj/semi-tos/images/3c83a7a0-35c3-11ee-ba6f-954e79269199.png" alt="Semi Design" width="800"></div>
<h3 id="sha141e1026b60dc1d5b53d6659571b6dd761dfce87a" class="md markdown gatsby-h3">代码预览</h3>
<div class="md markdown gatsby-p">在 CodeSandbox 中查看转码效果</div>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf3-static.semi.design/obj/semi-tos/images/c7f5d720-352a-11ee-823c-a73687e75797.png" alt="Semi Design" width="800"></div>
<h3 id="sha1c15fc7098f10b7b5bc1db4a53bea68d21dcc5c7b" class="md markdown gatsby-h3">支持导出不同框架代码</h3>
<ul class="md markdown gatsby-ul">
<li class="md markdown gatsby-li">支持 JSX + SCSS</li>
<li class="md markdown gatsby-li">支持 JSX + Tailwind</li>
<li class="md markdown gatsby-li">支持 JSX + @emotion/css</li>
<li class="md markdown gatsby-li">支持 JSON Schema</li>
</ul>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf6-static.semi.design/obj/semi-tos/images/781e7400-35f7-11ee-823c-a73687e75797.png" alt="Semi Design" width="800"></div>
<h3 id="sha13eb62cc58566c4a24ae3949ee26a99f78ddb9737" class="md markdown gatsby-h3">支持 Dev Mode</h3>
<div class="md markdown gatsby-p">可在 Figma Dev Mode 下快速查看组件代码，避免反复查看组件文档</div>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/use-component.gif" alt="Semi Design" width="800"></div>
<h3 id="sha13a1083c2ea954a15deb7146100469a5901a0455b" class="md markdown gatsby-h3">支持接入第三方组件库</h3>
<div class="md markdown gatsby-p">通过组件库标记让第三方组件具有转代码能力</div>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf6-static.semi.design/obj/semi-tos/images/04678b10-3529-11ee-ba6f-954e79269199.png" alt="Semi Design" width="800"></div>
<h3 id="sha125556fcb6ae00de86d40bc4418cee4737ddaabd7" class="md markdown gatsby-h3">支持接入第三方平台</h3>
<div class="md markdown gatsby-p">JSON Schema 保留了转码后的抽象语法树，您可以导出它到第三方平台进行后续的开发流程，如绑定点击事件、发布上线</div>
<div class="md markdown gatsby-p">支持复制 Schema 到粘贴板、复制 Schema 链接、另存为文件</div>
<div class="semi-image"><img decoding="async" class="semi-image-img semi-image-img-preview" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/use-lowcode.gif" alt="Semi Design" width="800"></div>
</section>
<section class="markdown md anchor-section gatsby-section">
<h2 id="sha13b05370cd8e7c5372c171ae7e243d44e74673871" class="md markdown gatsby-h2">适用场景</h2>
<h3 id="sha1bb7c3176977ab62d0651db4d2f5a1bcc0f7ffa7a" class="md markdown gatsby-h3">✅ 使用了大量 Semi 组件的新页面</h3>
<h3 id="sha17043ab81bf9651e6beba7ac121d57a58e96a2fa6" class="md markdown gatsby-h3">✅ 未使用 Semi 组件，但人工还原要写较多样式的复杂结构模块</h3>
<h3 id="sha1287a7d499e1f6edf9694d4c4b823ff88bacf09e2" class="md markdown gatsby-h3">❌ 已有页面的布局 UI 变更，增量需求</h3>
</section>
</div>

        </div>
    </div>
</div>