成為 UI 設計師之前，得先學會哪個設計軟體？
Sketch 多年來都是 UI(使用者介面設計)設計師主要使用的設計軟體，再配合 Adobe Ai 以及 Ps 進行製圖，但 Adobe 推出了自家專用於 UI/UX 設計的軟體「Adobe Xd(Experience Design)」之後，設計師們從此有了新的選擇⋯嗨囉，我是設計師 Riven。
在寫這篇的時候 Medium 剛破 3K Followers，也得到了 Top Writer of #Design 的殊榮，很感謝各位讀者支持我這邊的各種廢文🥺 如果是新來的朋友可以按個 Follow 噢～
記得年初受邀去台北擔任 Sketch Meetup 講者的時候，面對台下剛下班過來的設計師們，我開頭說了句「噢，各位喜愛 Sketch 的朋友大家好⋯」頓時傳來不少竊笑以及被微妙的眼神包圍 😂 哈哈！
我自己雖然在社群上常常分享（傳教🧙🏻♂️） 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 介面設計軟體的功能都做得相當簡單，介面也是。
就算都沒接觸過相關軟體，為數不多的基本功能對於新手來說的門檻也不是非常高。
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少數複雜的圖形不支援，詳見 官方說明。）
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 是三天一小改，每年固定大改版）且在支援度上相當差。
Sketch 以前是買斷，買一次可以永久使用，大概 $99 美金吧（約台幣三千元）；但後來改成了年費訂閱制，一樣是 $99 美金，一次購買多裝置會便宜一些，但如果你還是學生，要記得使用官網上不太明顯的教育優惠，直接五折啊！ 👩🏻💻點此
要說哪個貴、哪個便宜，實在沒什麼比較的必要。因為 Adobe 可是能用整套設計軟體跟雲端服務啊～ Sketch 還是只有在 UI 設計的使用。
身為一名數位/網路產業的工作者，每個月固定噴出去給工具授權的執業成本就超過萬元（不包含 Netlfix 跟愛奇藝 VIP😅）現在大家都追求更好的工作效率以及產能，我認為花點錢在軟體上很值得的～也是個逼自己專注在事業上的方法啊啊 🥺[購買連結] Adobe Creative Cloud 全套訂閱
[購買連結] Sketch 年費制購買
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 整理成一鍵切換的區塊，如下圖這樣神清氣爽的版面，也讓整體的設計更一致地系統化。
給個小提示，這個 Overrides 操作也是判斷許多設計師 Sketch 能力高低的依據，排整齊的 Symbol 通常能讓團隊可以高效率地協作，不少公司的產品也會有用此方法嚴謹製作的設計 Guideline。（更新）感謝吳姓網友於社團分享近期 Sketch更新「Smart Distribute Upgrades」功能。
8.「第三方工具相容性」
Adobe Xd - ⭐️⭐️⭐️⭐️⭐️
Sketch - ⭐️⭐️⭐️⭐️⭐️我覺得 Adobe Xd 最強的就是跟同家的 Ai / Ps / Ae 水平的整合，除此之外 A 社身為地球上最大的數位產品公司有跟很多知名企業的產品做連動，可以透過 Plugin 或是軟體內進行協作，頻繁地更新也讓 Xd 與第三方工具間的相容性更好。
相較之下 Sketch 顯得更新創感一點，因此有很多數位產品開發上很貼心的設計，也跟時下最新的生產力工具整併在一起，比如說可以用版控 Abstract 或是 Plant 等，在 GitHub 上面也有許多獨立開發者所製作的外掛可以使用。
由於各自支援的第三方工具青菜蘿蔔都有，難分高下；如果團隊在設計開發流程中有剛好能配合上的工具，在設計流程上就很加分。
最後的總結
「欸你覺得 Sketch 還是 Adobe XD 哪個比較好用？」
回到本篇文章標題，通常被問這題的時候，我會反問三題：
1⃣️、現在手邊有什麼電腦？或是公司配什麼機型？
根據我們家 Adobe Xd Taiwan User Group 台灣交流社群 的社群調查，多數人使用 Adobe Xd 也是因為自己或公司只有 PC 電腦可用。
幾年前學 UI 啊因為只有 Sketch 沒得選，大家都會去買 MacBook⋯
我大三的時候也是自己扛了 12 個月的分期付款買下人生第第一台蘋果電腦，每個月固定要噴六千多啊才吃下來啊⋯ 😭
但是現在不一樣了， Adobe Xd 的出現解決了 Windows 電腦沒軟體可用的囧境，如果你工作用的電腦是 PC，那麼其實也沒得選⋯ 就 Xd 而已。
如果你是拿 MacBook 電腦，兩個都可以選的情況下，可以參考這篇文章前面分析的差異點，來做決定。
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 謝謝您耐心的閱讀，期待這篇文章能幫助到你！
更多設計內容可以發摟這邊 Medium，或是我的 Youtube 影片頻道還有 Instagram日常～我們下次見囉 😉
有什麼感想可以留言在這篇下面，或是透過 Facebook 與我聯繫。
小訣竅：如果 Medium 閱讀額度不夠用，可以訂閱 RAR 設計攻略 會收到最新文章、教學影片與近期活動通知！😀（點擊連結後輸入「訂閱攻略」即可。）
