【學長姊帶路】如何選擇適合自己的UI設計工具！

原標《【2022 平面設計師轉職 UI 設計師】Sketch、Adobe XD、Figma 如何選擇適合自己的UI設計工具！》

文/TWJOIN 哲煜科技 | 台灣 | 客製化軟體應用解決方案供應者 – UIUX設計部

對於剛開始要轉職 UI 設計的新手設計師，目前UI介面設計軟體越來越多，Sketch、AdobeXD、Figma、InVision、PhotoShop、illustrator 等等…

每個設計軟體都有產品特色也都有大神手把手教學，其中又以 Sketch、Adobe XD、Figma 為主流UI設計工具。

由於公司最近剛來了一位 UI 設計師的平面新人，問了為什麼我們公司用Figma為主要 UI 設計工具，而不是其他設計軟體，藉由這個機會也整理了這篇文章單說明一下主流軟體常用功能使用心得！

Sketch：UI設計軟體先鋒

我最早使用的UI設計軟體記得最初都是看國外YouTuber Sketch Together 及Sketch相關文章學習了很多技巧(Ｇoogle 翻譯真的是太給力)…畢竟當時中文教學沒人做～😵‍💫 ，先鋒當然還有巨量 Free 資源 讓我覺得這也太佛心了吧！

UI設計軟體逐漸增加，Sketch很多功能都是因應市場需求增加(Prototype、Collaborate、Sync) 身為先鋒就慢慢的變成追隨競爭對手的腳步…但是不能不說Sketch Symbols巢狀元件庫真的很好用！

Sketch 官方特色說明

🖥︎ 作業系統：MacOS
💸 費用：「Free 30 /days 」「$9USD /month」「$99USD /year」
👀 即時溝通與協作：🍤 （弱弱Der~）
🌥 雲端空間：無上限
📂 檔案：本機上傳
🔌 Plugin：🍤🍤🍤🍤🍤🍤🍤🍤🍤 （巨量插件）
📱 Prototype：🍤（弱弱Der~）
💠 Symbols： 🍤🍤🍤🍤🍤（很推薦使用，但對於新手不友善）
🎛 Autolayout：🍤🍤🍤（普通）

對於有 MacBook 新手 UI 設計師是強烈建議可以試試 Sketch UI先鋒的 Symbols 強大的功能，我也是被海量的設計資源及Symbols 綁架了很久…

Adobe XD：整合雲端設計

在AdobeXD出來之前(2017)，擁有MacBook設計師可使用Sketch製作UI介面設計，而Windows設計師主要使用PhotoShop來製作設計。PS 製作UI介面需解決問題非常多（切圖尺寸、專案多個檔案），畢竟PS是點陣圖並非向量。

Adobe 推出 XD介面設計軟體。極簡純白色介面(個人覺得深色比較有fu~)與 AI、PS、Sketch(想讓Sketch 老粉跳槽) 的軟體相容性，Windows、MacOS支援雙平台，真的是讓想學習UI介面設計師降低了門檻（孔金ㄟ魅克普羅）。

AdobeXD 的特色功能像是 Main Component (類似Sketch Symbols 狀態切換)，厲害的 Auto-animation 、Repeat Grid、3D Transforms及快速雲端連結Share Prototype 給其他人，真的是比UI先鋒強大許多。

AdobeXD 官方特色說明

🖥︎ 作業系統：MacOS、Windows
💸 費用：「 Free 」需要登入 Adobe Creative Cloud
👀 即時溝通與協作：🍤🍤🍤（使用起來有點Lag…）
🌥 雲端空間：100GB
📂 檔案：本機上傳
🔌 Plugin：🍤🍤🍤🍤🍤（官方插件庫陸續增加中…）
📱 Prototype：🍤🍤🍤🍤🍤（越來越強大～）
💠 Components： 🍤🍤🍤🍤（對於新手非常友善，操作簡單）
🎛 Autolayout：🍤🍤🍤🍤🍤（很好用100%）

