成為 UI 設計師之前，得先學會哪個設計軟體？
Sketch 多年來都是 UI（使用者介面設計）設計師主要使用的設計軟體，再配合 Adobe Ai 以及 Ps 進行製圖，但 Adobe 推出了自家專用於 UI/UX 設計的軟體「Adobe Xd（Experience Design）」之後，設計師們從此有了新的選擇⋯
懶得讀文字的同學可以看影片～
記得年初受邀去台北擔任 Sketch Meetup 講者的時候，面對台下剛下班過來的設計師們，我開頭說了句「噢，各位喜愛 Sketch 的朋友大家好⋯」頓時傳來不少竊笑以及被微妙的眼神包圍，哈哈！
親自到 Sketch Meetup 場合講 Adobe Xd⋯⋯（踢館？
我自己雖然在社群上常常分享（傳教） Adobe Xd，也協助 Adobe 台灣官方進行社群推廣，但其實我在 2016 年就開始使用 Sketch，累積也有兩三年的經驗後，才跳槽到 Adobe Xd 的。在這兩個目前最多人使用的 UI 設計軟體的選擇上，我想我可以在經驗上給大家分享一些心得。
今天這篇 Adobe Xd 以及 Sketch 比較，我想在剛踏入 UI 領域學習時，不少同學都會有這樣的猶豫，而這也是設計師社團上常見的問題，而很多人也為此要去買新電腦。但若已經很資深的朋友，反而不會去想要去學哪一套工具，原因我們會在最後做說明。
Adobe Xd / Sketch 基本介紹
Adobe Xd （免費方案）
Adobe 旗下一款全新且主打結合介面設計、建立原型以及跨平台體驗設計的軟體，將 Wireframe、Design 以及 Prototype 等 UI/UX 設計流程整合至同一軟體中，並能直接導出標註元件與開發者進行協作。
Sketch（試用30天）
以其閃亮亮黃色鑽石為人所知，由於是很早就以功能簡單與 UI 設計專門為訴求而成為設計師慣用軟體，並因此在網路上大多數的教學文章都以推薦 Sketch 為主，業界中較資深的設計工作人員也多使用以此為主軸的設計流程。
Adobe Xd / Sketch 使用比較
接下來，我們擷取各自的設計使用情境中，共 8 個實際的比較與參考星等。
1.「容易上手程度」
Adobe Xd - ⭐️⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️
如果你是設計系大學生，或已經熟悉 Illustrator / Photoshop 等繪圖軟體，那不管是 Adobe Xd 還是 Sketch 都是很容易上手的，因為這類專門用於 UI 介面設計軟體的功能都做得相當簡單，介面也是。
就算都沒接觸過相關軟體，為數不多的基本功能對於新手來說的門檻也不是非常高。
Adobe Xd 軟體介面
Sketch 軟體介面
2.「電腦（作業系統）支援」
Adobe Xd - ⭐️⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️
Sketch 多年以來都只支援 MacOS 系統的電腦，因此在初步購買電腦時，大多數的設計師會推薦使用 MacBook Pro 筆電，或是 iMac 桌機等，但相較於 PC 電腦來說，價格稍微貴了一些。
Adobe Xd 的問世可以說是解決了這個入門門檻，支援 Windows 以及 MacOS 雙作業系統都可以安裝使用，如果團隊協作時也不用擔心對方的電腦能不能開啟專案檔，另外因為不少大學機構以及企業的硬體裝置都是 PC（Windows）電腦，所以大大地解決了以往沒有專用 UI 設計軟體的麻煩。
比較需要注意的是，Windows 目前僅支援 Win10 Ver.1703 以上版本。更多還性需求：點此。
3.「繪圖功能」
Adobe Xd - ⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️
以向量繪圖來說，Sketch 軟體內建的工具更豐富，尤其是漸層的部分我個人覺得很好用！也比較多細部設定可以操作；Adobe Xd 內建的基本繪圖工具較少，單純做介面還夠用，要進行插畫繪製就比較辛苦。
但其實 Xd 這項產品是故意這麼設計的，主要是用來搭配同為 Adobe 家的 Illustrator 以及 Photoshop 做設計。現在 Adobe Creative Cloud 是走訂閱制，可以一次使用全套的 Adobe 軟體，也就是說用了 Xd，要順便開 Ai/Ps 只需要安裝一下就可以使用。
我們可以在 Ai 先畫好圖，直接貼上 Adobe Xd，或是直接用 Xd 開啟 .psd 的檔案，圖層以及圖形設定大多數都會保留下來*，可以直接接續設計流程。
（*在 Ai 以及 Ps少數複雜的圖形不支援，詳見 官方說明。）
Adobe Xd 的繪圖工具簡單易懂
Sketch 的繪圖工具較多，且能自定義面板。
4.「軟體輕量化」
Adobe Xd - ⭐️⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️
這兩款設計軟體有個很棒的共同點，就是都屬於輕量級的工具。
也就是電腦在開啟並執行設計的同時，比較不容易當機或是卡頓，相較於其他像是 Ps/Ae 這樣需要大量渲染處理的工具來說，Adobe Xd 以及 Sketch 在使用時都相當順暢。
這樣是為了在做 UI 設計時，能展開大量的畫布（Artboards），並進行各自頁面的處理；有時候一個稍微大一點的網站可能就有 30 個、50 個以上的頁面，為了畫面間的連貫性，一定是都會放在同個專案檔的，這時候輕量級的軟體才能負荷。
至於電腦硬體的選擇上，如果是初階的電腦（比如說 MacBook Air）在「學習」上兩個軟體都是沒問題的；但如果在工作或是在公司使用，建議一定都要使用到 MacBook Pro 或是以上的規格，我目前工作主力機是 MBPR 15"（16G RAM、512GB SSD、i7處理器）以符合實際工作上時可能會多開軟體、同時使用效能怪獸 Chrome 以及開啟團隊協作工具等等。
5.「擴充外掛（Plugin）」
Adobe Xd - ⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️
Sketch 略勝；原因是多年來開發者們替其開發了無數的實用 Plugin，做專案的時候常常遇到某個功能 Sketch 沒有，但可以在全球最大男性交友平台 GitHub 上找到，或是偶爾逛到很方便的工具，可以加速流程效率。
相信每一位 UI 設計師都有自己一套常用的 Plugins。不過長期來看有個缺點，就是許多民開開發者製作的 Plugin 可能不會一直保持更新，隨著 Sketch 的幾次改版後，可能就會有不支援的情況發生。
Adobe Xd 在去年也終於開放的 Plugin 的功能，我們可以直接搭配 Google 試算表、微軟 Teams，以及標注工具 Zeplin 等官方的插件，也可以使用許多第三方的外掛來協助我們進行 UI 設計。根據我的觀察，Adobe Xd 的 Plugin 數量成長非常快，而且多是 Adobe 官方導入的，相較於 Sketch 的高手在民間，Adobe Xd 的 Plugin 在版本及穩定性上稍微好一些。
Adobe 甚至還發佈了幫 Xd 製作 Plugin 的設計師、開發者的加速器計畫，補助獎金甚至進駐總部，從此可以看出 Adobe 對於 UI/UX 產業以及發展 Xd 的重視。（有興趣可以參考下面連結）
6.「購買費用」
Adobe Xd - ⭐️⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️
接著，來看看各自的購買費用吧。
Adobe 目前是訂閱制，成為 Creative Cloud 付費會員後，就可以使用 Ai/Ps/Ae/Pr/Xd/Lr/⋯⋯等整套設計解決方案，吃到飽！
目前以個人版來說每個月是 $1,680 元，我認為如果工作上同時會需要使用三個以上的工具，這就是 CP 值相當高的選擇；有些學校機構會使用CS5/CS6 等舊版本，但這些功能上都輸了很大一截（Adobe CC 是三天一小改，每年固定大改版）且在支援度上相當差。
Adobe 開發給各領域用的設計軟體很多樣 from Youtube
Sketch 以前是買斷，買一次可以永久使用，大概 $99 美金吧（約台幣三千元）；但後來改成了年費訂閱制，一樣是 $99 美金，一次購買多裝置會便宜一些。但如果你還是學生，要記得使用官網上不太明顯的教育優惠，直接五折啊！ 點此
from Sketch 官方 Medium
要說哪個貴、哪個便宜，實在沒什麼比較的必要。因為 Adobe 可是能用整套設計軟體跟雲端服務啊～ Sketch 還是只有在 UI 設計的使用。
身為一名數位/網路產業的工作者，每個月固定噴出去給工具授權的執業成本就超過萬元（不包含 Netlfix 跟愛奇藝 VIP XD）現在大家都追求更好的工作效率以及產能，我認為花點錢在軟體上很值得的～也是個逼自己專注在事業上的方法啊啊！
7.「獨一無二的殺手級功能」
Adobe Xd - ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️
其實對已經掌握 UI 設計軟體的資深設計師來說，包含 Adobe Xd 與 Sketch 在內的軟體都是長得差不多的，唯一會影響今天要打開什麼軟體的決策，除了專案或電腦硬體限制外，就是各個軟體的「特色功能」。
- Adobe Xd 的 Repeat Grid 做元件的快速佈局
先科普一下：除了基本的 Assets 元件庫做常用物件的儲存之外，Adobe Xd 內的 Component 則可以將 UI 中會重複出現的元件做歸整，之後要修改時可以一次處理好。
其實這個 Component 功能在 Sketch 裏也是有的，就叫「Symbol」。但 Adobe Xd 有個很特別的玩法，叫「Repeat Grid」可以複製整排元件並進行快速排版。
這個功能肯定是基於 UI 上常見的設計師操作去設計的！
不論是做網頁的貼文樣式、電商的產品版面，或是展示 user 的資料欄位，在以往都是需要一個複製一個，然後去做對齊；透過 Adobe Xd 的 Repeat Grid 可以快速地進行水平的重複，並且在做不同尺寸的排版時，同個物件也可以直接做垂直延伸。
這邊有個小提示，就是如果你設計的元件內含切圖標記，在設計稿最後導出的時候，不會因為 Repeat Grid 而重複出現，而是會相當聰明地只擷取原始元件的切圖設定。
- Sketch 巢狀元件 Nested Symbol （Overrides）
上面提到的「Symbol」功能在 Sketch 中行之有年，我猜這也是剛開始大多數 UI 設計師喜歡用 Sktch 的主要原因：元件化設計。
簡單來說，你看平常用的那些網站啊、APP，其實有很多局部是重複的，像是最上面的 Header、最下面的 Footer，或是頁面中的標題、按鈕以及卡片式設計等等，這些重複性的元件如果都各自獨立，那如果有天要調整一點點間距或換顏色，那不就要全部手動調整嘛？
透過元件化的 Symbol 可以將做好的母元件儲存成模組，並直接複製沿用，這大大地加速了我們的設計流程。而且 Sketch 有更強的「巢狀 Symbol」可以把 UI 整理成一鍵切換的區塊，如下圖這樣神清氣爽的版面，也讓整體的設計更一致地系統化。
Create Adaptive Buttons Using Combined Shapes In Sketch
給個小提示，這個 Overrides 操作也是判斷許多設計師 Sketch 能力高低的依據，排整齊的 Symbol 通常能讓團隊可以高效率地協作，不少公司的產品也會有用此方法嚴謹製作的設計 Guideline。
（更新）感謝吳姓網友於社團分享近期 Sketch更新「Smart Distribute Upgrades」功能。
8.「第三方工具相容性」
Adobe Xd - ⭐️⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️
我覺得 Adobe Xd 最強的就是跟同家的 Ai / Ps / Ae 水平的整合，除此之外 A 社身為地球上最大的數位產品公司有跟很多知名企業的產品做連動，可以透過 Plugin 或是軟體內進行協作，頻繁地更新也讓 Xd 與第三方工具間的相容性更好。
Adobe Xd 的部分合作第三方工具。
Sketch 的部分合作第三方工具。
相較之下 Sketch 顯得更新創感一點，因此有很多數位產品開發上很貼心的設計，也跟時下最新的生產力工具整併在一起，比如說可以用版控 Abstract 或是 Plant 等，在 GitHub 上面也有許多獨立開發者所製作的外掛可以使用。
由於各自支援的第三方工具青菜蘿蔔都有，難分高下；如果團隊在設計開發流程中有剛好能配合上的工具，在設計流程上就很加分。
最後的總結
「欸你覺得 Sketch 還是 Adobe XD 哪個比較好用？」
回到本篇文章標題，通常被問這題的時候，我會反問三題：
1、現在手邊有什麼電腦？或是公司配什麼機型？
根據我們家 Adobe Xd Taiwan User Group 台灣交流社群 的社群調查，多數人使用 Adobe Xd 也是因為自己或公司只有 PC 電腦可用。幾年前學 UI 啊因為只有 Sketch 沒得選，大家都會去買 MacBook⋯⋯，我大三的時候也是自己扛了 12 個月的分期付款買下人生第第一台蘋果電腦，每個月固定要噴六千多啊才吃下來啊！
2、公司職缺或目前團隊採用的流程是用什麼？
必須要老實地說，UI 設計畢竟只是整個產品設計過程中的一環，這意味著所有設計師都需要跟著團隊一起運作；而 Adobe Xd 與 Sketch 因為不可交互使用的關係（設計稿檔案不能共用），都自己衍伸出了各自的設計與開發流程，所以一家公司或一個設計部門，通常會有指定使用，而通常也會出現在招募的職缺頁面上。
但如果你是即將決定團隊使用哪一套軟體作為這次專案的軟體的話，我覺得要評估該專案在中後期可能會用到的第三方工具，去作出相應的選擇。
比如說需要 Invision Studio 來做原型，或是用 Flinto 做動畫，那麼在專案一開始就要都使用 Sketch 來製作。
又或者公司已經有採購 Adobe CC，或是要讓工程部門的 PC 配機也能開啟設計檔，那使用 Adobe Xd 會更好一些，就算沒有剛提到的 Mac Only 軟體，也可以使用內建的 Prototype 工具、用 Marvel APP 拉 flow，或是搭配 After Effects 做動畫，都有相對應的配套措施。
3、剛開始學習階段，還不用到正式工作使用。
如果你還是設計系大學生，或目前還在安排要選哪個來當做第一款工具做學習， 基於未來的發展性、市佔成長等考量⋯⋯我會推薦新手先學 Adobe Xd。
原因是，大多數的大專院校電腦教室，都還只是配有 Windows 電腦（少數有錢的學校有全 Mac 教室 ）這意味著幾年後從大學出來的新鮮人多是習慣使用 Adobe Xd，而這也會影響整體業界大家優先選擇的設計流程。
除了學校之外，政府機構以及企業單位也是，我原本以為設計師都是用 MacBook（我也是啊！）但這一兩年跑了很多企業內訓跟學校講課，才知道有為數不少的工作環境是整間公司都是用 Windows 電腦，而這也影響了教授推廣或政府教育部的教學計畫，都只選用 Adobe Xd。
的確現在還是很多公司採用 Sketch 為主軸的設計流程，但經過上述的整體社會環境牽動，在不出一兩年的未來，使用 Adobe Xd 的人數會持續上升，而因應的工具與相容性也會陸續出來。
現在我們社團每週加進來的新手都超過一百位，也能多少看出一點趨勢。
啊，別誤會了，我是說「先學」。
等熟悉 Adobe Xd 之後，不管要換用 Sketch，或是 FramerX 等等，都因為其「長得都差不多」而學起來都很快。而這篇文章的使用比較也可以輔助你決定要先使用哪套工具，但我還是建議都用用看，挑順手的開始。
選擇使用哪個設計軟體跟工程師選擇要學哪一套程式語言不同。
Developer 的每一套 Coding 技能都有不同的邏輯、寫法，要花時間修煉點技能，而且有有相對應的開發環境，每個社群派系都有各自的主張，而 Desginer 的軟體像是 Adobe Xd 與 Sketch 僅僅是工具而已，設計理論與方法基本上都一個樣，我們不用太去糾結到底要用哪一套。
在稍微有一點資歷的設計師眼中，其實不太會去選要學哪個，身為大人我們都是全都得要會的⋯⋯，之後職業生涯中，肯定會遇到不同設計流程的專案、或是習慣不同流派的同事，又或者也還會有更新更好的軟體出現。
UI 設計師隸屬於 IT 資訊網路產業，唯一不變的是每天都要保持學習，以及擁抱每一天的不一樣。
哎，就不多說了，學新軟體去⋯⋯
推薦學習資源
如果只是想學習軟體，建議先下載 Adobe Xd 自己摸熟，不太需要去上課。然後，遇到問題再 Google 查資料，養成上網爬梳的習慣，畢竟之後若想待在網路、資訊產業，自己找資料（大多是國外的英文）跟解決問題能力還滿基本的～
只是 UI 設計還涵蓋了許多設計流程、設計方法以及較深的理論基礎，這部分我曾經整理撰寫過「介面設計師轉職之路 （UI Designer Road Map）」 也許能指引一些方向。
如果想更有方向地準備，或想省下多點時間，我有跟 YOTTA 合作的線上課程，目前已經超過千人參與囉！（應該有不少讀者有買，謝謝你們的五星評分）
Sketch 的話，剛好去年有跟我相當尊敬的設計師美勞哥（吳姓網友）合作辦了這場線上的超完整軟體教學，除此之外若是對俄羅斯方塊遊戲有興趣也可以發摟他的 Twitch 頻道。
若是有遇到相關的 UI/UX 設計問題，歡迎分享到我們的 Adobe Xd Taiwan User Group 台灣交流社群噢！這次關於 Sketch 與 Adobe Xd 的討論正熱烈進行呢！
我是設計師 林育正 Riven 謝謝您耐心的閱讀，期待這篇文章能幫助到你！
YOTTA 你最專業的學習夥伴，提供優質內容與有趣觀點，擴大豐富你的視野。
- 訂閱林育正老師的專欄，閱讀更多文章。
- 延伸學習：「Adobe Xd設計實務｜成為UI設計師的8項核心技能」
所有圖片來源：林育正
