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

Miaow插件是一款由微信設(shè)計(jì)團(tuán)隊(duì)打造的多功能sketch插件合集，這款插件中包含了超多實(shí)用的插件集，包括UI Kit 同步、色板同步、圖標(biāo)庫(kù)、自動(dòng)連線(xiàn)、標(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é)同。

快速開(kāi)始

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

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

如何設(shè)置

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

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

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

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

如何制作自己的 UIkit

導(dǎo)出 UIKit

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

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

2、管理色板

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

快速開(kāi)始

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

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

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

如何設(shè)置

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

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

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

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

如何制作自己的顏色庫(kù)

導(dǎo)出色板

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

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

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

文字

字體

顏色

快速開(kāi)始

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

功能說(shuō)明

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

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

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

4、交互連線(xiàn)

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

快速開(kāi)始

本功能與市面上已有的連線(xiàn)工具最大的不同是，可以自動(dòng)繞過(guò)障礙，連線(xiàn)不會(huì)重合

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

使用方法

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

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

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

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

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

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

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

5、注釋標(biāo)記

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

快速開(kāi)始

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

使用方法

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

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

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

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

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

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

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

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

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

快速開(kāi)始

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

功能說(shuō)明

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

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

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

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

快速開(kāi)始

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

功能說(shuō)明

本功能重點(diǎn)解決當(dāng)拿到不同尺寸設(shè)計(jì)稿時(shí)，例如寬 320 375 414 750 1242，需要人腦換算輸出成統(tǒng)一的尺寸問(wèn)題。所以本插件對(duì)需要獲取樣式的父 artboard 尺寸敏感，若父 artboard 尺寸非標(biāo)準(zhǔn)，或無(wú)父 artboard 會(huì)默認(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ì)稿，會(huì)按照小程序尺寸換算。

8、快捷取色

本功能是一個(gè) geek GG 的特別需求

快速開(kāi)始

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

此功能沒(méi)有太特別能力，但 geek 要的就是比快更快

9、圖標(biāo)庫(kù)

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

快速開(kāi)始

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

搜索

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

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

10、自定義快捷鍵

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

快速開(kāi)始

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

注意

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