AdobeXD 開發團隊非常用心一直在優化功能，Auto-animation的推出讓設計師可以簡單設定就能達到想要效果，不須透過外掛插件 Anima 或是其他Prototype工具來製作效果。最近還更新支援了 JSON格式 及影片連結，更容易用 XD來製作展示高品質 Prototype 太厲害了～

Figma：UI設計師俘虜神器

為什麼是俘虜神器呢？Figma 可在瀏覽器中編輯共同協作專案，可忽略任何作業系統（目前也有應用程序版 MacOS、Windows），超順暢的線上協作不卡頓，Figma 除了超強線上協作功能外，還匯集了AdobeXD、Sketch喜愛的強大設計功能，並優化了自動佈局進行響應式設計Autolayout，讓設計師花更多的時間進行設計，而花更少的時間重複調整。

什麼是Figma AutoLayout ?? 為何如此強大！！

官方Plugin外掛及共享資源目前已經多到數不清而且外掛安裝下載量超級驚人可想而知，有多少設計師已經被Figma所俘虜，成為Figma用戶。

在Prototype方面Figma 獨特的 Smart animate 更是驚人啊～只要了解操作邏輯便能製作超擬真原型，在開發特效時設計師跟工程師的溝通，很多時候靠雙方通靈及蝦到爆的比手畫腳比喻找範例，才能做出設計師想要的酷炫效果。有了Figma大大減少溝通時間，如果你還不了解有多麽強大，可以跟著這位大神學習 Figma Smart animate 產品頁面製作 Igor Vensko Tutorials 。

Figma 官方特色說明

🖥︎ 作業系統：MacOS、Windows、瀏覽器
💸 費用：「Free / 3 Figma / 3 FigJam」「$12USD /month」
👀 即時溝通與協作：🍤🍤🍤🍤🍤🍤🍤🍤🍤🍤🍤（順暢無比）
🌥 雲端空間：無上限
📂 檔案：雲端檔案即時存擋（有網路不怕當機）
🔌 Plugin：🍤🍤🍤🍤🍤🍤🍤🍤（…）
📱 Prototype：🍤🍤🍤🍤🍤🍤🍤🍤（…）
💠 Components： 🍤🍤🍤🍤（對於新手友善，操作簡單）
🎛 Autolayout：🍤🍤🍤🍤🍤🍤🍤（爆幹方便好用500%）

Figma還有很多好用的功能，趕快被俘虜吧～沒什麼好說的哈哈哈…

小結

公司因為UI設計師增加，以前用 Sketch 檔案互傳合併檔案造成很多時間及格式問題，所以決定轉換成有強大協作能力 Figma 作為首要設計工具。全公司 UI 設計師都被 Figma 俘虜。

目前已經熟悉了 Figma 協作及更多功能後，回去修改 Sketch 檔案時更能了解 Sketch 功能真的沒有這麼人性化的操作。你可能會問轉換軟體會不會有陣痛期，「答案：沒有！」因為介面基本上都一模一樣，但有些相異的地小地方需要熟悉一下。

很多人會有軟體迷失：「誰誰誰用什麼軟體做很厲害耶！」啊～我用OOXX 怎麼做這麼爛是不是要換軟體，這跟軟體沒有毛關係，重點在於你自己是否熟練軟體特性，每個軟體都有優缺點，只要掌握軟體特性符合自己的操作需求就可以，好的設計師不會因為用什麼工具而限制設計能力。

感謝閱讀到最後的你！

希望你已經知道要選擇什麼UI設計工具，那你應該要幫我拍手，更應該馬上去做！Just do it ! GL HF！

也歡迎按讚並關注 哲煜科技的粉絲專頁 喔 ! 感謝閱讀到最後的你。

※本文由 TWJOIN 哲煜科技 | 台灣 | 客製化軟體應用解決方案供應者 – UIUX設計部 授權轉載, 原文:《【2022 平面設計師轉職 UI 設計師】Sketch、Adobe XD、Figma 如何選擇適合自己的UI設計工具！》

瀏覽 314 次