玩轉Sketch，不容錯過的5大實用插件推薦

在以前的文章中，筆者爲你們介紹了Sketch 的入門教程、實用技巧和資源集錦，相信你們對Sketch已經有了初步的瞭解和認識。除了基礎的矢量設計功能之外，插件更是讓Sketch保持強大的獨門祕籍。Sketch開放了第三方插件接口，設計師能夠在幾百種的插件中輕鬆找到適合本身工做方式的插件，而且他們都很是容易得到和安裝。

這裏筆者爲你總結了五款超實用的Sketch插件，讓你把Sketch用到起飛。

1. Marketch

作完設計稿後，咱們每每須要告訴前端開發工程師，圖片的具體尺寸，文本字號和間距等，Marketch這個插件會讓你充滿驚喜。它是一款支持一鍵標註和一鍵切片的Sketch插件，能夠實現動態標註、單位轉換和動態切圖等超級實用的功能。

它不只能夠幫設計師減負，免去標註的煩惱，程序能夠經過內置的頁面查看全部要素的佈局參數，甚至是CSS代碼。此外，這款插件能夠在本地生成HTML，也不用擔憂安全和隱私問題。

 

插件下載地址：https://github.com/tudou527/marketch

使用教程：

第一步：運行插件->market

 

第二步：命名並導出

 

第三步：解壓zip，運行Html文件，便可在瀏覽器查看效果。

效果demo瀏覽：http://tudou527.github.io/marketch/

 

2. Mockplus

衆所周知的是，Sketch是一款矢量設計軟件，若是咱們想要對設計稿繼續進行交互設計和團隊協做的話，這裏推薦爲Sketch安裝Mockplus的插件。在完成Sketch的設計後，能夠將其導出爲MP的項目文件，從而在Mockplus中進行快速原型設計，而且與團隊成員進行協做和批註。

 

插件下載地址：https://www.mockplus.cn/download

使用教程：

第一步：下載並安裝Sketch插件，雙擊打開.sketchplugin文件

 

第二步：完成設計後，菜單選擇Plugins -> Mockplus ->導出項目文件

 

第三步：在下面的界面中設置項目選項，你能夠選擇導出部分的 Artboard，同時你還能夠選擇導出的項目類型和圖片大小信息，這些選項會影響最終導出的項目文件。設置好之後，選擇「導出」。

 

3. Content Generator Sketch Plugin

咱們在作一些頁面的時候可能就會須要用到數據填充的功能，提升保真度。最多見的就是填充各類不一樣的頭像，並且最好不是千篇一概的頭像，這個插件就能快速地實現這樣的效果，只須要選中須要填充頭像的圖形，就會幫你隨機選擇並填充合適的人物頭像。

 

除了圖像以外，這個插件也能隨機生成用戶名，郵箱和電話，作聯繫表的時候效率就至關高了。

 

插件下載地址：https://github.com/timuric/Content-generator-sketch-plugin

值得一提的是，相似的數據填充也可使用Mockplus的格子功能實現，若是有圖片組件，當建立單元格的時候，會自動在每一個單元格中的圖片自動填充圖像。圖片類型有「佔位圖形、頭像、人物肖像、設計、商務」等多種類型。若是是文本，你能夠設置文本組件的「自動填充類型」，好比選擇爲「日期」，那麼全部單元格中，這個文本的內容都會變成隨機的日期值。

 

 

4. Rename it

在設計時，咱們經常須要批量修改圖形名稱，修改的名稱最好是能夠體現圖層屬性和參數，就能夠快速方便地找到想要的圖層。Rename it 將會是你的絕佳助手。

 

下載地址：https://github.com/rodi01/RenameIt

使用教程：（見上圖GIF）

第一步，選擇要批量命名的元素

第二步，選擇Plugins > Rename it，在彈出發對話框中命名規則。裏面的%W%H都是變量，會根據圖片尺寸自動填充，咱們設定好規則，點擊肯定就行。

具體的話有四種修改方式，這裏能夠看演示視頻。

https://vimeo.com/85064841

1）擴展圖層名：輸入號 「+」 和你想添加的文本便可。（如：+ button）

2）圖層名順序：輸入 「%N」 將圖層名按順序加上數字後綴。「%n」 則是加上倒序的數字。（如：item %N）

3）保留並移動原圖層名： 輸入新的圖層名時，使用 「*」 號代替原圖層名。（如：big * button）

4)  添加圖層的長度和寬度：輸入 「%w」 或者 「%h」 來添加圖層的長和寬。（如：rectangle %w 或者 rectangle %w x %h)

5. IconFlower

這個插件很是適合於製做如今流行的多icon背景，你不用再機械地一個一個拖拽icon到畫布不一樣位置，你只須要把全部素材放在一塊畫布，所有選擇點擊IconFlower就能夠自動佈局你全部icon。

 

下載地址：https://github.com/avadhbsd/IconFlower

使用教程：

第一步：在Sketch中安裝IconFlower插件。

第二步：建立Artboard，在Artboard上放置圖標/元素/圖層，層數越多越好，推薦使用Iconjar進行拖拽。

第三步：選中要佈局的全部圖標/對象/圖層。

第四部：點擊插件運行後圖標就會以向日葵的模式佈局了。

以上就是爲你們推薦的5款最佳Sketch插件，有了這些強大的插件的武裝，相信你能夠在Sketch上設計得更加遊刃有餘。固然，若是你還有更好的推薦，歡迎在評論中留言。