Miaow

由微信设计团队打造的强大 Sketch 插件合集

安装

下载并解压 Miaow.zip
双击 Miaow.sketchplugin 完成安装

界面

菜单栏

工具栏

使用

语言设置

执行 Miaow > Settings，在弹出的对话框语言设置项选择 简体中文(zhCN) 并保存
管理 UI Kit

UIkit 同步管理

本功能用于团队输出 UIKit 设计标准，并用于团队成员快速协同

快速开始

新建一个 Sketch 画板，执行 WeSketch > 管理 UIKit > 同步 UIKit，插件提供了三个可使用的示例

选择 WeUI 或其它，点击确定，所打开的画板会下载已经在放在 http 服务器的 UIKit 并导入到现在的画板

如何设置

打开 WeSketch > 同步源设置，界面中出现如上界面，按照示例新增一个你已经制作好的并上传到网络的 UIKit 地址配置到界面中的输入框中

有些团队可能使用 DropBox 同步团队 UIKit 到本地，插件也提供了选择本地文件同步的能力，点击文件夹 Logo 即可选择

特别注意：若同时配置 UIKit 及颜色库地址到一个项目中，同步 UIKit 同时会同步颜色库内容，但单独同步颜色库不会同步 UIKit 库

如何制作自己的 UIkit

导出 UIKit

UIKit 是通过 Sketch 的 Symbols 功能，达到一次制作 Symbols 多处使用。将你制作好的 UIKit 文件通过本插件的导出 UIKit 功能导出成 Sketch 文档

注意：由于此同步工具是通过元素名称判断是否同步的内容与原画板内容是否相同来做同步操作的，所以尽量避免画板中的 Symbol 没有相同命名，通过本插件的导出 UIKit 功能，会自动将重名的元素重命名（原名后加数字）
管理色板

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

快速开始

新建一个 Sketch 画板，执行 WeSketch > 管理色板 > 同步色板，插件提供了一个可使用的示例

选择 WeUI 点击确定，所打开的画板会下载已经在放在 http 服务器的色板并导入到现在的画板，在颜色设置的 Document Colors 面板可以看到已经同步的颜色标准库

如何设置

打开 WeSketch > 管理色板 > 同步源设置，设置方法同 UI Kit

如何制作自己的颜色库

导出色板

先将需要制作的颜色添加到 Document Colors 中，然后点击导出色板，插件会将颜色内容导出成 JSON 文件，将此文件存放在 http 服务器或使用 DropBox 等工具进行同步即可
批量替换文本、字体、颜色

本功能用于快速解决产品反复无常的脑洞（我们再改一下下，再改一下下，算了，换回第一版吧）

文字

字体

颜色

功能说明

当要修改一个全局颜色的时候，最快方法就是先选中有这个颜色的元素，再打开全局替换颜色功能，你会发现选中的元素颜色已经出现在替换面板中。（全文文字替换也是这样）

字体批量替换用于解决 iOS 大版本升级后，原设计稿中文字字体不再适应新的版本的问题
交互连线

本工具用于快速标注 UI 设计中的页面关系

快速开始

本功能与市面上已有的连线工具最大的不同是，可以自动绕过障碍，连线不会重合

选中页面中任何两个元素，点击交互连线。即可完成两者之间的连接

使用方法

十分建议记下功能快捷键，初始快捷键为 command ⌘ + shift ⇧ + 1 若想自定义快捷键，可打开 WeSketch > 快捷键设置，进行自定义快捷键

本功能只有一个功能键，即交互连线按钮，但在不选择元素选择一个元素，选择两个元素点击功能键时，效果各不相同。可能会吐槽为什么一个键要集合这么多功能，但是当用快捷键完成操作之后，你会发现非常顺手

1、当没有选择元素按下快捷键时，画板中的线会自动重绘，用于如果将页面元素进行了调整之后，重新调整画布中的连线的功能

2、当选择一个元素按下快捷键时，若此元素有从它出发的连线，那么会自动删除此条连线。并重新调整画布中的连线

3、当选择两个元素按下快捷键时，会按照从先选到后选的顺序，绕过 Artboard 元素，生成连线

设置颜色及细度粗细

进入交互设置即可调整连线的颜色及粗细
注释标记

本工具用于快速标注设计中对元素进行注解

使用方法

十分建议记下功能快捷键，初始快捷键为 command ⌘ + shift ⇧ + 2 若想自定义快捷键，可打开 WeSketch > 快捷键设置，进行自定义快捷键

本功能只有一个功能键，即注释标记。但依然有很多细节

1、选择一个元素，若此元素没有添加过标记，按快捷键即可添加一个在右边的标记

2、选择一个已有在右边的标记，按快捷键会删除右边的标记，生成左边的标记

3、选择一个已有在左边的标记，按快捷键此时若选中的数字在页面中不为最后一个标记（假如页面中有9，删除第8个标记），页面中会弹出选项

4、选择删除标记并保留排序（选择此选项会将 8 标记删除，9 标记不动，下次再标记会以 8 开始）

5、删除标记并重新排序（选择此选项会将 8 标记删除，之后 9 标记变为 8，如果后续还有会依次类推，下次再标记会以最后一个数的后一个数开始）
自定义宽高导出

导出 icon 补齐统一宽高

本功能用于快速解决一些占位 icon 需要扩大点击区域，或者 icon 需要导出统一尺寸但又不能拉伸的需求

快速开始

选中任意个 icon 点击导出，或使用快捷键 command ⌘ + shift ⇧ + U 弹出窗口填入你统一导出的宽高、倍数、格式，确定之后选中目录，即可获得相对应的图片

功能说明

同时文件名称也会放入你的剪贴板，用于快速完成代码需求
导出代码（含小程序版）

本功能用于开发用一个快捷键就能导出各种设计稿中的字体及各种基本块状样式能力

快速开始

选中一个需要获取对应代码的字体或者图形，使用获取样式的快捷键 command ⌘ + shift ⇧ + D 插件会按照常见 CSS 写法将样式放入剪贴板中

功能说明

本功能重点解决当拿到不同尺寸设计稿时，例如宽 320 375 414 750 1242，需要人脑换算输出成统一的尺寸问题。所以本插件对需要获取样式的父 Artboard 尺寸敏感，若父 Artboard 尺寸非标准，或无父 Artboard 会默认为 2 倍图

本功能提供设置功能，除了导出标准 Web 样式，还可以导出以 rpx 为单位的小程序代码。点击获取代码设置，可以将获取的代码更换成 rpx 标准。rpx 的设计标准是以 750 宽度为标准设计，所以非 750 宽度的设计稿，会按照小程序尺寸换算
快捷取色

选中一个你需要获取颜色的字体或图形，使用快捷键 command ⌘ + shift ⇧ + C 插件会导出 Web 标准色，或带透明度会使用 rgba 形式
图标库

本功能提供常用 icon 并提供搜索功能，让使用 Sketch 完成交互稿的过程中不需要再费心去找 icon 了

快速开始

打开 WeSketch > 图标库，点击图标库中任意 icon 即会出现在 Artboard 中央供设计交互过程中快速使用
自定义快捷键

十分建议在了解功能之后首先搭建自己常用功能的快捷键

快速开始

选择一个你需要设置的功能的对应输入框中使用 command ⌘ shift ⇧ alt ⌥三个功能键一个及以上，搭配字母或数字键同时按住，输入框中出现你想要的组合键，点击确定后尝试使用

注意

由于 macOS 系统和 Sketch 本身有大量的默认快捷键，所以设置的快捷键容易产生冲突，如发现设置的快捷键无法使用请尝试更换快捷键使用