實用Sketch Plugin分享(一)

Wei-Hsun Chen
UXeastmeetswest
Published in
6 min readApr 2, 2018

前言,

本篇適合使用Sketch的人(廢話)

小編使用Sketch來做介面設計較多,主要有以下原因

  1. Sketch有豐富的Plugin可以使用,有些真的可以讓工作非常省時,減少重複性質高的繁瑣工作
  2. 針對介面設計優化,相對於Illustrator包山包海的功能,Sketch雖然功能不像Illustrator那麼齊全,但對於做介面設計來說已經綽綽有餘,而且要找使用工具非常快(例如做個有高斯模糊的iOS UI就比Illustrator快上不少,也有可能只是小編無法去背那些快捷鍵)
  3. 持續更新,最新的版本甚至可以直接在上面做Prototyping(小編還是習慣用其他Prototyping工具,因為發現Sketch上的Prototype跟Symbol整合的並不是很好,有時候會連到不想去的頁面)
  4. 速度較快: Sketch 相較於其他軟體輕量化,有時候在illustrator上開個幾十個artboard連拖拉一下就要等很久,小編很沒有耐性低

今天小編整理一下平常會使用和覺得非常實用的Sketch Plugin分享給大家

  1. Sketch Measure

這是小編最愛的插件之一!

Sketch Measure 是 Utom 做的一個Sketch插件,提供使用者快速的產出視覺規範,在產出視覺規範時以往在其他工具上設計師要花時間去拉每條線去說明間距多少,高和長多少等等,實在是非常花時間,UX Designer已經有其他一堆互動設計的規範要處理了,花時間在產出視覺規範是能減少及減少。

大家可以看看下面這個範例,你只要選擇你要產出間距或大小的物件,然後按一下,咻咻蹦蹦!!!產出間距大小輕鬆寫意,剩下時間裝忙打混!

另外Sketch Measure也提供了直接產出互動式視覺規範的功能,有點像是Zeplin或是InVision的Insight,你可以直接選擇Spec export,就可以產出整個資料夾,開發者可以打開一個html檔案,每頁UI開發者可以直接在瀏覽器裡面去互動的看每個物件的間距、大小、顏色hex值和CSS,設計師也可以在上面標註記等等。

可以試試看Utom給的範例

不過設計師在產出之前必須注意將字體、顏色等等的style就整理好,Sketch檔案也要整理清楚再做產出比較好,最好還是提供個動態的視覺規範比較容易讓開發者理解每個設計元件是如何分類,或是有不同尺寸時這些設計元件是如何延伸。

而且是插件所以無法提供像Zeplin或invisioin線上comment的功能,版本控制也比較麻煩一些畢竟不是線上的可以直接更新

2. Chart

Chart可以提供快速的將一些數據視覺化,你可以複製隨意的數字或是JSON file,Chart幫你產出的熱門的像是餅狀圖或是線圖等數據視覺。

3. Paddy

Paddy也是小編最愛的插件之一,做設計時往往要考慮到介面並不是不動的,往往需要考慮到動態的視覺規範,譬如說按鈕內的文字跟按鈕的padding是多少,不然開發者並不了解按鈕內文字改變時按鈕的大小事如何變動。Paddy提供了讓使用者去定義padding,根據你選擇物件裡內容的大小變化,物件的padding會維持一致。

輸入padding時跟css一樣,若只輸入一個數字表示上下左右padding都一樣,輸入兩個代表上下間距和左右間距,以此類推。

也可以運用在Symbol上,記得要選擇Fit to size Symbol才會根據物件大小去變換。

功能不只有這些,大家可以看說明或是以下教學影片:

4. Craft

Craft是InVision出的一個插件,功能強大,他不只也可以輸出視覺規範(比較偏向StyleGuid),有些很酷的功能像是可以複製並排列物件,定義間距是多少等等,或是設計師有時候需要找些範例圖來用,或是要隨便取些名字等等,可以直接點圖片或文字,插件可以直接幫你隨意找你選擇風格的圖片,或是直接幫你隨意取名,設計師可以省時間在做這些繁瑣的事上,Craft也可以讓你直接用連API抓真正的資訊。

以下這兩個是功能比較小,但是小編覺得非常有幫助的插件:

4. Merge Duplicate Symbols

有用Sketch的朋友都知道,Symbol真的是非常方便的東西,每個頁面可以有一樣風格的按鈕,只要更新那個Symbol就可以即時更新在所有擁有同樣Symbol的UI。

不知道為什麼在複製一個檔案的Symbol到另一個檔案時,或是有同個名字的Symbol時Sketch卻處理得不好,Sketch並不會偵測同樣名字的Symbol,他只會幫你放同樣名字的Symbol進去,造成常常有同樣名字的Symbol讓你不知道哪些Symbols被運用在哪些介面上,要馬要刪掉重複的Symbol,讓後一個一個介面去找哪幾個要重新更新,實在是有點惱人,而Symbol Organizer提供了解決方法:可以看哪些是重複的Symbol,並顯示那幾個Symbols分別套用在幾個UI上面,使用者可以決定要融合哪個,不需要再刪掉每個介面去重新檢查!

5. Symbol Organizer

自動幫你排版你的Symbol的好工具

今天的分享到這邊,雖然這些插件可以讓設計叫繁瑣的步驟簡化,但要注意在做設計規範產出時還是要跟開發者好好溝通,了解哪些東西是不是真的對他們有幫助,小編的經驗是很多時候在規範中說明”相對間距”比較重要,這樣在不同大小的介面上設計才能跟著調整。

其實還有很多不錯用的Plugin,小編有機會的話再分享!有不錯的插件也歡迎分享喔!

--

--

Wei-Hsun Chen
UXeastmeetswest

Product Designer @DocuSign. ex-Meta/Shure. Taiwan originate. Passionate about music, innovation and social issues.