PSD 一鍵轉換成 Sketch UI 設計檔案

UI 設計工具日新月異,設計師幾乎每隔兩三年就要把檔案大遷徙。Photoshop 跟 Sketch 有天淵之別,將檔案舊酒變新酒,有可能嗎?

Photoshop 是揮灑創意的絕佳工具,但說到 UI 設計,現在市場上則以 Sketch 和 Figma 兩大軟件為首。為了減少檔案「大搬家」的痛苦,幫助大家好好過渡去 Sketch,Avocode 開發了 PSD to Sketch Design Converter,幫助設計師一鍵將 PSD 轉換成 Sketch 檔案。

他們推出公測版時,我已急不及待翻箱倒櫃,把陳年舊作上載轉換,方便日後管理和修改。

將 PSD 轉換為 Sketch 檔案

轉換過程十分簡單。前往 PSD to Sketch Design Converter 上載 PSD 檔案,填寫電郵地址後便會開始轉換。經過數次測試,小於 10 MB 的檔案都能夠在一分鐘內迅速完成轉換

上載檔案及填寫電郵等通知

當檔案轉換完畢,便會收到附帶 Sketch 檔案的電子郵件。從下方電郵截圖可見,Sketch 檔案真的比 PSD 小太多了,而且實際轉換時間比官方預計的還要短。

轉換成功電郵所示的資料

InVisionZeplin Sympli 也有類似的功能,大家不妨對比一下。

轉換成品比較

我把陳年的 RTHK NewsTVB 娛樂新聞 App 的設計稿拿來小試牛刀,一起看看轉換成果吧:

RTHK News App 測試結果
RTHK News App 測試結果
TVB 娛樂新聞 App 測試結果

或許 Avocode 本身的平台已經做了相似的轉換功能,因此成果不俗:

  • 少於 10 MB 的檔案毋須 1 分鐘完成轉換(很快好嗎 😮)
  • 圖層沒有少,隱藏的圖層都在
  • 圖形及 vector 圖示分毫不差地歸回原位
  • 保留了參考線
  • Sketch 檔案非常小!(Sketch 的特性)

基本功能都做齊了,但從上圖不難發現瑕疵。最明顯是文字行高造成的錯位、無法轉換複雜的漸層及剪裁圖層 (clipping mask),但於短時間內取得如此成果令人驚嘆。

為甚麼要將 PSD 轉換成 Sketch?

這個話題大家已經討論過很多遍:

使用 Sketch 設計 UI 已成大勢所趨

說到 UI 設計工具,現在已經是 Sketch 跟 Figma 的天下。「工欲善其事,必先利其器」,UI 設計強調易用性與互動,因此不論軟件的繪圖功能多超卓,反不及組件庫、切圖功能重要,因此堅持用 Photoshop 或 Illustrator 設計實在不太合適。

至於 Adobe XD,是 Adobe 姍姍來遲的 UI 設計軟件。應有的都在,但就是趕不上「兩巨頭」進步之快與插件支援數目。工作流程上,要不是需要時常匯入 Photoshop 或 Illustrator 檔案,又或是訂閱了 Adobe 的方案,我也不推薦使用較冷門的 Adobe XD 學習或進行 UI 設計。

過了幾個春秋,香港的 UI 及 UX 設計逐漸開智,終於不再抱殘守缺、因循守舊。這行業尤其是 UI 及 UX 設計,使用的軟件、工具、方法論時常在變。我們需要與時並進、汲取知識,才能保持競爭力,跟世界接軌。回顧工作流程與工具則是第一環。思考團隊如何合作,提升工作效率,把省下來的時間多作思考又如何?

科技日新月異,沒有設計師能單靠軟件走天下,但渴求新知的態度將斷定你職業生涯的高度。

我說了就算 😂

🔗Avocode PSD to Sketch Design Converter

關於 Avocode 的「正體」

Avocode 的主要業務不是搞轉換器喔!他們家的網上設計兼開發平台也是挺知名的。只需一個平台,你便可以匯入 PSD 或 Sketch 檔案進行設計、檢視 UI 規格 (UI spec)、切圖和讓工程師查看程式碼。把幾個工序自動化,並集合到一個平台,提升設計及開發工作的效率,絕對是大勢所趨!