Sketch to Figma 新手練功心得

My Sketch Painpoints

從事UX/UI設計兩年多來，我一直是死忠的Sketch粉絲 (辦公桌iMac會貼鑽石貼紙、背包會別鑽石別章的那種geek)。每當我遇上設計撞牆期，看見那顆溫暖剔透的橘色鑽石，信心就會從混亂的雜質中提煉出來，提醒我保持當初從外行跨入設計的初心✨

不過任何新創的產品，當然有它設計上的盲點和進步的空間。Sketch社群上活躍的plugins外掛分享，反應出用戶對優化產品的需求和實踐．就我個人經驗而言，Sketch有兩項核心痛點困擾著我：

1. 裝置綁定軟體，檔案無法同步 我在家和公司有空時會練習DailyUI，但我必須分開儲存檔案到Google雲端。有次因為檔名相同，還不小心蓋掉最新的版本。

2. 仰賴第三方平台溝通設計 我在工作上因使用需求會分享我的設計到不同的平台，像是Dropbox Paper搜集想法回饋、Invision Freehand討論用戶流程、Zeplin輸出spec進行開發。

What if...

我們可以跳脫裝置和軟體框架，走到哪設計到哪，然後整合設計、分享、評論、輸出規格功能於一身？

Introducing Figma

最近我的一位設計同好推薦了Figma，他形容「就像在Google Doc上協作設計」，重點是從Sketch過渡到Figma的學習曲線很短，不像Adobe XD要從頭建立設計檔， Figma可以直接轉換上傳的Sketch檔案。躍躍欲試的我隔天馬上開始試用，使用一週後我發現已經回不去了..."Diamonds are NOT forever!" 趕快來看看Figma有哪些實用的功能吧！

雲端作業免安裝、支援多種系統 Sketch因為使用Mac原生框架元件開發，僅支援MacOS系統；Figma提供雲端作業空間，除了免除軟體下載和更新需求，也支援Windows和Linux系統，讓使用多元系統的設計團隊可以合作無間。

開放協作設計、即時回饋分享 設計團隊可以共同編輯同一份檔案，介面上會顯示編輯者頭像、評論分享功能，也可以開啟觀察模式 (Observation mode)和簡報模式(Presentation mode)，適合進行設計評論、客戶簡報和用戶測試。 雖然我是公司裡目前唯一的UX/UI設計師，但可以直接在原檔上和主管及IT團隊溝通設計，而且分享連結的對象不需要註冊登入Figma帳號，真的很方便啊！

Figma的主要介面和功能

簡報模式可以即時評論

快速產出互動雛形設計、同步連接App 之前在Sketch用Invision外掛做過基本的互動雛形，不過Invision免費版有限制專案數量，而且瀏覽者也要註冊帳號。現在我可以直接在雲端製作、展示、分享互動設計．另外Figma和Sketch一樣推出了Mirror App，裝置連接手機便可同步展示設計。

自動儲存和版本歷史 ⌘S 是我在Sketch最常使用的快捷鍵之一，然而每次輸出到Zeplin都會跳出儲存提示，花費不少時間等待更新。Figma自動儲存就和Google Doc一樣人性，讓我可以專心設計，作業起來更順暢． 另外Figma還有版本歷史功能 (Version History)，可以說是版本控管的簡易版。我之前剛開始研究版本控管並試用Abstract，感覺從Figma入門更容易些。

Figma的快捷鍵有一個有趣貼心的小巧思：使用過的快捷鍵會標示藍色，讓你知道還有哪些功能沒玩過！

永久免費版和多元外部資源 最棒的是Figma提供永久免費版服務 (限定2位編輯者和3個專案)，雖然付費版和企業版提供更完整的服務 (像是團隊共用Libraries)，不過目前我的使用需求很簡單，Figma用起來綽綽有餘！我立刻分享給一位想轉換跑道學UI設計的朋友。之前我們帶著電腦見面進行Sketch一對一教學，後來她的Sketch試用期結束，需要存錢購買正式版。現在Figma提供她免費的學習資源，我甚至可以和她雲端教學、即時給予回饋！ Figma的外部資源也很豐富實用， 除了基本常見的Unsplash圖庫、Avatar圖示、lorem ipsum假文產生等， 還有特別的「圖表編輯」功能 (Chart)。網路上有許多在Sketch繪製圓餅圖的步驟教學，說明先畫一個線條圓形，接著在線條設定依百分比調整虛線長度和間隔就可以精準地繪出圓餅圖。現在Figma的外掛可以快速設定各種圖表，非常實用！

Figma的多元外掛讓設計圖表更簡單！

Suggestions

和公司IT團隊討論過Figma的應用後，結論是Figma可以整合溝通與展示設計的平台(Freehand, Invision, Paper)，但在輸出spec的細節還是無法取代Zeplin。例如Zeplin有獨立出檔案更新的類別和時間，讓工程師可以一目瞭然更新項目。另外Zeplin有提供參考程式碼和設計文案的直接複製按鈕，方便作業。

我個人好奇：既然Figma是雲端工具，是不是也可以在iPad操作，這樣以後就不用扛著筆電長途旅行了！測試後發現iPad可以檢視檔案但無法編輯。小遺憾！

Conclusion

在UX/UI設計圈打滾很幸福的一點是，可以見證越來越多貼近用戶需求、改寫設計思維和應用形式的產品問世。近10年前Sketch的推出掀起介面設計的浪潮，現今Figma後浪將設計再推向雲端的開放領域，下個10年又會有什麼發展呢？讓我們拭目以待！