Sketch是UI设计的好朋友，插件更是必不可少的工具。本文中会列举10个常用的插件，并配有相应的教程说明，希望可以帮到刚接触的Sketch的同学。

1）Symbol manager

https://gumroad.com/l/sketch-symbols-manager

Symbol是sketch中一个很重要的功能，设计师可以封装好一个组件，然后多次利用，而无需重复设计。近两年，随着Design System的兴起，一个好的UI kit是设计团队所必须的拥有的，但是管理这套组件随着组件数目的增多和迭代，又变得越来越困难。所以Symbol manager绝对是一个物超所值的插件，它可以帮助你摆脱以上的烦恼。

不过在使用这个插件的时候，需要有梯子，同学们请备好梯子。它的界面很像一个文件管理系统，它有五个功能

第一：你可以改变组件和组件组的名字

假如我们有3个组件，它们的名字分别为按钮1、按钮2、和按钮3，但是我们希望把它们的名字改成按钮样式1、按钮样式2和按钮样式3，我们就可以直接通过插件更改。

第二，它可以创建组件组，并且更改组件组的名称。

插件会自动更新所有组内组件的命名。

第三：在组之间拖拽文件夹

如果你不小心讲组件归类到错误的组中，你可以利用插件，轻松的拖拽它到正确的组中。

第四：寻找到没有使用过的组件

Symbol Manager 可以告诉你哪一个组件没有被用过，并用红色的小点作为提示。任何没有用过的组件，在一个复杂的组件库中都是多余的，这个插件可以帮助我们更好的管理组件库。

第五：删除组件和组

最后一个功能是删除组件和组，当你觉得任何组件或者租都是多余的，你可以删除它们

2）Anima-Paddy

当我在写这篇教程的时候，我其实是想推荐David Williames开发的Paddy插件，他的Github链接https://github.com/DWilliames。 他已经开发了paddy-sketch-plugin， 这是一款非常成功的插件，而且他还尝试开发Paddy 2， 这个插件尝试解决很多版本1没有解决的问题，比如组件套组件（Nested Symbol）的自适应问题， 可惜的是由于Sketch 52版本带来的变化，使他无法继续维护插件，他决定停止插件的开发。

他的声明 https://github.com/DWilliames/paddy2-beta/issues/76

现在的插件已经无法适配更高版本的Sketch, 所以我决定为大家介绍一个替代性的插件Anima：

https://www.animaapp.com/pricing

这是一款可以在Sketch中制作动画的插件，但是在这里我要介绍的是它最新的一个功能, 自适应功能。在18年11月14日，这个插件支持了多重组件的自适应问题（Nest symbols），简直是需要维护UIKit组件的福音。

插件下载链接：https://animaapp.github.io/docs/v1/auto-layout/02-installation.html

快速的设置边距（Padding）

假如我们要设计一个按钮，可以利用插件快速的设置边距

组件中的Overrides

我们可以将这个按钮转换成组件，然后我们改变按钮文字，可以看到按钮的宽度在做自适应

组件中的组件自适应（Nested symbols）

Anima 已经解决了做UIkit最头痛的问题，就是组件中的组件自适应问题。

组件中的定位问题

在上面的自适应演示中，我们已经发现了一个问题，就是在改变组件文案长度的时候，它的相对位置发生了改变，没有保持居中。为了解决这个问题，我们需要用到Pin这个功能，它和Sketch原生自带的Resizing有功能重合，但也有拓展的功能。下面请看演示如何让按钮一直保持居中

以上就是这个插件的主要功能，当然它还有一些其他功能，但是在这里我就不多赘言了，有兴趣的同学可以更深入的了解一下。

3) Sketch Measure

Sketch Measure是一个最好的输出插件，它的作者是一个中国人，所以它有中文的文档。

https://github.com/utom/sketch-measure

首先我们先看一下这个工具栏。按住alt键，再点击按钮，可以看到更多的设置

Spec Export (文档输出)

