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

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

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

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

接下來我們詳細看看這些插件吧。

1. Sketch Notebook

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

2. CSS Buddy

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

3. Day Player

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

4. Material Design Colour Palette Sketch Plugin

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

5. Content Generator Sketch Plugin

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

6. Blade

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

標簽包起來，將文本用

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

7. Modulizer

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

8. Typographic Scale

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

9. Dynamic Button

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

10. Sketch Measure

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

11. Sketch Framer

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

12. Sketch.js

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

13. Sketch DevTools

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

14.Sketch Preview

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

15. Sketch Data Parser

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