微信設(shè)計團隊打造sketch插件集Miaow

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

功能介紹及教程：

1、管理 UI Kit

本功能用于團隊輸出 UIKit 設(shè)計標準，并用于團隊成員快速協(xié)同。

快速開始

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

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

如何設(shè)置

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

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

有些團隊可能使用 DropBox 同步團隊 UIKit 到本地，我們也提供了選擇本地文件同步的能力。點擊文件夾 logo 即可選擇。

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

如何制作自己的 UIkit

導出 UIKit

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

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

2、管理色板

本功能用于團隊約定一套顏色標準，并用于團隊成員快速協(xié)同。

快速開始

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

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

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

如何設(shè)置

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

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

有些團隊可能使用 DropBox 同步團隊 UIKit 到本地，我們也提供了選擇本地文件同步的能力。點擊文件夾 logo 即可選擇。

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

如何制作自己的顏色庫

導出色板

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

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

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

文字

字體

顏色

快速開始

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

功能說明

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

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

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

4、交互連線

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

快速開始

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

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

使用方法

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

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

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

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

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

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

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

5、注釋標記

本工具用于快速標注設(shè)計中對元素進行注解

快速開始

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

使用方法

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

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

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

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

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

4、選擇刪除標記并保留排序 （選擇此選項會將 8 標記刪除，9 標記不動，下次再標記會以 8 開始）

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

6、自定義寬高導出

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

快速開始

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

功能說明

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

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

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

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

快速開始

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

功能說明

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

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

8、快捷取色

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

快速開始

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

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

9、圖標庫

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

快速開始

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

搜索

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

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

10、自定義快捷鍵

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

快速開始

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

注意

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