玩转 Sketch，不容错过的 5 大实用插件推荐

在之前的文章中，笔者为大家介绍了Sketch 的入门教程、实用技巧和资源集锦，相信大家对Sketch已经有了初步的了解和认识。除了基础的矢量设计功能以外，插件更是让Sketch保持强大的独门秘籍。Sketch开放了第三方插件接口，设计师可以在几百种的插件中轻松找到适合自己工作方式的插件，并且他们都非常容易获得和安装。

这里笔者为你总结了五款超实用的Sketch插件，让你把Sketch用到起飞。

1. Marketch

做完设计稿后，我们往往需要告诉前端开发工程师，图片的具体尺寸，文本字号和间距等，Marketch这个插件会让你充满惊喜。它是一款支持一键标注和一键切片的Sketch插件，可以实现动态标注、单位转换和动态切图等超级实用的功能。

它不仅可以帮设计师减负，免去标注的烦恼，程序可以通过内置的页面查看所有要素的布局参数，甚至是CSS代码。此外，这款插件可以在本地生成HTML，也不用担心安全和隐私问题。

插件下载地址：https://github.com/tudou527/marketch

使用教程：

第一步：运行插件->market

第二步：命名并导出

第三步：解压zip，运行Html文件，即可在浏览器查看效果。

效果demo浏览：http://tudou527.github.io/marketch/

2. Mockplus

众所周知的是，Sketch是一款矢量设计软件，如果我们想要对设计稿继续进行交互设计和团队协作的话，这里推荐为Sketch安装Mockplus的插件。在完成Sketch的设计后，可以将其导出为MP的项目文件，从而在Mockplus中进行快速原型设计，并且与团队成员进行协作和批注。

插件下载地址：https://www.mockplus.cn/download

使用教程：

第一步：下载并安装Sketch插件，双击打开.sketchplugin文件

第二步：完成设计后，菜单选择Plugins -> Mockplus ->导出项目文件

第三步：在下面的界面中设置项目选项，你可以选择导出部分的 Artboard，同时你还可以选择导出的项目类型和图片大小信息，这些选项会影响最终导出的项目文件。设置好以后，选择“导出”。

3. Content Generator Sketch Plugin

我们在做一些页面的时候可能就会需要用到数据填充的功能，提高保真度。最常见的就是填充各种不同的头像，而且最好不是千篇一律的头像，这个插件就能快速地实现这样的效果，只需要选中需要填充头像的图形，就会帮你随机选择并填充合适的人物头像。

除了图像之外，这个插件也能随机生成用户名，邮箱和电话，做联系表的时候效率就相当高了。

插件下载地址：https://github.com/timuric/Content-generator-sketch-plugin

值得一提的是，类似的数据填充也可以使用Mockplus的格子功能实现，如果有图片组件，当创建单元格的时候，会自动在每个单元格中的图片自动填充图像。图片类型有“占位图形、头像、人物肖像、设计、商务”等多种类型。如果是文本，你可以设置文本组件的“自动填充类型”，比如选择为“日期”，那么所有单元格中，这个文本的内容都会变成随机的日期值。

4. Rename it

在设计时，我们常常需要批量修改图形名称，修改的名称最好是可以体现图层属性和参数，就可以快速方便地找到想要的图层。Rename it 将会是你的绝佳助手。

下载地址：https://github.com/rodi01/RenameIt

使用教程：（见上图GIF）

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

第二步，选择Plugins > Rename it，在弹出发对话框中命名规则。里面的%W%H都是变量，会根据图片尺寸自动填充，我们设定好规则，点击确定就行。

具体的话有四种修改方式，这里可以看演示视频。

https://vimeo.com/85064841

1）扩展图层名：输入号 “+” 和你想添加的文本即可。（如：+ button）

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

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

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

5. IconFlower

这个插件非常适合于制作现在流行的多icon背景，你不用再机械地一个一个拖拽icon到画布不同位置，你只需要把所有素材放在一块画布，全部选择点击IconFlower就可以自动布局你所有icon。

下载地址：https://github.com/avadhbsd/IconFlower

使用教程：

第一步：在Sketch中安装IconFlower插件。

第二步：创建Artboard，在Artboard上放置图标/元素/图层，层数越多越好，推荐使用Iconjar进行拖拽。

第三步：选中要布局的所有图标/对象/图层。

第四部：点击插件运行后图标就会以向日葵的模式布局了。

以上就是为大家推荐的5款最佳Sketch插件，有了这些强大的插件的武装，相信你可以在Sketch上设计得更加游刃有余。当然，如果你还有更好的推荐，欢迎在评论中留言。

关键字：交互设计, 原型设计

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！