此步骤依赖于上一步,导入到设计稿需要您的 Variants 已发布
发布 Semi Variants
社区用户
使用 Semi Figma 设计资源:https://www.figma.com/@semi
如您是第一次使用,仅需要使用组件文件 Semi Design - Components (Figma Community) 即可。
我们在组件文件里同时定义了 style。其他文件如 icon、light style、dark style、text style,可在您需要时使用。
![](https://lf26-static.semi.design/obj/semi-tos/images/be690170-3753-11ee-823c-a73687e75797.png)
Step1. 复制 Semi Design - Components (Figma Community)
![](https://lf9-static.semi.design/obj/semi-tos/images/ecd417c0-3753-11ee-85df-13a3e39cd344.png)
Step2: 发布为共享资源库
将 Variants 发布到您所在的组织下。
![](https://lf9-static.semi.design/obj/semi-tos/images/341a34d0-3753-11ee-ba6f-954e79269199.png)
如您没有发布权限(不是 Figma 专业版用户),也可以通过复制粘贴的方式使用这套组件。
字节跳动内部用户
字节跳动内部用户无需发布 Variants,Semi 团队已将 Variants 发布到组织下,设计师只需要确认使用的是最新版 Semi Variants 即可。
![](https://lf3-static.semi.design/obj/semi-tos/images/9c7dcc40-3752-11ee-85df-13a3e39cd344.png)
Semi icon 是在单独文件维护的,同时也支持转代码。如您需要使用,可按照相同方式使用下面这两个文件。
导入到设计稿
在您的设计稿左侧面板的 Assets 中打开 Semi Variants 开关。
![](https://lf9-static.semi.design/obj/semi-tos/images/bede26e0-3752-11ee-823c-a73687e75797.png)
绘制设计稿
使用 Semi Variants 完成你的设计稿。
![](https://lf6-static.semi.design/obj/semi-tos/images/ea7869f0-3752-11ee-85df-13a3e39cd344.png)
使用新版本 Semi Variants 的好处
- ✅ 更加丰富的变体类型,与代码组件一一对应的变体属性
- ✅ 更合理的图层结构、支持嵌套组件和 auto layout
- ✅ 让设计稿具有转代码能力
- ✅ 无需改变使用习惯,直接用
有自定义需求?
如果你的团队有不同于 Semi Variants 默认的主题,可以 自定义 Variants,轻松创建一套自定义主题的 Variants。