Sketch的日常,好用的快捷鍵及外掛分享
本文從日常使用的快捷鍵、 極大提高效率的常用外掛
和Sketch 52.2版感受最明顯的新功能三個方面進行分享~
作為挨踢行業的一名UI設計師,每天除了吃飯睡覺,還必須要做的就是開啟設計軟體,一趴就是long time。目前主流的UI介面設計軟體是老牌的PS,新晉的Sketch,以及一路追趕的XD,當然除此之外還有最近開始吵吵的 Frame X (偏向元件化設計和強大的互動設計功能)和 Figma (開啟網頁就能線上做設計)。筆者剛入行的時候跟很多人一樣是用PS做介面,後來天天聽大家吵吵Sketch,抱著“落後就要捱餓”的想法搗鼓起來Sketch,然後就一發不可收拾,能不用PS就堅決不用了。現在回過頭來,當年傻傻的用PS畫頁面是浪費了多少芳華~
好了,不扯犢子了,浪費讀者時間是可恥的,來了就盼著點乾貨不是。
下面,我把要分享的內容分三部分來展開,先申明一下所講內容都是基於我個人日常的使用習慣和一些積累,這裡算是做一個個人總結,如果能順便對你也有所幫助,那就請賞個贊吧(哈哈):
1. 日常使用的快捷鍵(真的很快捷)
2. 能極大提高效率的常用外掛(真的很高效)
3. Sketch 52.2版感受最明顯的新功能(真的很喜歡)
一、快捷鍵真的很快捷
這三個操作組合起來,一套騷操作可以快速在幾十個畫板中找到目標元素及所在畫板,小編以前都是靠滑鼠一點一點拖動,不斷放大縮小畫板來尋找元素的。
Command+1 和Command+2演示
Command+。和Command+0 演示
這裡的樣式僅限圖層樣式,當我們在設計的過程中,如果沒有提前做好字型的共享圖層樣式,可以使用複製貼上字型樣式來保證字型的統一性。
Option+Command+C 和 Option+Command+V 演示
以上僅把我自己常用的快捷鍵的羅列了,當然還有一些基本的快捷鍵,比如A、T、R、O這些大家肯定都知道,所以就沒拿出來說了,更多快捷鍵大家可以去這裡看
ofollow,noindex" target="_blank">http://sketchshortcuts.com/
二、讓外掛帶你飛
接下來我要給大家介紹14個我經常使用的外掛,每一個都是我精挑細選的,你用了肯定會喜歡,如果有沒用過,牆裂建議去試試。
講之前先按本人的使用頻率給這14個外掛排個序,點選英文名稱即刻下載,如遇到頁面無法開啟,那就需要搭個梯子了:
01. Sketch Measure 快速匯出設計規範
02. Craft 快速智慧填充
03. Kitchen 來自螞蟻金服效率提升 Sketch 工具集
04. Paddy 讓圖層自動填充間距、對齊和分佈
05. Fake-Chinese-Name 快速批量生成中文姓名
06. Clipboard Fill 使用剪貼簿圖片快速填充圖形
07. Rename it 快速批量整理圖層命名
08. Replace Layer 一鍵將所選圖層替換為剪貼簿中任何內容
09. Runner 使用命令列來提高效率
10. Swatches 快速切換並使用色板樣本庫
11. Sketch Isometric 快速使用畫板及圖形生成軸測檢視
12. Flow Exporter 一鍵將原型流匯出為 HTML
13. Shared Text Styles 匯出文字共享樣式
14. Sketch Nearest 8 快速將形狀圖層大小舍入至接近 8 的倍數
如果都有用過以上外掛的小夥伴會發現有些外掛功能有重疊,不要著急,下面我會細說。
01 Sketch Measure 快速匯出設計規範
Measure最常用的功能就是上圖中的 匯出規範 ,可以一鍵匯出本地Html的檔案,在瀏覽器中開啟即可擁有點到哪裡看哪裡的自動標註了,市面上雖然提供這個功能的工具很多,比如藍湖、表你妹啊、Zeplin、PxCook。但是他們都有一個共性就是需要將設計檔案上傳到外部伺服器,雖然PxCook可以在本地生成標註檔案,可是也需要使用者安裝桌面客戶端才能開啟。如果你的公司不允許將設計檔案傳到外部,或者限制訪問外網,你有且只能使用Measure。
這款外掛現在已經是Sketch必備外掛了,主要功能包含: 設計規範 和 標註 兩大塊。具體用法的這裡就不再贅述。
PS:近期Sketch更新的52.2版本,很多小夥伴發現Measure用不了了,其實除了Measure還有很多外掛用不了。這裡說明一下我提供的下載連結有兩個,一個是點選英文名稱下載,那個連結我放的是百度網盤,是可以在新版Sketch使用的。一個是點選Measure的logo也放了Github的下載連結。
02 Craft 快速智慧填充
http://cdn.linni.com/Craft%20Official.mp4 視訊介紹
Craft 是一款功能非常強大的外掛,提供Sketch和Photoshop兩個版本,前者的功能較後者要豐富一些,主要功能有原型同步(Sync + Prototype)、設計系統管理(Design System Manager)、資源庫(Library)、Stock圖片庫(Stock)、批量複製(Duplicate)、內容填充(Date)。
這裡主要說一下批量複製和內容填充。Craft的批量複製可以快速進行水平和垂直方向的模組複製,而且自動分組,更厲害的是內容自動填充。
03 Kitchen 來自螞蟻金服效率提升 Sketch 工具集
先看看官網介紹的功能點
Kitchen我想要介紹的有三點,分別是智慧排版、資料填充和圖表生成器。
智慧排版 讓圖層自動填充「 間距 」和「 邊距 」,讓設計稿自動佈局,如果想要真正的實現頁面自動佈局,僅靠這個外掛是不夠的。這裡就設計稿自動佈局再給大家推薦兩個外掛,一個是下面要說的Paddy,另一個就是 AnimaToolkit (之前好像是叫 Auto Layout),在Runner上可以直接下載。
關於智慧排版這一塊,我在使用的過程中發現,在Sketch裡挺好使的,可以很好的將特定元素的 padding 和 spacing 固定,方便拖拽保持佈局不受影響,但是在用Measure匯出到Html時會出現元素錯亂的情況,很尷尬。我現在的處理方式時在匯出規範之前把外掛設定得自適應邊距和間距取消。
資料填充 這裡要誇一下Kitchen了,之前使用Craft的內容填充,內容是英文的挺煩的,現在迎刃而解了。美中不足的是Kitchen不支援內容填充後快速批量複製自動填充相同屬性的內容,感覺後面會推出。現在兩者搭配使用基本上能解決很多虛擬資料問題。
圖表生成器 這個功能對於使用AntDesign元件做中後臺設計是很能夠解決圖表的問題,生成的圖表樣式美觀而且可以橫向拖拽拉伸,不影響表格結構。
可以說螞蟻團隊的 AntDesign 對於企業中後臺產品的設計起到了很大的推動作用,在元件化和審美層面上樹立了一個標杆,不僅自己用而且開源,讓更多的中小企業可以共享其設計資產,讓中後臺產品的設計大有可為。
04. Paddy 讓圖層自動填充間距、對齊和分佈
自動:大多數外掛需要鍵盤快捷鍵才能應用或重新應用效果,而 Paddy 這一切都是在操作圖層時自動完成;
可見屬性:很容易檢視在圖層列表檢視對圖層和組應用了哪些填充/間距而不需要單獨選擇它們,這是因為所有的屬性都是通過圖層名稱設定的;
沒有特殊的資料處理:只是調整和移動圖層到最佳位置,它不會把你的組變成一個特殊的 "堆疊組" 或其他東西,所以其他人或程式可完美地讀取 Sketch 檔案,而無需使用此外掛;
輕量級:它只是做了幾件核心事情,沒有臃腫與一堆無用的功能
以上對於 Paddy 的介紹引用自http://sketch.cm/plugins/141
05. Fake-Chinese-Name 快速批量生成中文姓名
這個外掛與Kitchen的文字填充裡的姓名填充功能是一樣的,我習慣了用這個外掛來生成中文名,所有也推薦給大家。
06. Clipboard Fill 使用剪貼簿圖片快速填充圖形
搭配快捷鍵 Control + Option +V 很好用
07. Rename it 快速批量整理圖層命名
圖層命名是一個老生常談的問題,沒人會接受一個圖層命名凌亂無序的檔案。很多時候因為專案繁多時間不夠,沒有在設計的時候就命名好,有了 Rename it 再也不怕別人嫌棄我的圖層命名了,這款外掛可以實現圖層快速批量命名,支援 序列命名、按字母排序、新增文字命名、新增寬高命名、組合命名和查詢替換命名 ,真的真的超級好用。
具有用法點選下圖,進入 Github 詳閱 Readme 。
08. Replace Layer 一鍵將所選圖層替換為剪貼簿中任何內容
09. Runner 使用命令列來提高效率
10. Swatches 快速切換並使用色板樣本庫
11. Sketch Isometric 快速使用畫板及圖形生成軸測檢視
12. Flow Exporter 一鍵將原型流匯出為 HTML
Flow Exporter 可以非常好的將在 Sketch 裡做好的原型匯出到本地 Html 檔案,在實際工作中這樣就可以非常便利的把互動Demo給產品或者領導演示。
13. Shared Text Styles 匯出文字共享樣式
不知道大家有沒有遇到倖幸苦苦的做完一個專案,形成裡一套字體系統,卻沒辦法在匯出來用於別的專案,以Library的形式新增到新專案,如果要修改還是要回到原來的檔案中,這款外掛的好處在於可以將我們做好的一套字體系統的共享樣式匯出來以一個json檔案共享,提供給團隊裡的其他人其他專案複用,而且支援全域性修改,不會關聯到原始檔案。
14. Sketch Nearest 8 快速將形狀圖層大小舍入至接近 8 的倍數
在日常設計中,我們習慣將元素間距設定為8的倍數,同樣形狀圖層如果能統一為8的倍數是最好不過了,特別是用柵格系統做設計的時候。所有這個外掛在一定程度上可以幫我們偷懶,不用花時間去計算了。
三、 Sketch 52.2 版本新增亮點功能
小夥伴有沒有發現這次Sketch的更新優化的內容還是很多的,我的使用體驗是比之前的版本好看了,更好用了。在功能上我感受到最明顯的兩處是 Data 資料填充 和 Symbol 中加入了共享文字樣式 (就在半個月前我還在為這個功能犯愁,做的元件文字樣式不支援動態調整)。
不好的地方也很多,很多外掛失效無法使用,閃退比較頻繁。
建議謹慎更新,哈哈~
後記
最後,想表達一個觀點,時不時會聽到一種聲音,做設計最看重的是個人能力和想法,軟體只是一種輔助實現想法工具而已。但是我想表達的是,有時候軟體用的好,可以更好的實現想法,可以極大的提高工作效率,可以解放相當一部分無腦的操作,讓我們得以有更多的時間去專注業務,創造更好的想法。
能翻到底的都是朋友,感謝閱讀~
往期好文