UI新手教程之切图标注(新手向)--Adobe XD 切图标注
2020-09-04 本文已影响0人
小标同学
一. 工具
标记狮---自动标注神器。
二. 平台
支持Mac和Windows双平台。目标支持的软件有Adobe XD
这是一款运行Adobe XD中的插件,能够自行的把你需要的切图和图层输出,避免了手动标注和切图。只需要点击一个按钮,就自动输出你需要的各种规格的png和svg切图供给开发下载,方便你与开发的协同
第一步,打开Adobe XD
在Adobe XD的右侧面板标注你所需要导出的切图
第二步,打开标记狮选择导出标注菜单中的导出到本地按钮;
第三步,选择你需要导出的规格图片,你也可以全选规格,但为了节省导出的资源包大小,建议只勾选开发需要的规格图片,比如开发只需要@2x和@3x的png切图,只需要勾选这两项即可;
第四步,选择导出包支持范围,新手一般是选择完整版功能,如果你团队的研发人员有将资源包部署到服务器(方便随时提交和更新)就可以选择精简版;最后选择你是要导出当前画板还是导出全部画板的标注,点击开始导出按钮就可以导出标注文件了。会自动生成zip包,把这个包分享给你的开发就可以了。
二. 开发查看标注和下载切图
标记狮导出的资源包是自动生成标注的,开发点开你分享给他的资源包中的index文件,可以在标注详情页面查看标注和下载切图,就不要你进行任何的手动操作了。
三. 内网协同
如果团队的项目比较多,可以使用标记狮的私有云功能,如果使用了私有云就可以进行文件管理以及画板内容及时更新,也不需要依靠第三方传输工具给开发传本地包,只需要分享链接给开发可以实时更新和查看。比如,你在XD中修改了一个字体颜色,可以直接提交到私有云,然后通知开发刷新之前的链接就可以查看了,非常方便,就不需要再重新导出一次资源包。