08-sketch插件

àì夳堔傛蜴生んèń 2022-11-25 05:29 214阅读 0赞

插件是让sketch保持强大的独门绝技,很多软件看起来不支持的功能,通过插件都可以实现,大大提高工作效率. 下面来介绍下sketch常用的,受大家欢迎的插件。

### 一．安装插件的方法 ###

sketch有两种插件安装的方法，一种是传统的安装方式，另一种是通过一款叫sketch toolbox的小软件来快捷安装。

首先看第一种安装方法，打开sketch（这里以最新版本的sketch3.0.4为例），然后选择菜单 Plugins>Reveal Plugins Folder...即可打开插件文件夹. 打开后即可知道路径,不用刻意去记这个路径在哪里。

![format_png][]

打开后可以看到以一个个文件夹命名的,就是一个个的插件.以下就是静电的电脑中安装的插件。 目前sketch官网上零星分散着一些插件的压缩包（相关链接：[http://www.bohemiancoding.com/sketch/support/developer/][http_www.bohemiancoding.com_sketch_support_developer]） 我们可以通过下载相应的压缩包，并解压到上述的Plugins下面，然后重启sketch，如果成功，在plugins菜单就会出现相应的选项。

![format_png 1][]

或者,可以直接解压文件夹,选择里边的以.sketchplugin结尾的文件,双击直接安装,出现下面的提示,则安装成功.

![format_png 2][]

但是，使用这种方法安装插件，需要一个个的找插件，非常麻烦。那么大家还记得静电在第一节的sketch教程中给大家的两个下载地址吗？一个是sketch安装文件，另一个就是关于插件的sketch toolbox。地址再贴一次给大家，没有下的同学一定要装哦（sketch toolbox下载地址：[http://pan.baidu.com/s/1dD3VeUX][http_pan.baidu.com_s_1dD3VeUX]），下载并安装后即可使用。打开sketch toolbox，大家会看到各种各样的插件，如下图：

![format_png 3][]

只需简单点击install按钮，即可方便的安装插件，再也不用费时费力的一个个的找了。

### 二．插件推荐 ###

ok，这个时候大家可能会有选择恐惧症了，这么多插件，我要从何选起呢？ 别着急，静电给大家推荐几款最常用的。

推荐插件之一：Content Generator Sketch Plugin

做app设计的时候，我们可能会使用各种各样的头像来营造真实效果。 但寻找头像并做遮罩是一件非常耗时耗力的事情，但我们又不想把头像做的千篇一律对吧？ 这个时候神器来了，快来下载这款 Content Generator Sketch Plugin吧。 只需选中你要填充头像的图形，他会帮你随机选择并填充合适的图像。 看看效果吧。

这个插件比较大,大概80m左右,所以请多耐心的等待下载完成. 如果实在下载很慢,那么请使用这个网址使用迅雷直接下载,然后按照上文的方法解压并拷贝到文件夹中 [https://codeload.github.com/timuric/Content-generator-sketch-plugin/zip/master][https_codeload.github.com_timuric_Content-generator-sketch-plugin_zip_master]

![format_png 4][]

当然随机生成用户名也是可以的.

![format_png 5][]

还可以有随机的大段文本生成.

![format_png 6][]

恩,这样的效果图,岂不是比做一个元素然后不断拷贝粘贴帅气多了?毕竟,我们的效果图要模拟最真实的效果不是吗?

推荐插件之二：Sketch Measure

我们在做完设计稿后,需要告诉前端开发工程师,图片是多大尺寸,这段文本是多大字号,间距是多少。这个时候，sketch messure就派上用场了，相比传统的标注方式，在软件内标注极大提高了我们的工作效率。我们只需选中两个元素，然后选择plugins菜单， 就可以标注图片尺寸，文字字号，间距等等等等，这一切不需要你自己一个个的打字上去哦，只需要告诉sketch你要标注那些元素，要标注什么，就可以一键搞定了。 效率极大提高，我们可以腾出更多的时间来更好的设计我们的作品了。

![format_png 7][]

tips：要标记，首先选择要标记的一个或者多个元素，然后选择plugins里的标注方式即可完成自动标注了。标注完成的设计稿，直接输出就可以给前端开发工程师了。

另外要注意的一点，标注的时候，一定要选对相应的Design Resolution 。 安卓的按照安卓的解决方案标注， ios的按ios的方式标注。这样才能确保你的设计稿被前端工程师正确的实现出来。静电认为，这个标注非常方便，特别是标注字体的时候，插件直接按照标注解决方案换算出正确的字号，方便开发工程师调用。对于ios和安卓的标注，一般各自选择一套即可。 比如ios选择Retina，安卓可以选择xxhdpi或者xhdpi。

![format_png 8][]

### 推荐插件之四：Rename it ###

对于app设计者来说,我们通常需要切出不同尺寸的图标来适应各种机型或者分辨率.这个时候,我们需要将某些参数体现的文件名或者图层名称中方便我们非常快速的知道,这个图层的属性,比如长宽高等等.  或者,我们需要批量将文件或者图层进行命名. Renameit 插件可以轻松帮我们办到.

目标:将图中的三个形状按照宽高来批量命名.

第一步,选择要批量命名的元素.

第二步,选择Plugins > Rename it ,在弹出的对话框中,设定命名规则. 这里要说明的是, %N %W这些都是变量,会根据图片的尺寸来自动填充,我们需要的是设定这个规则即可, 接着我们输入下面的参数(请自己填写文件后缀),然后确定. 这个时候图层就会按我们要的规则明明.

![format_png 9][]

图层命名规则参数:

- 输入号 “+” 和你想添加的文本即可在适当的位置添加固定字符（如：+ button）

-  “%N” 将图层名按顺序加上数字后缀。“%n” 则是加上倒序的数字。（如：item %N）

- 保留并移动原图层名： 输入新的图层名时，使用 “\*” 号代替原图层名。（如：big \* button）

- 添加图层的长度和宽度：输入 “%w” 或者 “%h” 来添加图层的长和宽。（如：rectangle %w 或者 rectangle %w x %h）

5. marketch 自动标注软件

6. craft    内容填充

7. flavor    中文内容填充

8. iconfont

9. magic mirror  展示差距

### 四、效率拓展 ###

下图是给大家推荐的11款常用 sketch 插件和一个 Sketch 文件版本管理工具，下面我就依次介绍下这11款插件和1个软件。

![format_png 10][]

[Runner][] —— 使用命令行来提高你的工作效率

[Cfaft ][Cfaft]—— 帮你提高效率的自动填充神器

[Rename it][] —— 快速批量重命名你的图层

[Remove Unused Symbols][] —— 一键删除未使用的 Symbol

[Artboards to PDF][] —— 批量导出选定画板为多页 PDF

[ImageOptim][] —— 一键导出所有切片资源并自动优化体积

[Sketch Measure][] —— 快速创建规范为开发者和团队协作提供方便

[Midnight][] —— 增加替换主题功能及小工具

[Flavor ][Flavor]—— 给你的设计加点料

[Sketch2AE][] —— 轻松导出 Sketch 资源至 AE 并自动定位

[Anima][] —— 可以实现自动布局

[Abstract][] —— Sketch 文件版本管理软件

[format_png]: /images/20221124/f33e63389edf4eea83663c454159d1b0.png
[http_www.bohemiancoding.com_sketch_support_developer]: http://www.bohemiancoding.com/sketch/support/developer/
[format_png 1]: /images/20221124/4b312388661846b187104805be743c7e.png
[format_png 2]: /images/20221124/02d73cb60fd94232a3251c3cfbdb3b73.png
[http_pan.baidu.com_s_1dD3VeUX]: http://pan.baidu.com/s/1dD3VeUX
[format_png 3]: /images/20221124/88370aa2d0224915b4e768d3d0b94b6d.png
[https_codeload.github.com_timuric_Content-generator-sketch-plugin_zip_master]: https://codeload.github.com/timuric/Content-generator-sketch-plugin/zip/master
[format_png 4]: /images/20221124/9232d0bec09e4f32bf8dd24800d33d4d.png
[format_png 5]: /images/20221124/24169108259e436e90d0c90ad6f87087.png
[format_png 6]: /images/20221124/3f67c6c8f50b4579a0df05b72eb3d4ce.png
[format_png 7]: /images/20221124/2d363e7f907b49cdae1333bd45417ef1.png
[format_png 8]: /images/20221124/c438524b7ed942bf90d366049e0093c0.png
[format_png 9]: /images/20221124/fcee339e56af49cfb2ce18b301c82a71.png
[format_png 10]: /images/20221124/dbfb6110ab204d7990e2464f134838d3.png
[Runner]: http://sketch.im/plugins/12
[Cfaft]: http://sketch.im/plugins/16
[Rename it]: http://sketch.im/plugins/17
[Remove Unused Symbols]: http://sketch.im/plugins/48
[Artboards to PDF]: http://sketch.im/plugins/52
[ImageOptim]: http://sketch.im/plugins/94
[Sketch Measure]: http://sketch.im/plugins/1
[Midnight]: http://sketch.im/plugins/129
[Flavor]: http://sketch.im/plugins/89
[Sketch2AE]: http://sketch.im/plugins/61
[Anima]: https://www.animaapp.com/#sketchtocode
[Abstract]: https://www.goabstract.com/