无论是页面还是区块,它们的转译过程一致。
获取组件代码
在 Figma DevMode 模式下,启用 Semi 插件,选中图层后右侧即可实时展示对应代码。适合快速查看组件以及组件对应的 API
![](https://lf26-static.semi.design/obj/semi-tos/images/d61b8880-35b7-11ee-8dd3-fbb43044e72e.png)
获取区块代码
在 Figma DevMode 模式下,启用 Semi 插件,快速得到组件 HTML 结构和样式,无需从 0 实现布局及样式
![](https://lf6-static.semi.design/obj/semi-tos/images/2e5cb420-35ee-11ee-85df-13a3e39cd344.png)
获取页面代码
支持针对整页 D2C,但实际开发中通常需要拆分组件,同时生成的代码量越大需要手动调整的可能性越大。
![](https://lf3-static.semi.design/obj/semi-tos/images/76fdcd50-35ed-11ee-85df-13a3e39cd344.png)
如何转码
- 打开插件(根据你所处的 Figma 模式不同,入口有所区别)
- 选择图层、开始转码
- 预览结果、复制代码
![](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/semi-linker/plugin-usage.gif)
温馨提示
由于安全原因,图片链接有效期为 3 小时。您可在全局设置里自定义图床上传地址。字节跳动组织内插件无此限制。