微信設(shè)計(jì)團(tuán)隊(duì)打造sketch插件集Miaow

Miaow插件是一款由微信設(shè)計(jì)團(tuán)隊(duì)打造的多功能sketch插件合集，這款插件中包含了超多實(shí)用的插件集，包括UI Kit 同步、色板同步、圖標(biāo)庫、自動連線、標(biāo)記注釋、補(bǔ)齊寬高導(dǎo)出圖片、導(dǎo)出 CSS 代碼等功能。

功能介紹及教程：

1、管理 UI Kit

本功能用于團(tuán)隊(duì)輸出 UIKit 設(shè)計(jì)標(biāo)準(zhǔn)，并用于團(tuán)隊(duì)成員快速協(xié)同。

快速開始

新建一個 Sketch 畫板，選擇 WeSketch => 管理 UIKit => 同步 UIKit，本插件為您提供了三個可使用的示例。

選擇 WeUI 或其它，點(diǎn)擊確定，你所打開的畫板，會下載已經(jīng)在放在 http 服務(wù)器的 UIKit 并導(dǎo)入到你現(xiàn)在的畫板。

如何設(shè)置

打開 WeSketch => 同步源設(shè)置。界面中出現(xiàn)如下界面。

按照示例新增一個你已經(jīng)制作好的并上傳到網(wǎng)絡(luò)的 UIKit 地址配置到界面中的輸入框中。

有些團(tuán)隊(duì)可能使用 DropBox 同步團(tuán)隊(duì) UIKit 到本地，我們也提供了選擇本地文件同步的能力。點(diǎn)擊文件夾 logo 即可選擇。

特別注意：若同時(shí)配置 UIKit 及顏色庫地址到一個項(xiàng)目中，同步 UIKit 同時(shí)會同步你的顏色庫內(nèi)容。但單獨(dú)同步顏色庫不會同步 UIKit 庫。

如何制作自己的 UIkit

導(dǎo)出 UIKit

UIKit 是通過 Sketch 的 Symbols 功能，達(dá)到一次制作 Symbols，多處使用。將你制作好的 UIKit 文件通過本插件的導(dǎo)出 UIKit 功能導(dǎo)出成 sketch 文件。

注意：由于此同步工具是通過元素名稱判斷是否同步的內(nèi)容與原畫板內(nèi)容是否相同來做同步操作的，所以盡量避免畫板中的 Symbol 沒有相同命名，通過本插件的導(dǎo)出 UIKit 功能，會自動將重名的元素重命名（原名后加數(shù)字）。

2、管理色板

本功能用于團(tuán)隊(duì)約定一套顏色標(biāo)準(zhǔn)，并用于團(tuán)隊(duì)成員快速協(xié)同。

快速開始

新建一個 Sketch 畫板，選擇 WeSketch => 管理色板 => 同步色板，本插件為您提供了一個可使用的示例。

選擇 WeUI 點(diǎn)擊確定，你所打開的畫板，會下載已經(jīng)在放在 http 服務(wù)器的色板并導(dǎo)入到你現(xiàn)在的畫板。

在你顏色設(shè)置的 Document Colors 面板可以看到已經(jīng)同步的顏色標(biāo)準(zhǔn)庫。

如何設(shè)置

打開 WeSketch => 同步源設(shè)置。界面中出現(xiàn)如下界面。

按照示例新增一個你已經(jīng)制作好的并上傳到網(wǎng)絡(luò)的 UIKit 地址配置到界面中的輸入框中。

有些團(tuán)隊(duì)可能使用 DropBox 同步團(tuán)隊(duì) UIKit 到本地，我們也提供了選擇本地文件同步的能力。點(diǎn)擊文件夾 logo 即可選擇。

特別注意：若同時(shí)配置 UIKit 及顏色庫地址到一個項(xiàng)目中，同步 UIKit 同時(shí)會同步你的顏色庫內(nèi)容。但單獨(dú)同步顏色庫不會同步 UIKit 庫。

如何制作自己的顏色庫

導(dǎo)出色板

先將你需要制作的顏色添加到 Document Colors 中，然后點(diǎn)擊導(dǎo)出色板，插件會將顏色內(nèi)容導(dǎo)出成 JSON 文件，將此文件存放在 http 服務(wù)器或使用 DropBox 等工具進(jìn)行同步即可。

