本功能使用对象是前端研发。
使用场景
- 把一个图层标记为组件、物料,转代码时会将该图层识别为组件、物料
- 给图层标记一些额外的属性,转代码时会带上额外属性
标记内容
每个普通图层(当前支持 Frame、Component、Instance),我们可以标记三种属性:
- 组件名
- 包名
- 其他属性(作为组件的 props)
使用方式
打开插件标记入口,选中需要标记的图层。你可以通过以下方式打开标记入口。
![](https://lf26-static.semi.design/obj/semi-tos/images/b38a45d0-3757-11ee-85df-13a3e39cd344.png)
使用案例
给图层添加标记
选中一个普通图层后,我们可以通过标记给图层添加属性信息。这会在您需要消费这个标记时有用,转码后 JSON Schema 会携带这部分信息。
下图,给卡片的 title 图层添加一个 area 属性,值为 header。
![](https://lf3-static.semi.design/obj/semi-tos/images/79bc3010-3758-11ee-85df-13a3e39cd344.png)
标识图层为组件
可以对普通图层或未标记的单个组件进行标记,将其标记为 D2C 可识别的组件。
下图,在表单中输入组件名、包名、组件的属性(可选),将其识别为一个 Button 组件。
![](https://lf3-static.semi.design/obj/semi-tos/images/f04dbba0-3a68-11ee-823c-a73687e75797.png)
如您希望标记属性的值为一个节点类型,需要将标记信息转换为 JSON Schema TreeNode。
标记组件库
如您需要对组件库进行标记,我们提供了批量标记组件库的方案。请查看标记组件库。
![](https://lf6-static.semi.design/obj/semi-tos/images/04678b10-3529-11ee-ba6f-954e79269199.png)
FAQ
哪些类型节点支持自定义标记?
目前支持 Frame、Component、Instance 三种类型。