【2021 年更新】新手 UI 設計師必讀！Sketch、Adobe以及Figma的差異以及哪個工具適合你？
身為新手 UI 設計師，了解何種設計工具適合自身學習與使用至關重要，本文聚焦在 Mockup deliever 階段
對於剛開始要設計 UI 的新手設計師而言，市面上的設計介面軟體高達幾十種，如果不做一點功課的話還真不知道從何下手。且因應到未來的趨勢，在這百家爭鳴的時代裡為了讓各家設計師心有所屬，介面設計軟體除了要有流暢的使者體驗，以及能夠真正解決設計師需求的洞見。其中又以 Sketch、Adobe XD、Figma 為主流。
由於公司最近剛來了一位想要轉職 UI 設計師的平面新人，為了讓他快速進入狀況和節省工作流程，我製作了以下的表格，也順便提供給各位新手設計師懶人包跟一些自己使用上的心得
一、使用心得與差異
Sketch：恨鐵不成鋼，早期 UI 設計師的最愛
作為我第一個使用的UI mockup tool，最近有點後繼無力的感覺… 記得最初使用時還是感到非常非常新奇的 畢竟當時 sketch 顛覆了 AI 與 PS 的市場，且成功的成為 UI 設計師的主流工具。
但隨著之後的競爭對手的增加，sketch很多功能都是競品出現後才隨之增加的（包括prototype和real-time collaboration）
過去的老大哥現在似乎慢慢跟不上腳步 但依照目前的市佔率和過去的表現，還是有不少設計師跟團隊是 sketch 的鐵粉。希望 sketch 能守住他的地位，找出更有洞見的策略來抓住設計師的心
- 優點：Plugin多、Mac only（好像不算優點？）、Components View (Beta) 簡單明瞭、訂閱期間結束後可繼續使用原版本
Adobe XD：展現強烈企圖心的小鮮肉 UI tool
為多數設計師使用的 Adobe 系列所推出的介面設計軟體。特色是極簡的純白色介面與 AI、PS 的軟體相容性。還有不同於 Sketch 僅能在 Mac 電腦，XD 也可以在 Windows 平台上使用。（當初就是為了sketch 買了 MacBook）
就以我的個人意見來說，XD 還有很多進步的空間，不過還是有一些功能我認為是比 sketch 與 Figma 優秀的，像是可以直接用 Main Component 設定 State，不需要再分開設定，以及流暢的 Auto-animation 跟簡單的 Repeat Grid。而且按照 Adobe 公司的規模跟人才，應該之後還會推出更讓人驚艷的功能。
- 優點：跨平台（Mac & Windows）、免費（提供一個 co-editor 跟 shared document）、AI & PS 相容性、版本可持續更新
Figma： 令人感到興奮又期待的後起之秀
相信光最近推出的 Variants 就足夠讓眾人吹爆了，我不敢相信到現在還有人沒感受到他的魅力。從 Figma 最一開始以「替設計師解決溝通的問題」當作價值主張來說，就已經引起廣大 UI 設計師的共鳴了。
且 Figma 非常適合拿來當作遠端協作的工具。因為 Browser based 的設計機制，只要你能開啟瀏覽器視窗，不管 Mac 還是 Windows 甚至是 Linux 系統都可以使用 Figma 來設計。並且可以即時性的與團隊 demo 、collaborate 和快速的給予 feedback，Prototype 也很出色！重點是免費！！！這麼接近神器又人性的工具，就算未來會收費我也甘之如飴…
這也是為什麼近年 Figma 的聲勢愈來愈浩大的原因，總覺得未來 Figma 有可能會變成 Mockup design tool 的主流，拭目以待
- 優點：跨平台（Mac & Windows & Linux系統可開啟）、網頁隨開隨用、免費、 預覽 css code 、即時溝通、版本可持續更新
二、表格統整
- 以下統整表格僅探討個人方案，企業版不在此限
※ 上圖更正：figma 可以存成本機檔案 .fig
2021 年更新如下：
【Adobe XD】
個人版已經有收費方案，收費後功能更完整。
原本的個人版從 2021 年 6 月開始有以下限制：
• 匯出成 PDF 檔案次數上限 2 次
• Prototype 的匯出錄影檔次數上限 2 次（Mac only）
• 限 1 個公開的 library 和 1 位共同編輯者，瀏覽者則不限（2021將上路，時間未定）【Sketch】
• 2021 年 5 月開始有多人即時協作 (real-time collaboration)【Figma】
以下變動已在 2021 年 4 月開始生效
• (Team) Project 只能有 3 個 file，每個 file 只能創建 3 個 page
• 從原本的 2 位 co-editor 變成無人數上限的 co-editor
• draft 只有自己能編輯，別人只能看到有什麼檔案。如果需要多人協作需要把 draft 的檔案拉到 team 裡
三、整體表現與建議
(1) 收費方案
目前提供免費方案的有 Adobe XD 跟 Figma， sketch 為訂閱制（USD 99/年，續約為USD 79/年），針對新戶享有 30 天免費試用，所以對於學生練習而言不是那麼親切。
(2) 切圖表現
目前三種軟體都可以進行切圖和導出，也都能連結 Zeplin Plugin。要說比較差異的話就是 Adobe XD 目前需要在 Export 時選擇切圖格式。（網友回饋：選擇 ios 可生成1x/2x/3x 的 圖片形式，web 僅導出 1x/2x。Sketch 跟 Figma 則是可以直接在右側 Panel 設定並匯出。）
(3) 設計交付
對 in-house 的團隊來說，Figma 的設計檔只能以 Link 的形式交付，要是網路不好 Figma 會無法順利編輯，而 XD 跟 Sketch 能夠在無網路的情況下開啟應用程式並存檔，可能對某些人而言會比較適合。
（網友回饋：Figma 可存為 .fig 存在本機端）
(4) 未來趨勢
依照目前的趨勢，勢必有愈來愈多設計師轉移到 Figma。由於它強大的跨平台、即時溝通性以及充滿潛力的創意性，非常適合遠端團隊及跨國工作的設計師。
不過以初學者而言，我認為不一定非得選擇 Figma，其實 Sketch 跟 Adobe XD 可能會更適合新手（個人意見），因為 Figma 的學習曲線會再相對複雜一點，可能需要多付出一些時間來學習。
所以參考目前預算考量、未來公司型態、團隊溝通模式、設計團隊體系，來決定使用何種 Mockup design tool。如果你是個非常有時間的新手 UI 設計師，去學 Figma 吧，絕對會愛上的。
如果說 Sketch 是讓人微醺的紅酒，Adobe XD 是慢慢侵蝕你的涼菸，那 Figma 絕對是讓你欲罷不能的一級毒！！！品！！！不管多少都給我來一點！！！
四、各軟體的使用痛點
- Canvas 大小限制：
Adobe XD/Figma網友回饋：Figma 的 canvas size limit: 每邊各130,000px (-65,000~+65,000），檔案有 2GB 的限制；每張 bitmap image 有 4,096 x 4,096 px 的限制，若超過會自動縮小；Adobe XD 的 canvas size limit: 50,000 x 50,000 px。根據外國網友經驗在 1920/web 的情況下可放 60+以上的 Artboard，非常吃效能跟空間。 - Artboard 沒有 Fit 功能：
Adobe XD - Ctrl+D/Cmd+D 不能重複上一步動作：
Adobe XD - 形狀圖層容易誤觸，被轉化成路徑（Path）：
Adobe XD - 切圖後的 Component 需要另外放置到空白區塊並且存為 Local file 才能成功導出至 Zeplin：
Adobe XD - 字體（Text Style）被顏色限制：
Adobe XD/Sketch - 畫布（Artboard）與圖層（Layers）無法同時拖拉：
Adobe XD/Sketch - 複製圖層或元件候，不能多選 Artboard 貼上至同樣區塊：
Sketch - 內陰影無法設定：
Adobe XD - 軟體之間的圖層無法承襲：
- Sketch 貼上至 Adobe XD → 產生 Mask Group / Path / Repeated Group
- Sketch 貼上至 Figma → 合併圖層變成一張 image
- Adobe XD 貼上至 Sketch / Figma → 合併圖層變成一張 image
- Figma 貼上至 Sketch / Adobe XD → 無反應，需事先 Copy as SVG 或使用其他付費轉檔外掛（網友回饋）最後，我開始經營 Instagram 囉！我利用職場型漫畫的方式描述新手設計師在成為 UXUI 設計師的心路歷程，以設計師視角畫出轉職的故事以及工作上可能會遇到的事情，與讀者一起成長！
有興趣的話請追蹤 ➡️ uxui.bobo
謝謝閱讀到這裡的你們！如果喜歡我的文章的話，可以幫我拍拍手👏👏👏📌 拍手 1-10 下：謝謝分享～
📌 拍手 11-25 下：很不錯！
📌 拍手 26-35 下：優質好文，期待下一篇
📌 拍手 36-50 下：超級實用！快點再出其他文章呀～～另外，也可以留言或寫信跟我分享意見或是推薦我其他主題唷！
也可以直接訂閱我，不定期會更新文章來回饋朋友們📬
