為網(wǎng)頁(yè)設(shè)計(jì)而生的15個(gè)優(yōu)質(zhì)Sketch插件

有經(jīng)驗(yàn)的網(wǎng)頁(yè)設(shè)計(jì)師和前端都知道，在開始著手設(shè)計(jì)網(wǎng)頁(yè)之前，通常大家會(huì)在白板或者草稿紙上畫個(gè)草圖，這樣做方便構(gòu)思整體布局。雖然許多設(shè)計(jì)師選擇在白板上完成這一過程，不過也有許多設(shè)計(jì)師選擇使用軟件來“打草稿”，其中最受大家青睞的就包括Sketch 內(nèi)置的模板功能。

相比白板上的手繪模板，Sketch內(nèi)置的模板功能更加規(guī)整，也組織得更加富有條理，保證了設(shè)計(jì)的向后的兼容性，也確保了生產(chǎn)力。好的開始是成功的一半，開個(gè)好頭能讓后續(xù)節(jié)省很多不必要的返工和麻煩。從這個(gè)角度上來說，Sketch確實(shí)是當(dāng)代UI和網(wǎng)頁(yè)設(shè)計(jì)的良心工具。

內(nèi)置的模板和Sketch的基礎(chǔ)功能保證了設(shè)計(jì)師和前端們的基本需求，第三方的開發(fā)者所提供的大量的插件則起到了極好的補(bǔ)充的效果。今天所推薦的15個(gè)Sketch 插件都是為網(wǎng)頁(yè)設(shè)計(jì)師所準(zhǔn)備的，覆蓋了不同的設(shè)計(jì)和開發(fā)需求。

接下來我們?cè)敿?xì)看看這些插件吧。

1. Sketch Notebook

Sketch Notebook 是一個(gè)非常方便的草圖設(shè)計(jì)插件，安裝上之后，工作區(qū)域中會(huì)多出一個(gè)側(cè)邊欄，其中包含多種不同的元素，借助這個(gè)工具欄，你可以輕松添加或者刪除注釋、調(diào)整位置、管理它們的可見性。
?

2. CSS Buddy

CSS Buddy 可以讓你在你的Sketch 工作區(qū)域中為圖層添加CSS樣式。作為最基本的功能，它可以輕松控制各個(gè)元素的寬度、高度、透明度、陰影、邊框和背景等屬性。
?

3. Day Player

Day Player 這個(gè)插件讓你可以在任意Sketch文檔中插入一個(gè)可定制的圖片占位符，其中內(nèi)置多種可選占位符服務(wù)。當(dāng)你激活控件的時(shí)候，還可以設(shè)定圖片的寬度高度和其他的元素。

4. Material Design Colour Palette Sketch Plugin

看名字就知道這是一個(gè)配色方案生成插件，和許多類似工具一樣，一鍵生成，快捷好用，而且直接可以在工作區(qū)中調(diào)用。另外，配色方案中色相、明度等屬性都可以輕松控制，實(shí)用方便。
?

5. Content Generator Sketch Plugin

這個(gè)Sketch 插件可以幫你快速生成虛擬數(shù)據(jù)，諸如用戶頭像、名稱、地理信息等數(shù)據(jù)，作為內(nèi)容填充。安裝插件之后，你所需要做的就是選擇一個(gè)圖層，然后在菜單中點(diǎn)擊 Plugin —Generator ，然后選擇 Geo、Persona 或者 Photos 即可。

6. Blade

這款名為Blade 的插件可以將你的設(shè)計(jì)自動(dòng)生成HTML代碼，將圖層分組用

標(biāo)簽包起來，將文本用

表示。當(dāng)你使用Blade的時(shí)候，可以通過設(shè)置圖層名稱，讓這些圖層轉(zhuǎn)化為DOM元素。

7. Modulizer

Modulizer 是一個(gè)用來控制按鈕、模塊和區(qū)域等視覺元素的內(nèi)邊距（Padding）的插件。如果所選模塊有背景，也可以通過調(diào)整內(nèi)邊距，輕松替換。

8. Typographic Scale

這個(gè)插件能夠針對(duì)特定的文字圖層縮放出一組字體尺寸從小到大的文字圖層。如果你選中了多個(gè)圖層的圖層組，其中至少要包含一個(gè)文字圖層，才能生成成功。
?

9. Dynamic Button

這是一個(gè)動(dòng)態(tài)按鈕插件，在Sketch中借助這個(gè)插件生成的按鈕可以設(shè)定包括內(nèi)容、樣式和內(nèi)外邊距等各種屬性。安裝插件之后，你可以使用Command+J這個(gè)快捷鍵快速將文本快速轉(zhuǎn)換成按鈕。設(shè)置內(nèi)邊距的時(shí)候，可以在文本圖層下設(shè)置（0:0:0:0）的參數(shù)來搞定。
?

10. Sketch Measure

這是一個(gè)測(cè)量插件，需要Sketch 3.0.2以上的版本，除了測(cè)量各種距離和尺寸之外，它還可以測(cè)量圖層的各種屬性，并且每個(gè)功能都有快捷鍵支持。
?

11. Sketch Framer

Sketch Framer 可以將Sketch文件導(dǎo)出為FramerJS，制作成可交互的原型。通過矯正Sketch-framer-config.js文檔可以定制生成的文檔的類型。當(dāng)然，使用這個(gè)插件最常見的操作可能是導(dǎo)入某個(gè)庫(kù)文件，并且應(yīng)用到你的整個(gè)項(xiàng)目中去。
?

12. Sketch.js

Sketch.js 是一款易用的jQuery插件，這款插件可以生成一個(gè)可供訪客繪圖的畫布。

13. Sketch DevTools

Sketch DevTools 是一套實(shí)用的開發(fā)用的工具和程序，以插件的形式安裝到Sketch中。由于Sketch本身偏向與UI設(shè)計(jì)，在網(wǎng)頁(yè)開發(fā)上有明顯的短板，而這套插件就正好彌補(bǔ)了這一缺陷。Sketch 中最大的缺陷是沒有Debug工具和各種文檔的API，而這套工具中正好解決了這些問題。

14.Sketch Preview

這款Sketch 插件為程序提供了更優(yōu)秀的預(yù)覽功能，使用 ?P 快捷鍵可以為選中的畫板配置大小等屬性(??P) ，并且將生成的圖像文件在Skala Preview中打開。
?

15. Sketch Data Parser

這款Sketch 插件能用來分析你的數(shù)據(jù)并補(bǔ)充你的設(shè)計(jì)的，下載sketch-data-parser.sketch 這個(gè)文檔，雙擊安裝即可。