插件是讓sketch保持強大的獨門絕技,很多軟件看起來不支持的功能,通過插件都可以實現(xiàn),大大提高工作效率. 下面來介紹下sketch常用的,受大家歡迎的插件。
一.安裝插件的方法
sketch有兩種插件安裝的方法,一種是傳統(tǒng)的安裝方式,另一種是通過一款叫sketch toolbox的小軟件來快捷安裝。
首先看第一種安裝方法,打開sketch(這里以最新版本的sketch3.0.4為例),然后選擇菜單 Plugins>Reveal Plugins Folder...即可打開插件文件夾. 打開后即可知道路徑,不用刻意去記這個路徑在哪里。
打開后可以看到以一個個文件夾命名的,就是一個個的插件.以下就是靜電的電腦中安裝的插件。 目前sketch官網(wǎng)上零星分散著一些插件的壓縮包(相關(guān)鏈接:http://www.bohemiancoding.com/sketch/support/developer/) 我們可以通過下載相應(yīng)的壓縮包,并解壓到上述的Plugins下面,然后重啟sketch,如果成功,在plugins菜單就會出現(xiàn)相應(yīng)的選項。
或者,可以直接解壓文件夾,選擇里邊的以.sketchplugin結(jié)尾的文件,雙擊直接安裝,出現(xiàn)下面的提示,則安裝成功.
但是,使用這種方法安裝插件,需要一個個的找插件,非常麻煩。那么大家還記得靜電在第一節(jié)的sketch教程中給大家的兩個下載地址嗎?一個是sketch安裝文件,另一個就是關(guān)于插件的sketch toolbox。地址再貼一次給大家,沒有下的同學(xué)一定要裝哦(sketch toolbox下載地址:http://pan.baidu.com/s/1dD3VeUX),下載并安裝后即可使用。打開sketch toolbox,大家會看到各種各樣的插件,如下圖:
只需簡單點擊install按鈕,即可方便的安裝插件,再也不用費時費力的一個個的找了。
二.插件推薦
ok,這個時候大家可能會有選擇恐懼癥了,這么多插件,我要從何選起呢? 別著急,靜電給大家推薦幾款最常用的。
推薦插件之一:Content Generator Sketch Plugin
做app設(shè)計的時候,我們可能會使用各種各樣的頭像來營造真實效果。 但尋找頭像并做遮罩是一件非常耗時耗力的事情,但我們又不想把頭像做的千篇一律對吧? 這個時候神器來了,快來下載這款 Content Generator Sketch Plugin吧。 只需選中你要填充頭像的圖形,他會幫你隨機選擇并填充合適的圖像。 看看效果吧。
這個插件比較大,大概80m左右,所以請多耐心的等待下載完成. 如果實在下載很慢,那么請使用這個網(wǎng)址使用迅雷直接下載,然后按照上文的方法解壓并拷貝到文件夾中 https://codeload.github.com/timuric/Content-generator-sketch-plugin/zip/master
當(dāng)然隨機生成用戶名也是可以的.
還可以有隨機的大段文本生成.
恩,這樣的效果圖,豈不是比做一個元素然后不斷拷貝粘貼帥氣多了?畢竟,我們的效果圖要模擬最真實的效果不是嗎?
推薦插件之二:Sketch Measure
我們在做完設(shè)計稿后,需要告訴前端開發(fā)工程師,圖片是多大尺寸,這段文本是多大字號,間距是多少。這個時候,sketch messure就派上用場了,相比傳統(tǒng)的標(biāo)注方式,在軟件內(nèi)標(biāo)注極大提高了我們的工作效率。我們只需選中兩個元素,然后選擇plugins菜單, 就可以標(biāo)注圖片尺寸,文字字號,間距等等等等,這一切不需要你自己一個個的打字上去哦,只需要告訴sketch你要標(biāo)注那些元素,要標(biāo)注什么,就可以一鍵搞定了。 效率極大提高,我們可以騰出更多的時間來更好的設(shè)計我們的作品了。
tips:要標(biāo)記,首先選擇要標(biāo)記的一個或者多個元素,然后選擇plugins里的標(biāo)注方式即可完成自動標(biāo)注了。標(biāo)注完成的設(shè)計稿,直接輸出就可以給前端開發(fā)工程師了。
另外要注意的一點,標(biāo)注的時候,一定要選對相應(yīng)的Design Resolution 。 安卓的按照安卓的解決方案標(biāo)注, ios的按ios的方式標(biāo)注。這樣才能確保你的設(shè)計稿被前端工程師正確的實現(xiàn)出來。靜電認(rèn)為,這個標(biāo)注非常方便,特別是標(biāo)注字體的時候,插件直接按照標(biāo)注解決方案換算出正確的字號,方便開發(fā)工程師調(diào)用。對于ios和安卓的標(biāo)注,一般各自選擇一套即可。 比如ios選擇Retina,安卓可以選擇xxhdpi或者xhdpi。
推薦插件之四:Rename it
對于app設(shè)計者來說,我們通常需要切出不同尺寸的圖標(biāo)來適應(yīng)各種機型或者分辨率.這個時候,我們需要將某些參數(shù)體現(xiàn)的文件名或者圖層名稱中方便我們非常快速的知道,這個圖層的屬性,比如長寬高等等.? 或者,我們需要批量將文件或者圖層進行命名. Renameit 插件可以輕松幫我們辦到.
目標(biāo):將圖中的三個形狀按照寬高來批量命名.
第一步,選擇要批量命名的元素.
第二步,選擇Plugins > Rename it ,在彈出的對話框中,設(shè)定命名規(guī)則. 這里要說明的是, %N %W這些都是變量,會根據(jù)圖片的尺寸來自動填充,我們需要的是設(shè)定這個規(guī)則即可, 接著我們輸入下面的參數(shù)(請自己填寫文件后綴),然后確定. 這個時候圖層就會按我們要的規(guī)則明明.
圖層命名規(guī)則參數(shù):
? - 輸入號 “+” 和你想添加的文本即可在適當(dāng)?shù)奈恢锰砑庸潭ㄗ址ㄈ纾? button)
? -? “%N” 將圖層名按順序加上數(shù)字后綴。“%n” 則是加上倒序的數(shù)字。(如:item %N)
? - 保留并移動原圖層名: 輸入新的圖層名時,使用 “*” 號代替原圖層名。(如:big * button)
? - 添加圖層的長度和寬度:輸入 “%w” 或者 “%h” 來添加圖層的長和寬。(如:rectangle %w 或者 rectangle %w x %h)
5. marketch 自動標(biāo)注軟件
6. craft? ? 內(nèi)容填充
7. flavor? ? 中文內(nèi)容填充
8. iconfont
9. magic mirror? 展示差距
四、效率拓展
下圖是給大家推薦的11款常用 sketch 插件和一個 Sketch 文件版本管理工具,下面我就依次介紹下這11款插件和1個軟件。
Runner?—— 使用命令行來提高你的工作效率
Cfaft?—— 幫你提高效率的自動填充神器
Rename it?—— 快速批量重命名你的圖層
Remove Unused Symbols?—— 一鍵刪除未使用的 Symbol
Artboards to PDF?—— 批量導(dǎo)出選定畫板為多頁 PDF
ImageOptim?—— 一鍵導(dǎo)出所有切片資源并自動優(yōu)化體積
Sketch Measure?—— 快速創(chuàng)建規(guī)范為開發(fā)者和團隊協(xié)作提供方便
Midnight?—— 增加替換主題功能及小工具
Flavor?—— 給你的設(shè)計加點料
Sketch2AE?—— 輕松導(dǎo)出 Sketch 資源至 AE 并自動定位
Anima?—— 可以實現(xiàn)自動布局
Abstract?—— Sketch 文件版本管理軟件