Z Yuhan：本文原作者徐小馬，獲權(quán)轉(zhuǎn)載自《五分鐘了解微信團(tuán)隊(duì)打造的 Sketch 插件 ：WeSketch》
——
前言
WeSketch 是一個(gè)強(qiáng)大的 Sketch 插件合集睦擂，由微信設(shè)計(jì)團(tuán)隊(duì)量身打造，讓設(shè)計(jì)師和開(kāi)發(fā)者更佳高效的使用 Sketch。
閱讀時(shí)間：5分鐘
流量預(yù)估：2.6MB
下載地址
Github：weixin/WeSketch
百度網(wǎng)盤(pán)：https://pan.baidu.com/s/1pLVvP3P
WeSketch 官方介紹
更高效的團(tuán)隊(duì)協(xié)作惯裕，如：UI Kit 同步、色板同步等绣硝。
更快捷的交互設(shè)計(jì)蜻势，如：圖標(biāo)庫(kù)、自動(dòng)連線(xiàn)鹉胖、標(biāo)記注釋握玛、全局替換文字、字體甫菠、顏色挠铲。
更精準(zhǔn)的前端還原，如：補(bǔ)齊寬高導(dǎo)出圖片寂诱、導(dǎo)出 CSS 代碼（支持小程序）等拂苹。
面板功能
對(duì)于一個(gè)嘗鮮者，第一步就是找到插件的工具面板痰洒。我們先來(lái)試試面板上的十一個(gè)功能。
1丘喻、連線(xiàn)／Link（command + shift + 1）
眾所周知脯宿，四娃和五娃是一起出生的，可以把他倆連在一起泉粉。
線(xiàn)有點(diǎn)粗哈哈连霉，距離過(guò)短不適合使用。線(xiàn)不在 Artboard 上嗡靡，是鎖定在 Page 上的跺撼，因此不會(huì)跟隨 UI 元素的拖動(dòng)（沒(méi)有 Omni Graffle 中磁力點(diǎn)的功能）。適合設(shè)計(jì)師在標(biāo)注頁(yè)面間跳轉(zhuǎn)邏輯時(shí)使用叽躯。
2财边、標(biāo)注／Mark（command + shift + 2）
六娃常年隱身，我們需要標(biāo)注下他的位置点骑。
選中目標(biāo)后點(diǎn)擊可以點(diǎn)擊三下酣难，第一下標(biāo)注在右邊出現(xiàn)，第二下會(huì)將標(biāo)注換到左邊黑滴，第三下則會(huì)取消憨募。目前只支持?jǐn)?shù)字序號(hào)。這個(gè)應(yīng)該是要配合文本框使用的袁辈，在頁(yè)面上邏輯較復(fù)雜處 mark 一下菜谣，然后在文本框里打上序號(hào)并進(jìn)行細(xì)節(jié)描述。
刪除中間序號(hào)的話(huà)，會(huì)讓你選擇是保留序號(hào)還是重置序號(hào)尾膊。
3媳危、Font／字體替換（command + shift + f）
可以替換整個(gè)文件或者當(dāng)前頁(yè)面的字體。
4冈敛、Text／文本替換
四娃擅火待笑，他希望大家叫他火娃。
同樣支持全文件以及當(dāng)前頁(yè)面的替換抓谴，但是用詞和 Font 功能中不同暮蹂，不知道是不是不同的工程師開(kāi)發(fā)的。另外癌压，支持正則表達(dá)式仰泻，懂行的同學(xué)可以慢慢嘗試。如果 PM 要求把頁(yè)面中所有的“手機(jī)”替換為“移動(dòng)設(shè)備”滩届，這個(gè)功能可以幫上不少忙集侯。
5、Color／顏色替換（command + shift + c）
六娃閃現(xiàn)后繼續(xù)隱身丐吓。
有時(shí)候會(huì)接到這么一個(gè)需求浅悉，需要微調(diào)下整個(gè)產(chǎn)品的主色調(diào)。需求雖小券犁，工作量卻是非常飽和，先從 symbol 下手汹碱，然后還要挨個(gè)界面查漏補(bǔ)缺粘衬。顏色替換功能則解決了這個(gè)設(shè)計(jì)師頭疼的問(wèn)題，簡(jiǎn)化了設(shè)計(jì)稿中全局改色的操作咳促。
6稚新、Icon／圖標(biāo)庫(kù)
他們發(fā)現(xiàn)爺爺沒(méi)了。
不支持直接拖移導(dǎo)出跪腹。支持自定義圖標(biāo)的尺寸和顏色褂删。面板上方有篩選功能，但目前均只有一個(gè)選項(xiàng)冲茸，應(yīng)該是還在完善中屯阀。每個(gè)成熟的設(shè)計(jì)團(tuán)隊(duì)都有自己的一套圖標(biāo)庫(kù)，有的用文件夾管理轴术，有的全部放在 .psd 里难衰，有的放在 Sketch 文件里。還有些設(shè)計(jì)師喜歡去阿里的 Icon Font 上找圖標(biāo)素材逗栽。這個(gè)圖標(biāo)庫(kù)則是無(wú)縫嵌入了設(shè)計(jì)流程盖袭，讓設(shè)計(jì)師的注意力都停留在 Sketch 里，而不用轉(zhuǎn)場(chǎng)。另外安利大家兩個(gè)應(yīng)用鳄虱，Nucleo 和 Icons8弟塞，都是非常好用的圖標(biāo)庫(kù)。
7拙已、UI Kit／同步 UI 庫(kù)
可以導(dǎo)入僅作演示决记，并非放出的工具，希望大家制作自己的 Kit悠栓∶拐牵可以將團(tuán)隊(duì)的 UI Kit 快速導(dǎo)入，不需要原始的粘貼復(fù)制大法了惭适。
8笙瑟、Palette／同步色板
該功能可將其他 Sketch 文件中的色彩配置導(dǎo)入。筆者手賤癞志，在 Color Set/Settings 中移除了 Project往枷，后來(lái)試了很多方法都無(wú)法還原。后來(lái)打開(kāi)另一臺(tái)電腦重新安裝后拷貝下了資源鏈接凄杯，放出來(lái)備份下（僅作演示错洁，并非放出的工具，希望大家制作自己的 Kit戒突。）：
WeUI_UIKIT: http://tmtdemo.qq.com/sketch/weui.sketch
WeUI_COLOR: http://tmtdemo.qq.com/wechatcolor.json
AndroidDesign_UIKIT: http://tmtdemo.qq.com/sketch/android.sketch
iOSDesign_UIKIT: http://tmtdemo.qq.com/sketch/iOS.sketch
9屯碴、Resize／補(bǔ)齊寬高／command + shift + u
大娃成熟了，出山膊存。
這個(gè)功能名字叫補(bǔ)齊寬高导而，其實(shí)就是一種高自由度的切圖導(dǎo)出方式，比較實(shí)用隔崎。這個(gè)功能用在設(shè)計(jì)最后環(huán)節(jié)今艺，可以根據(jù)工程師的需求選擇格式、分辨率甚至素材在切出圖片中的布局爵卒。
10虚缎、Picker／快捷取色
11、CSS／生成代碼／command + shift + d
其他功能
在插件菜單中钓株，還有幾個(gè)的功能可能會(huì)用到实牡。
1、標(biāo)注樣式設(shè)置
這這里更改連線(xiàn)和標(biāo)注的顏色和線(xiàn)寬享幽。
2铲掐、資源路徑設(shè)置
在這里添加團(tuán)隊(duì) UI Kit 的存儲(chǔ)路徑，方便導(dǎo)入值桩。
3摆霉、導(dǎo)出圖片格式設(shè)置（支持小程序）
4、插件設(shè)置
可以設(shè)置各個(gè)功能的快捷鍵以及是否在工具面板上出現(xiàn)。
總結(jié)
WeSketch 在功能和體驗(yàn)上携栋，還有一定的進(jìn)步空間搭盾。但是這種追求高效工作流的意識(shí)，值得每個(gè)設(shè)計(jì)團(tuán)隊(duì)學(xué)習(xí)婉支。也許三五次迭代后鸯隅，WeSketch 會(huì)成為諸位 Sketch 中的常駐插件??
我是 Teambition 的交互設(shè)計(jì)師徐小馬（微信：heiheilaugh），請(qǐng)注明知乎 ID向挖，歡迎交流蝌以。作為知乎老透明，第一次發(fā)聲何之，大家多給意見(jiàn)跟畅。
Thanks for your time.
相關(guān)閱讀
《五分鐘了解谷歌全棧設(shè)計(jì)師打造的 Sketch 插件：Sketch Material》
——
