微信團隊sketch插件合集Wesketch

Wesketch插件是微信設(shè)計團隊打造的一款sketch多功能的插件合集，這款插件提供了圖標(biāo)庫、自動連線、標(biāo)記注釋、全局替換文字等諸多交互功能，可以幫助設(shè)計師們更高效的使用sketch。Wesketch實用程度堪比 invision 的 Craft 插件，雖然從穩(wěn)定性、美觀等方面來說可能不及已經(jīng)迭代了許多版本的 Craft ，但是這依然是一款優(yōu)秀的效率插件。

插件功能：

1. 連線／Link（command + shift + 1）

眾所周知，四娃和五娃是一起出生的，可以把他倆連在一起。

線有點粗哈哈，距離過短不適合使用。線不在 Artboard 上，是鎖定在 Page 上的，因此不會跟隨 UI 元素的拖動（沒有 Omni Graffle 中磁力點的功能）。適合設(shè)計師在標(biāo)注頁面間跳轉(zhuǎn)邏輯時使用。

2. 標(biāo)注／Mark（command + shift + 2）

六娃常年隱身，我們需要標(biāo)注下他的位置。

選中目標(biāo)后點擊可以點擊三下，第一下標(biāo)注在右邊出現(xiàn)，第二下會將標(biāo)注換到左邊，第三下則會取消。目前只支持數(shù)字序號。這個應(yīng)該是要配合文本框使用的，在頁面上邏輯較復(fù)雜處 mark 一下，然后在文本框里打上序號并進行細節(jié)描述。

刪除中間序號的話，會讓你選擇是保留序號還是重置序號。

3. Font／字體替換（command + shift + f）

可以替換整個文件或者當(dāng)前頁面的字體。

4. Text／文本替換

四娃擅火，他希望大家叫他火娃。

同樣支持全文件以及當(dāng)前頁面的替換，但是用詞和 Font 功能中不同，不知道是不是不同的工程師開發(fā)的。另外，支持正則表達式，懂行的同學(xué)可以慢慢嘗試。如果 PM 要求把頁面中所有的“手機”替換為“移動設(shè)備”，這個功能可以幫上不少忙。

5. Color／顏色替換（command + shift + c）

六娃閃現(xiàn)后繼續(xù)隱身。

有時候會接到這么一個需求，需要微調(diào)下整個產(chǎn)品的主色調(diào)。需求雖小，工作量卻是非常飽和，先從 symbol 下手，然后還要挨個界面查漏補缺。顏色替換功能則解決了這個設(shè)計師頭疼的問題，簡化了設(shè)計稿中全局改色的操作。

6. Icon／圖標(biāo)庫

他們發(fā)現(xiàn)爺爺沒了。

不支持直接拖移導(dǎo)出。支持自定義圖標(biāo)的尺寸和顏色。面板上方有篩選功能，但目前均只有一個選項，應(yīng)該是還在完善中。每個成熟的設(shè)計團隊都有自己的一套圖標(biāo)庫，有的用文件夾管理，有的全部放在 .psd 里，有的放在 Sketch 文件里。還有些設(shè)計師喜歡去阿里的 Icon Font 上找圖標(biāo)素材。這個圖標(biāo)庫則是無縫嵌入了設(shè)計流程，讓設(shè)計師的注意力都停留在 Sketch 里，而不用轉(zhuǎn)場。另外安利大家兩個應(yīng)用，Nucleo 和 Icons8，都是非常好用的圖標(biāo)庫。

7. UI Kit／同步 UI 庫

可以導(dǎo)入僅作演示，并非放出的工具，希望大家制作自己的 Kit�？梢詫�團隊的 UI Kit 快速導(dǎo)入，不需要原始的粘貼復(fù)制大法了。

8. Palette／同步色板

該功能可將其他 Sketch 文件中的色彩配置導(dǎo)入。

9. Resize／補齊寬高／command + shift + u

大娃成熟了，出山。

這個功能名字叫補齊寬高，其實就是一種高自由度的切圖導(dǎo)出方式，比較實用。這個功能用在設(shè)計最后環(huán)節(jié)，可以根據(jù)工程師的需求選擇格式、分辨率甚至素材在切出圖片中的布局。

10. Picker／快捷取色

chickens

11. CSS／生成代碼／command + shift + d

使用教程：

管理 UI Kit

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

快速開始

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

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

如何設(shè)置

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

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

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

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

管理色板

快速開始

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

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

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

如何設(shè)置

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

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

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

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