五分钟了解微信团队打造的 Sketch 插件：WeSketch 【百科全说】

前言

WeSketch 是一个强大的 Sketch 插件合集，由微信设计团队量身打造，让设计师和开发者更佳高效的使用 Sketch。

下载地址

Github：weixin/WeSketch
网盘：

WeSketch 官方介绍

更高效的团队协作，如：UIKit 同步、色板同步等。
更快捷的交互设计，如：图标库、自动连线、标记注释、全局替换文字、字体、颜色。
更精准的前端还原，如：补齐宽高导出图片、导出 CSS 代码（支持小程序）等。

面板功能

对于一个尝鲜者，第一步就是找到插件的工具面板。我们先来试试面板上的十一个功能。

1、连线／Link（command shift 1）

众所周知，四娃和五娃是一起出生的，可以把他俩连在一起。

线有点粗哈哈，距离过短不适合使用。线不在 Artboard 上，是锁定在 Page 上的，因此不会跟随 UI 元素的拖动（没有 Omni Graffle 中磁力点的功能）。适合设计师在标注页面间跳转逻辑时使用。

2、标注／Mark（command shift 2）

六娃常年隐身，我们需要标注下他的位置。

选中目标后点击可以点击三下，第一下标注在右边出现，第二下会将标注换到左边，第三下则会取消。目前只支持数字序号。这个应该是要配合文本框使用的，在页面上逻辑较复杂处 mark 一下，然后在文本框里打上序号并进行细节描述。

删除中间序号的话，会让你选择是保留序号还是重置序号。

3、Font／字体替换（command shift f）

可以替换整个文件或者当前页面的字体。

4、Text／文本替换

四娃擅火，他希望大家叫他火娃。

同样支持全文件以及当前页面的替换，但是用词和 Font 功能中不同，不知道是不是不同的工程师开发的。另外，支持正则表达式，懂行的同学可以慢慢尝试。如果 PM 要求把页面中所有的“手机”替换为“移动设备”，这个功能可以帮上不少忙。

5、Color／颜色替换（command shift c）

六娃闪现后继续隐身。

有时候会接到这么一个需求，需要微调下整个产品的主色调。需求虽小，工作量却是非常饱和，先从 symbol 下手，然后还要挨个界面查漏补缺。颜色替换功能则解决了这个设计师头疼的问题，简化了设计稿中全局改色的操作。

6、Icon／图标库

他们发现爷爷没了。

不支持直接拖移导出。支持自定义图标的尺寸和颜色。面板上方有筛选功能，但目前均只有一个选项，应该是还在完善中。每个成熟的设计团队都有自己的一套图标库，有的用文件夹管理，有的全部放在 .psd 里，有的放在 Sketch 文件里。还有些设计师喜欢去阿里的 Icon Font 上找图标素材。这个图标库则是无缝嵌入了设计流程，让设计师的注意力都停留在 Sketch 里，而不用转场。另外安利大家两个应用，Nucleo 和 Icons8，都是非常好用的图标库。

7、UI Kit／同步 UI 库