我个人认为这是最重要的功能，其他功能只是辅助性的，也许你完全用不到。它可以一键生成基于html的输出文档，包括Icon等切图输出，是一个非常实用的功能。

输出设计规范

选好你需要输出的画板，然后点击文档输出按钮，你就可以得到包含了输出稳定、切图和设计图片的一个文件夹。输出文件里面有四个部分，分别为assets、index.html、links和preview。我们可以点开index.html，里面有输出的文件，可以看到尺寸已经一些css的样式。

输出切图

这个插件可以将设置为可输出的组件输出到Assets文件夹中，这样我们给开发的输出文件中，就不需要单独输出切图了，简直是一键搞定。

Spacings & Sizes(间距&尺寸)

在极个别的时候，你只需要输出一个组件的尺寸或者间距的时候，就可以用到这个功能

我们也可以做一些设置，调整输出图的位置等属性。按住alt键，点击按钮。

4) Cleanup-Useless-Groups

我们在设计的过程中，有些时候会遗留下一些空的组（Group），这些空的组会降低我们的工作效率，所以我们需要定时的清理没有用的组。Cleanup-Useless-Groups这个插件可以帮助我们清理没有用的组，使我们的源文件保持整洁。它的使用方法很简单，选中你要清理的对象，可以是整个文档，也可以是某个画板，甚至是某个大组，然后点击插件按钮，多余的组就被自动清理，非常的方便。

https://github.com/bomberstudios/Cleanup-Useless-Groups

5） Merge Duplicates Symbols

在我们维护组件库的时候，常常会因为把组件随意的复制粘贴，导致组件的多余。在组件库中，同一个样式的组件有多个重复的组件，这就提高了我们维护组件库的成本。我们需要一个插件来帮助我们合并同类的组件。

Merge Duplicates Symbols是一个非常简单实用的插件，可以帮我们解决组件重复冗余的问题。

https://github.com/oodesign/merge-duplicate-symbols

假如我们有两个同样的组件，它的命名是按钮样式1。我们可以点击Merge Duplicates Symbols插件按钮，然后选择Merge symbols with the same names (合并相同名字的组件)，我们会发现2个组件，一个是有4 instance（4个实例即在源文件中出现过4次）和0 instance，通常我会选择被引用数多的作为最终保留的组件。

这个插件不仅仅可以合并名字相同的组件，它可以合并名字不相同的组件，当然我们需要指定2个需要合并的组件。

6） Sketch Runner

Runner在欧美设计圈是非常流行，它帮助设计师提高设计的效率，但是由于很多功能是给予英语单词，如果我们用中文的话，一些功能会缺失。虽然如此，但是我觉得这个插件还是值得一试。

安装插件

这里说的安装插件不是安装Runner,而是通过它安装其他的插件。当我们访问很多插件Github的时候，我们会看到Sketch Runner的标志，这就说明这个插件可以通过Sketch Runner自动安装。此外补充一句，Runner插件的快捷键是『Command』 + 『 ’ 』。

插入组件

Runner可以帮我们快速找到组件，并且插入到画板中，但是不幸的是，组件的名词必须是英文。在插件面板中打insert然后按Tab键，就可以进入插入组件模式。

选择画板

Runner可以帮我们快速找到画板，同样的，画板的名词也必须是中文的。

Runner还有其他的几个功能，不过我个人觉得用处不大，有兴趣的同学可以自己尝试一下。

7） Automate

介绍完Runner以后，我觉得很有必要介绍另外一个能够提升工作效率的Sketch插件，它就是Automate，它的作者同样是中国人，所以有中文文档可以参考。 

https://github.com/Ashung/Automate-Sketch/blob/master/readme_zh.md

平心而论，Automate的学习曲线比较高，就和设计软件的快捷键类似，你并不需要了解所有的功能，但是掌握其中的一些功能，确实能够提升你的工作效率。 作者推荐这个插件和Runner一起使用，那让我们来尝试这使用几个功能。

替换字体

打开Runner插件的快捷键是『command』+『’』,我们在Runner中输入Replace text font，然后选中替换字体和被替换字体，文件中所有相关字体都会被替换。