3、批量替換文本、字體、顏色

本功能用于快速解決產(chǎn)品經(jīng)理的反復(fù)無常的腦洞 （我們再改一下下，再改一下下，算了，換回第一版吧）

文字

字體

顏色

快速開始

由于本功能十分簡單打開就能用，所以說明主要用于調(diào)侃產(chǎn)品經(jīng)理。

功能說明

依然有一些小細(xì)節(jié)，再強(qiáng)調(diào)一次一定要配合快捷鍵使用，否則顯得太不 geek。

當(dāng)你要修改一個全局顏色的時(shí)候，最快方法就是先選中有這個顏色的元素，再打開全局替換顏色功能，你會發(fā)現(xiàn)選中的元素顏色已經(jīng)出現(xiàn)在替換面板中。（全文文字替換也是這樣）

字體批量替換用于解決 iOS 大版本升級后，原設(shè)計(jì)稿中文字字體不再適應(yīng)新的版本的問題。

4、交互連線

本工具用于快速標(biāo)注 UI 設(shè)計(jì)中的頁面關(guān)系

快速開始

本功能與市面上已有的連線工具最大的不同是，可以自動繞過障礙，連線不會重合

選中頁面中任何兩個元素，點(diǎn)擊交互連線。即可完成兩者之間的連接。

使用方法

十分建議記下功能快捷鍵，初始快捷鍵為 command+shift+1。若想自定義快捷鍵，可以打開 WeSketch => 快捷鍵設(shè)置，進(jìn)行自定義快捷鍵。

本功能只有一個功能鍵，即交互連線按鈕，但在不選擇元素，選擇一個元素，選擇兩個元素點(diǎn)擊功能鍵時(shí)，效果各不相同。你可能會吐槽為什么一個鍵要集合這么多功能，但是當(dāng)你用快捷鍵完成操作之后，你會發(fā)現(xiàn)非常順手。

當(dāng)沒有選擇元素按下快捷鍵時(shí)，畫板中的線會自動重繪，用于如果你將頁面元素進(jìn)行了調(diào)整之后，重新調(diào)整畫布中的連線的功能。

當(dāng)選擇一個元素按下快捷鍵時(shí)，若此元素有從它出發(fā)的連線，那么會自動刪除此條連線。并重新調(diào)整畫布中的連線。

當(dāng)選擇兩個元素按下快捷鍵時(shí)，會按照從先選到后選的順序，繞過 artboard 元素，生成連線。

設(shè)置顏色及細(xì)度粗細(xì)

進(jìn)入交互設(shè)置即可調(diào)整連線的顏色及粗細(xì)。

5、注釋標(biāo)記

本工具用于快速標(biāo)注設(shè)計(jì)中對元素進(jìn)行注解

快速開始

選中頁面中任何一個元素，點(diǎn)擊標(biāo)記注釋，即可按選擇順序生成從1開始排列的序號。

使用方法

十分建議記下功能快捷鍵，初始快捷鍵為 command+shift+2。若想自定義快捷鍵，可以打開 WeSketch => 快捷鍵設(shè)置，進(jìn)行自定義快捷鍵。

本功能只有一個功能鍵，即交互連線按鈕。但依然有很多細(xì)節(jié)。

1、選擇一個元素，若此元素沒有添加過標(biāo)記，按快捷鍵，即可添加一個在右邊的標(biāo)記。

2、選擇一個已有在右邊的標(biāo)記，按快捷鍵，會刪除右邊的標(biāo)記，生成左邊的標(biāo)記。

3、選擇一個已有在左邊的標(biāo)記，按快捷鍵，此時(shí)若選中的數(shù)字在頁面中不為最后一個標(biāo)記（假如頁面中有9，刪除第8個標(biāo)記），頁面中會彈出選項(xiàng)。

4、選擇刪除標(biāo)記并保留排序 （選擇此選項(xiàng)會將 8 標(biāo)記刪除，9 標(biāo)記不動，下次再標(biāo)記會以 8 開始）

5、刪除標(biāo)記并重新排序 （選擇此選項(xiàng)會將 8 標(biāo)記刪除，之后 9 標(biāo)記變?yōu)?8，如果后續(xù)還有會依次類推，下次再標(biāo)記會以最后一個數(shù)的后一個數(shù)開始）

