微信设计团队量身打造，最强Sketch插件合集

一套功能完备的 Sketch 扩展工具，由微信设计部门特别定制，能助设计师和开发者更加得心应手地运用 Sketch。

下载&安装

获取 Zip 压缩文件并展开内容，适用于 Sketch 44版本及更高版本。

打开wesketch.sketchplugin安装使用

界面预览 菜单栏

工具栏

功能 教程

1.管理Ui Kit

这个功能旨在制定 UIKit 设计规范，同时帮助团队成员高效合作。

创建一个 Sketch 草图页面，挑选 WeSketch = 管理UIKit = 同步UIKit，这个插件设有三个可参考的范例。

确定选用 WeUI 或其它选项，接着点选确认，新启用的绘图界面将自动获取 http 服务器上预置的 UIKit 组件，并将其载入当前绘图环境。

2.管理色板

本功能用于团队约定一套颜色标准，并用于团队成员快速协同。

创建一个空白的设计页面，点击工具栏中的调色板设置，在选项中选择与插件同步，这里展示了一个预设的调色方案供参考。

选择 WeUI 的确认按钮，随后系统将启动画板界面，接着会自动从 http 服务器获取预设的色板，最后将这些色板内容添加到当前画板中。

在调整色彩方案的界面中，可以查找到预设好的配色集合，那里展示着所有统一规范的颜色选项。

3.批量替换文本、字体、颜色

这个功能旨在迅速应对产品构思的频繁变动，有时会不断调整，最终又决定采用最初的设计方案

文字

字体

颜色

这个功能操作起来非常便捷，几乎无需任何学习就能上手，因此相关介绍主要是为了戏谑产品经理而设的：）

4.交互连线

这个软件专门用来迅速标示界面布局之间的关联性，它和市面上常见的画线软件最显著的差异在于，能够自动避开阻挡物，确保连线不会与已选页面中的任何部分产生交叉，只需轻点交互路径，就能轻松建立两个元素之间的关联。

5.注释标记

这个装置专门用来迅速对设计中的各个部分进行说明。在页面上随便点中一个物件，接着按下添加说明的按钮，就能按照挑选的次序，依次得到从一数起的编号。

最好把功能热键记下来，默认热键是 command+shift+2，如果需要修改热键，可以进入 WeSketch 的热键配置界面，自行设置新的热键。

本功能只有一个功能键，即交互连线按钮。但依然有很多细节。

挑选一个物件，倘若该物件未曾带有记号，运用快捷键，就能在右侧位置加上一个记号。

挑选右侧的指定符号，运用快速键操作，能够清除该符号，并创建左侧的对应符号。

挑选左边已有的标识，运用快捷键操作，当前若选取的数字在页面上并非末尾的标识（比如页面有9个，移除第8个标识），页面上便会显现若干选项。

选定删除符号并维持顺序不变 （选定此项将使编号8失效，编号9保持原样，后续标记将从编号8重新计数）

移除选定标识并调整次序，此操作将移除编号8的标记，随后编号9的标记会转换为8，若存在更多编号则依次递减，后续新增标记时将采用当前最大编号之后的数值

6.自定义宽高导出

这个功能能够迅速应对两种情况，一是让原本用作占位的图标拥有更大的可点击范围，二是需要将图标输出为固定尺寸，同时又不允许对其进行拉伸变形。

任意图标均可进行选取并执行导出操作，或者借助 command shift U 的快捷指令，将会出现一个对话框，需要在此处输入需要批量导出的尺寸数值、比例系数以及文件类型，完成设置后，再选取目标文件夹，最终即可得到所需的图像文件。

7.生成代码（支持小程序）

这项功能旨在帮助开发者借助一个简捷的按键操作，实现从各类设计素材中提取字体信息以及多种基础模块式样，从而提升工作效率。

选定一个需要获取代码的字体或图形，按下 command shift d 的快捷键，插件会依照通行的 css 格式，将样式信息复制到剪贴板里。

8.快捷取色

选择一个需要提取色彩信息的文字或图像，按下 command shift c 组合键，该插件能够输出符合网页规范的色彩值。如果需要包含透明度，则会以 rgba 格式显示。

9.图标库

这个功能内置了多种常用图标，同时具备检索功能，帮助用户在运用 Sketch 设计交互原型时，无需再花费精力去搜寻合适的图标。

启动 WeSketch 软件，接着进入图标资源库界面，任意选取一个图标，该图标就会立即呈现在画面正中央，方便在制作交互流程时便捷调用。

10.自定义快捷键

强烈建议在掌握各项功能之后，优先设置个人常用操作的快速启动方式，借助这个工具，能让你的设计或编码效率得到显著提升，实现比原先更高效的目标。

在要配置的功能项的文本框里，按住 shift、option、command 其中两个或全部，并配合字母或数字键，保持按键状态，输入框便会显示所设定的快捷键，确认后即可试用。