移除未使用的symbol。

同样的打开Runner, 然后输入Remove unused symbols，这些指令是很语义化的，如果你英语还可以的话，完全不会成为学习的障碍。

清除辅助线

我们同样可以用这个插件来搞定，而不用点击View,然后Canvas，再点Show Rulers，这样可以节省我们一些时间。这里需要注意一点的是，在清除辅助线的之前，必须选择相应的画板，否则清除不能正常进行。

这个插件有上百个功能，有兴趣的同学可以根据自己的需求尝试使用，我在这里就不一一赘述了。

8）Unplash

Unplash现在是Sketch的官方插件，它可以从Unplash上现在图片到图层。而且图片的类型可以根据自己的喜好设置，十分的方便。

9） Kitchen

第9个和第10个插件是很类似的，一个是阿里巴巴开发开发的，另一个则是Invision开发的。它们都有各自的优点，也都有相应的不足，首先让我们来了解一下Kitchen这个插件。它有7个功能，分别为Iconfont图标库、设计稿上传、智能排版、数据填充、色板管理、Symbol同步和组件生成器。

我在这里要介绍2个功能，第一个就是Iconfont图标库。Iconfont图标库主要的目的是帮助设计师快速的使用现成的Icon，这些Icon都是来自Alibaba icon。当你需要快速开发出原型，但又没有时间自己做设计，你可以在Sketch中轻松的拖拽出现成的icon。

第二个就是组件生成器。组件生成器主要是帮助设计师在参与中台项目中快速设计原型。它的操作类似EXCEL生成表格等操作，十分的简单的方便。

Kitchen色彩管理也是非常好的功能，十分的简单好用，我在这里就不赘述了。

10） Craft

它的官网：https://www.invisionapp.com/craft

Craft主要有6个功能，分别是Prototype(原型)、Stock(图库)、Freehand（标记）、Sync（同步）、Data (数据)和Duplicate(复制)。它的缺点就是在于其中三个功能都整合了Invision，如果设计团队不用Invision的活，那么这个插件就基本上算被阉割。并且自从Sketch支持了原生的原型功能，Prototype功能基本也可以被抛弃。所以我在这里只着重介绍Data这个功能。

Data的目的就是『讲真正的数据带进设计』，当我们在做设计中， 为了表现设计的真实性，我们一般会手动的粘贴一些真实的数据，但是这样会大大的浪费我们的时间。Data这个功能帮助我们解决手动添加数据的困扰，它可以自动帮我们填充真实数据。那么现在让我们先来看一下它的界面。它有3个Tab, 分别为Custom、Web和JSON三个部分，这三个部分最常用的应该是Custom。那么我们就来看它的Custom功能

Custom

这个功能我经常使用，和之前提到的Unplash插件差不过，但是图片类型只能从有限个关键词中选择。而且在我更新到52以后，它就没办法和Duplicate一起使用了。

Web

Web是一个非常有趣的功能，但是由于涉及到一些前端知识，比如RESTful API等，我准备另出一篇教程详细的说明这个功能。

JSON

很多设计师，尤其是要参与Web端项目的设计师，都在考虑设计师要不要懂一些前端知识。我的答案是当然，因为我的研究生读的是IT，我个人的体验是懂技术会更帮助你参与项目进程。另一个理由就是现在这个功能就需要我们设计师具备一点点前端知识。JSON的全称是 Javascript Object Notation, JSON是存储和交换的语义格式。为了使用这个功能，我自己生成了一个简单的JSON文件，我们可以讲JSON文件拖入框中，如果格式正确，那么我们就能在插件上看到数据。选中设计搞中的文字，再点击数据中相应的文字，我们就可以把设计稿和数据连接起来。

这个功能绝对不仅仅如此，配合Duplicate功能，我们可以将多个卡片设计同时绑定数据，而且都是自动填充。

以上就是关于这10个插件的介绍，如果各位同学觉得有帮助，请点赞并关注我，我会持续分享一些UI有关的教程。