6、自定義寬高導(dǎo)出

本功能用于快速解決一些占位 icon 需要擴(kuò)大點(diǎn)擊區(qū)域，或者 icon 需要導(dǎo)出統(tǒng)一尺寸但又不能拉伸的需求

快速開始

選中任意個 icon 點(diǎn)擊導(dǎo)出，或使用快捷鍵 command shift U，彈出窗口填入你統(tǒng)一導(dǎo)出的寬高、倍數(shù)、格式，確定之后選中目錄，即可獲得相對應(yīng)的圖片。

功能說明

依然有一些小細(xì)節(jié)，再強(qiáng)調(diào)一次一定要配合快捷鍵使用，否則顯得太不 geek。

同時(shí)文件名稱也會放入你的剪貼板，用于快速完成代碼需求。

7、生成代碼（支持小程序）

本功能用于開發(fā) GG 用一個快捷鍵就能導(dǎo)出各種設(shè)計(jì)稿中的字體及各種基本塊狀樣式能力。

快速開始

選中一個你需要獲取對應(yīng)代碼的字體或者圖形，使用獲取樣式的快捷鍵 command shift d，插件會按照常見 css 寫法將樣式放入剪貼板中。

功能說明

本功能重點(diǎn)解決當(dāng)拿到不同尺寸設(shè)計(jì)稿時(shí)，例如寬 320 375 414 750 1242，需要人腦換算輸出成統(tǒng)一的尺寸問題。所以本插件對需要獲取樣式的父 artboard 尺寸敏感，若父 artboard 尺寸非標(biāo)準(zhǔn)，或無父 artboard 會默認(rèn)為 2 倍圖。

本功能提供設(shè)置功能，除了導(dǎo)出標(biāo)準(zhǔn) web 樣式，還可以導(dǎo)出以 rpx 為單位的小程序代碼。點(diǎn)擊獲取代碼設(shè)置，可以將獲取的代碼更換成 rpx 標(biāo)準(zhǔn)。rpx 的設(shè)計(jì)標(biāo)準(zhǔn)是以 750 寬度為標(biāo)準(zhǔn)設(shè)計(jì)，所以非 750 寬度的設(shè)計(jì)稿，會按照小程序尺寸換算。

8、快捷取色

本功能是一個 geek GG 的特別需求

快速開始

選中一個你需要獲取顏色的字體或圖形，使用快捷鍵 command shift c，插件會導(dǎo)出 web 標(biāo)準(zhǔn)色�；驇�透明度，會使用rgba形式。

此功能沒有太特別能力，但 geek 要的就是比快更快

9、圖標(biāo)庫

本功能提供常用 icon，并提供搜索功能，讓你在使用 Sketch 完成交互稿的過程中不需要再費(fèi)心去找 icon 了。

快速開始

打開 WeSketch => 圖標(biāo)庫，點(diǎn)擊圖標(biāo)庫中任意 icon 即會出現(xiàn)你的畫稿中央，供你設(shè)計(jì)交互過程中快速使用。

搜索

搜索你需要的 icon 可以加快找到你需要的icon。

本功能 icon 來源于網(wǎng)絡(luò)收集，若下載渠道有作者聲明我們也聲明在使用過程中。本插件免費(fèi)使用，遵循 MIT 協(xié)議，無任何收入。

10、自定義快捷鍵

十分建議在了解功能之后首先搭建自己常用功能的快捷鍵。以此借助此插件你的 design 或者 code 達(dá)到比快更快的目標(biāo)。

快速開始

選擇一個你需要設(shè)置的功能的對應(yīng)輸入框中使用 shift option command 三個功能鍵一個及以上，搭配字母或數(shù)字鍵，同時(shí)按住，輸入框中出現(xiàn)你想要的組合鍵，點(diǎn)擊確定后嘗試使用。

注意

由于 mac 系統(tǒng)和 sketch 本身有大量的默認(rèn)快捷鍵，所以設(shè)置的快捷鍵容易產(chǎn)生沖突，如果發(fā)現(xiàn)設(shè)置的快捷鍵無法使用，嘗試更換快捷鍵使用。