今天给大家介绍一款软件——它是一款集标注、图片裁剪、云存储、前端代码生成于一体的协同软件。笔者在团队中使用有一段时间了，也亲自测试过。软件最主要的功能就是标注。引入到团队之后，设计师不再需要标注，前端工程师阅读标注的效率也提升了，一举两得。

在它出现之前，早期的PS时代都是用来标注界面的，它出现之后也有类似这样的插件可以实现自动标注，但使用起来还是比较繁琐，输出的结果也不方便工程师使用。

我们标注的稿件大部分都是如上图这样，标注和效果图合二为一，标注会遮挡内容，不利于浏览，一般会制作两套图，一套标注，一套效果图。

很多设计人员在使用标注时，无法确定需要标注哪些信息，大部分的解决方案是将所有的间距元素都标注出来，但实际上有些信息是不必要的，不利于工程师的浏览。

其次，当项目页面较多时，标注会占用一些时间。在开发界面、视觉验收时，需要截图标注视觉错位。如果有多种尺寸，需要制作多份标注稿。对于迭代速度快的团队来说，标注是一项费时费力的工作。

它的出现目的就是为了解决上述沟通不畅的问题，设计师不用再为标注而烦恼，工程师阅读设计稿的效率也提升了，一举两得。

创建项目

支持PS文件的导入sketch安卓图标模版，安装后会自动安装插件，插件的作用是导入设计稿。

首次登录时会提示创建项目，免费版用户可以创建一个项目，企业版用户支付 100 美元/月即可创建无限个项目。

选择需要创建的项目类型，分别对应、iOS、PC。

创建后，可以邀请团队成员加入、设置团队成员为管理员、各个成员都可以邀请其他成员加入。

文件导入—

在PS中新建文件时，必须选择移动应用设计作为文档类型才可以导入，并且仅支持PS及以上版本。

找到插件的入口，窗口-扩展功能-，选择需要导入的画板，按钮会变成黄色并提示：导入选定的画板，点击按钮后选择我们之前建好的项目。

回过头来我们会发现PS中选择的画板已经被导入了。

选中其中一个图标，边距会准确显示，右侧显示按钮的具体信息，如果使用了透明度，则会有具体值，如果文字之间有空格，建议使用两个文本框，一个文本框无法识别。

庄稼

还有裁剪功能，我想把同步按钮当成裁剪资源，选中对应的图层，然后点击灰色按钮，就可以标记为资源了，这样我们就可以把所有页面中需要裁剪的元素全部标记出来，然后导出就可以了。

回到上面选择同步按钮sketch安卓图标模版，旁边会出现一个资源模块，有PNG和SVG两种格式，点击即可下载。之前用过很多PS裁剪插件，虽然方便，但还是需要对每个图层进行命名和分类，现在只需要点击一个按钮，大大解放了设计师的双手。

下载后会自动保存到对应文件夹，会自动生成5种分辨率大小的图标，iOS会自动生成2x、3x的图片。

注释和

如果担心设计稿的某一部分会引起歧义，还可以对其发表评论，其他人看到评论后有不同意见可以回复，这个功能非常实用，产品人员可以直接用它来编写PRD文档。

同时还可以生成视觉规范，包括字体样式、颜色模板等，右侧是对应生成的代码，研发人员可以直接复制使用。

拖放即可保存

上传的项目文件会保存在云端，如果想保存设计稿，可以选中文件画布拖拽至文件夹保存，也可以拖拽发送至微信。

文件导入—

导入文件更容易。选择画板并在插件中选择导入。

缺点

当导入的画板过多，或者隔了一段时间再打开，有时候会出现画板无法显示的情况，应该是图片服务器被屏蔽了，建议使用VPN。

这是新增加的专栏，计划不定期推荐一些好用的应用，这不是广告，不是广告，不是广告，当然如果能让BAT的公关人员看到这篇文章，给BAT的粉丝们发点福利就更好了。

回复 查看“认真的！不要在阿里巴巴工作”

回复薪资查看完整版《这可能是北半球薪资福利最好的公司：腾讯》

回复腾讯查看《一分钟了解腾讯最强大的群体：设计师》

回复图片查看《一张图看懂腾讯和阿里上班的区别》

回复另一张图片查看《从一张图看腾讯和阿里巴巴的企业文化》

如有侵权请联系删除！