图片转svg标注_UI新手教程之切图标注(新手向)--Adobe XD 切图标注

一. 工具

标记狮---自动标注神器。

二. 平台

支持Mac和Windows双平台。目标支持的软件有Adobe XD

这是一款运行Adobe XD中的插件，能够自行的把你需要的切图和图层输出，避免了手动标注和切图。只需要点击一个按钮，就自动输出你需要的各种规格的png和svg切图供给开发下载，方便你与开发的协同

第一步，打开Adobe XD

在Adobe XD的右侧面板标注你所需要导出的切图

第二步，打开标记狮选择导出标注菜单中的导出到本地按钮；

第三步，选择你需要导出的规格图片，你也可以全选规格，但为了节省导出的资源包大小，建议只勾选开发需要的规格图片，比如开发只需要@2x和@3x的png切图，只需要勾选这两项即可。

第四步，选择导出包支持范围，新手一般是选择完整版功能，如果你团队的研发人员有将资源包部署到服务器（方便随时提交和更新）就可以选择精简版；最后选择你是要导出当前画板还是导出全部画板的标注，点击开始导出按钮就可以导出标注文件了。会自动生成zip包，把这个包分享给你的开发就可以了。

二. 开发查看标注和下载切图

标记狮导出的资源包是自动生成标注的，开发点开你分享给他的资源包中的index文件，可以在标注详情页面查看标注和下载切图，就不要你进行任何的手动操作了。

三. 内网协同

如果团队的项目比较多，可以使用标记狮的私有云功能，如果使用了私有云就可以进行文件管理以及画板内容及时更新，也不需要依靠第三方传输工具给开发传本地包，只需要分享链接给开发可以实时更新和查看。比如，你在XD中修改了一个字体颜色，可以直接提交到私有云，然后通知开发刷新之前的链接就可以查看了，非常方便，就不需要再重新导出一次资源包。