欸你覺得Sketch 還是Adobe XD 哪個比較好用？ | YOTTA友讀

Sketch 多年來都是UI（使用者介面設計）設計師主要使用的設計軟體，再配合Adobe Ai 以及Ps 進行製圖，但Adobe 推出了自家專用於UI/UX 設計的 ... 購買前請先完成信箱驗證唷立即填寫購買前請先完成信箱驗證唷立即認證你有  筆未完成的訂單前往我的訂單類別最近搜尋最多人搜尋TOP5合作專區合作申請合作專區您好！這邊可以查看你的教師資訊喔！線上課程：實體課程：募資專案：課程管理目前總收入：元可提領收入：元收入管理文章數：篇訂閱人數：人文章管理合作申請我的課程系統通知課程通知訂閱通知沒有未讀訊息顯示全部購物車已加入堂課程你的購物車是空的唷！線上：實體：募資中已開課prop.price%>總計：登入/註冊我的課程個人檔案我的訂單我的優惠券我的訂閱超強師資邀請好友常見問題登出取消全部課程類別所有生活設計商業語言科技登入/註冊課程類別合作申請課程類別我的課程個人檔案我的訂單我的優惠券我的訂閱超強師資邀請好友合作申請合作專區常見問題登出課程類別全部生活設計商業語言科技欸你覺得Sketch還是AdobeXD哪個比較好用？2019-09-1911:28:45待發布編輯成為UI設計師之前，得先學會哪個設計軟體？Sketch多年來都是UI（使用者介面設計）設計師主要使用的設計軟體，再配合AdobeAi以及Ps進行製圖，但Adobe推出了自家專用於UI/UX設計的軟體「AdobeXd（ExperienceDesign）」之後，設計師們從此有了新的選擇⋯懶得讀文字的同學可以看影片～ 記得年初受邀去台北擔任SketchMeetup講者的時候，面對台下剛下班過來的設計師們，我開頭說了句「噢，各位喜愛Sketch的朋友大家好⋯」頓時傳來不少竊笑以及被微妙的眼神包圍，哈哈！親自到SketchMeetup場合講AdobeXd⋯⋯（踢館？我自己雖然在社群上常常分享（傳教）AdobeXd，也協助Adobe台灣官方進行社群推廣，但其實我在2016年就開始使用Sketch，累積也有兩三年的經驗後，才跳槽到AdobeXd的。

在這兩個目前最多人使用的UI設計軟體的選擇上，我想我可以在經驗上給大家分享一些心得。

今天這篇AdobeXd以及Sketch比較，我想在剛踏入UI領域學習時，不少同學都會有這樣的猶豫，而這也是設計師社團上常見的問題，而很多人也為此要去買新電腦。

但若已經很資深的朋友，反而不會去想要去學哪一套工具，原因我們會在最後做說明。

AdobeXd/Sketch基本介紹AdobeXd（免費方案）Adobe旗下一款全新且主打結合介面設計、建立原型以及跨平台體驗設計的軟體，將Wireframe、Design以及Prototype等UI/UX設計流程整合至同一軟體中，並能直接導出標註元件與開發者進行協作。

Sketch（試用30天）以其閃亮亮黃色鑽石為人所知，由於是很早就以功能簡單與UI設計專門為訴求而成為設計師慣用軟體，並因此在網路上大多數的教學文章都以推薦Sketch為主，業界中較資深的設計工作人員也多使用以此為主軸的設計流程。

AdobeXd/Sketch使用比較接下來，我們擷取各自的設計使用情境中，共8個實際的比較與參考星等。

1.「容易上手程度」AdobeXd-⭐️⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️⭐️如果你是設計系大學生，或已經熟悉Illustrator/Photoshop等繪圖軟體，那不管是AdobeXd還是Sketch都是很容易上手的，因為這類專門用於UI介面設計軟體的功能都做得相當簡單，介面也是。

就算都沒接觸過相關軟體，為數不多的基本功能對於新手來說的門檻也不是非常高。

AdobeXd軟體介面Sketch軟體介面2.「電腦（作業系統）支援」AdobeXd-⭐️⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️Sketch多年以來都只支援MacOS系統的電腦，因此在初步購買電腦時，大多數的設計師會推薦使用MacBookPro筆電，或是iMac桌機等，但相較於PC電腦來說，價格稍微貴了一些。

AdobeXd的問世可以說是解決了這個入門門檻，支援Windows以及MacOS雙作業系統都可以安裝使用，如果團隊協作時也不用擔心對方的電腦能不能開啟專案檔，另外因為不少大學機構以及企業的硬體裝置都是PC（Windows）電腦，所以大大地解決了以往沒有專用UI設計軟體的麻煩。

比較需要注意的是，Windows目前僅支援Win10Ver.1703以上版本。

更多還性需求：點此。

3.「繪圖功能」AdobeXd-⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️⭐️以向量繪圖來說，Sketch軟體內建的工具更豐富，尤其是漸層的部分我個人覺得很好用！也比較多細部設定可以操作；AdobeXd內建的基本繪圖工具較少，單純做介面還夠用，要進行插畫繪製就比較辛苦。

但其實Xd這項產品是故意這麼設計的，主要是用來搭配同為Adobe家的Illustrator以及Photoshop做設計。

現在AdobeCreativeCloud是走訂閱制，可以一次使用全套的Adobe軟體，也就是說用了Xd，要順便開Ai/Ps只需要安裝一下就可以使用。

我們可以在Ai先畫好圖，直接貼上AdobeXd，或是直接用Xd開啟.psd的檔案，圖層以及圖形設定大多數都會保留下來*，可以直接接續設計流程。

（*在Ai以及Ps少數複雜的圖形不支援，詳見官方說明。

）AdobeXd的繪圖工具簡單易懂Sketch的繪圖工具較多，且能自定義面板。

4.「軟體輕量化」AdobeXd-⭐️⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️⭐️這兩款設計軟體有個很棒的共同點，就是都屬於輕量級的工具。

也就是電腦在開啟並執行設計的同時，比較不容易當機或是卡頓，相較於其他像是Ps/Ae這樣需要大量渲染處理的工具來說，AdobeXd以及Sketch在使用時都相當順暢。

這樣是為了在做UI設計時，能展開大量的畫布（Artboards），並進行各自頁面的處理；有時候一個稍微大一點的網站可能就有30個、50個以上的頁面，為了畫面間的連貫性，一定是都會放在同個專案檔的，這時候輕量級的軟體才能負荷。

至於電腦硬體的選擇上，如果是初階的電腦（比如說MacBookAir）在「學習」上兩個軟體都是沒問題的；但如果在工作或是在公司使用，建議一定都要使用到MacBookPro或是以上的規格，我目前工作主力機是MBPR15"（16GRAM、512GBSSD、i7處理器）以符合實際工作上時可能會多開軟體、同時使用效能怪獸Chrome以及開啟團隊協作工具等等。

5.「擴充外掛（Plugin）」AdobeXd-⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️⭐️Sketch略勝；原因是多年來開發者們替其開發了無數的實用Plugin，做專案的時候常常遇到某個功能Sketch沒有，但可以在全球最大男性交友平台GitHub上找到，或是偶爾逛到很方便的工具，可以加速流程效率。

相信每一位UI設計師都有自己一套常用的Plugins。

不過長期來看有個缺點，就是許多民開開發者製作的Plugin可能不會一直保持更新，隨著Sketch的幾次改版後，可能就會有不支援的情況發生。

AdobeXd在去年也終於開放的Plugin的功能，我們可以直接搭配Google試算表、微軟Teams，以及標注工具Zeplin等官方的插件，也可以使用許多第三方的外掛來協助我們進行UI設計。

根據我的觀察，AdobeXd的Plugin數量成長非常快，而且多是Adobe官方導入的，相較於Sketch的高手在民間，AdobeXd的Plugin在版本及穩定性上稍微好一些。

Adobe甚至還發佈了幫Xd製作Plugin的設計師、開發者的加速器計畫，補助獎金甚至進駐總部，從此可以看出Adobe對於UI/UX產業以及發展Xd的重視。

（有興趣可以參考下面連結）AdobeXDPluginAccelerator6.「購買費用」AdobeXd-⭐️⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️⭐️接著，來看看各自的購買費用吧。

Adobe目前是訂閱制，成為CreativeCloud付費會員後，就可以使用Ai/Ps/Ae/Pr/Xd/Lr/⋯⋯等整套設計解決方案，吃到飽！目前以個人版來說每個月是$1,680元，我認為如果工作上同時會需要使用三個以上的工具，這就是CP值相當高的選擇；有些學校機構會使用CS5/CS6等舊版本，但這些功能上都輸了很大一截（AdobeCC是三天一小改，每年固定大改版）且在支援度上相當差。

Adobe開發給各領域用的設計軟體很多樣fromYoutubeSketch以前是買斷，買一次可以永久使用，大概$99美金吧（約台幣三千元）；但後來改成了年費訂閱制，一樣是$99美金，一次購買多裝置會便宜一些。

但如果你還是學生，要記得使用官網上不太明顯的教育優惠，直接五折啊！點此fromSketch官方Medium要說哪個貴、哪個便宜，實在沒什麼比較的必要。

因為Adobe可是能用整套設計軟體跟雲端服務啊～Sketch還是只有在UI設計的使用。

身為一名數位/網路產業的工作者，每個月固定噴出去給工具授權的執業成本就超過萬元（不包含Netlfix跟愛奇藝VIPXD）現在大家都追求更好的工作效率以及產能，我認為花點錢在軟體上很值得的～也是個逼自己專注在事業上的方法啊啊！[購買連結]AdobeCreativeCloud全套訂閱[購買連結]Sketch年費制購買7.「獨一無二的殺手級功能」AdobeXd-⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️其實對已經掌握UI設計軟體的資深設計師來說，包含AdobeXd與Sketch在內的軟體都是長得差不多的，唯一會影響今天要打開什麼軟體的決策，除了專案或電腦硬體限制外，就是各個軟體的「特色功能」。

AdobeXd的RepeatGrid做元件的快速佈局先科普一下：除了基本的Assets元件庫做常用物件的儲存之外，AdobeXd內的Component則可以將UI中會重複出現的元件做歸整，之後要修改時可以一次處理好。

其實這個Component功能在Sketch裏也是有的，就叫「Symbol」。

但AdobeXd有個很特別的玩法，叫「RepeatGrid」可以複製整排元件並進行快速排版。

這個功能肯定是基於UI上常見的設計師操作去設計的！不論是做網頁的貼文樣式、電商的產品版面，或是展示user的資料欄位，在以往都是需要一個複製一個，然後去做對齊；透過AdobeXd的RepeatGrid可以快速地進行水平的重複，並且在做不同尺寸的排版時，同個物件也可以直接做垂直延伸。

這邊有個小提示，就是如果你設計的元件內含切圖標記，在設計稿最後導出的時候，不會因為RepeatGrid而重複出現，而是會相當聰明地只擷取原始元件的切圖設定。

Sketch巢狀元件NestedSymbol（Overrides）上面提到的「Symbol」功能在Sketch中行之有年，我猜這也是剛開始大多數UI設計師喜歡用Sktch的主要原因：元件化設計。

簡單來說，你看平常用的那些網站啊、APP，其實有很多局部是重複的，像是最上面的Header、最下面的Footer，或是頁面中的標題、按鈕以及卡片式設計等等，這些重複性的元件如果都各自獨立，那如果有天要調整一點點間距或換顏色，那不就要全部手動調整嘛？透過元件化的Symbol可以將做好的母元件儲存成模組，並直接複製沿用，這大大地加速了我們的設計流程。

而且Sketch有更強的「巢狀Symbol」可以把UI整理成一鍵切換的區塊，如下圖這樣神清氣爽的版面，也讓整體的設計更一致地系統化。

CreateAdaptiveButtonsUsingCombinedShapesInSketch給個小提示，這個Overrides操作也是判斷許多設計師Sketch能力高低的依據，排整齊的Symbol通常能讓團隊可以高效率地協作，不少公司的產品也會有用此方法嚴謹製作的設計Guideline。

（更新）感謝吳姓網友於社團分享近期Sketch更新「SmartDistributeUpgrades」功能。

8.「第三方工具相容性」AdobeXd-⭐️⭐️⭐️⭐️⭐️Sketch -⭐️⭐️⭐️⭐️⭐️我覺得AdobeXd最強的就是跟同家的Ai/Ps/Ae水平的整合，除此之外A社身為地球上最大的數位產品公司有跟很多知名企業的產品做連動，可以透過Plugin或是軟體內進行協作，頻繁地更新也讓Xd與第三方工具間的相容性更好。

AdobeXd的部分合作第三方工具。

Sketch的部分合作第三方工具。

相較之下Sketch顯得更新創感一點，因此有很多數位產品開發上很貼心的設計，也跟時下最新的生產力工具整併在一起，比如說可以用版控Abstract或是Plant等，在GitHub上面也有許多獨立開發者所製作的外掛可以使用。

由於各自支援的第三方工具青菜蘿蔔都有，難分高下；如果團隊在設計開發流程中有剛好能配合上的工具，在設計流程上就很加分。

最後的總結「欸你覺得Sketch還是AdobeXD哪個比較好用？」回到本篇文章標題，通常被問這題的時候，我會反問三題：1、現在手邊有什麼電腦？或是公司配什麼機型？根據我們家AdobeXdTaiwanUserGroup台灣交流社群的社群調查，多數人使用AdobeXd也是因為自己或公司只有PC電腦可用。

幾年前學UI啊因為只有Sketch沒得選，大家都會去買MacBook⋯⋯，我大三的時候也是自己扛了12個月的分期付款買下人生第第一台蘋果電腦，每個月固定要噴六千多啊才吃下來啊！2、公司職缺或目前團隊採用的流程是用什麼？必須要老實地說，UI設計畢竟只是整個產品設計過程中的一環，這意味著所有設計師都需要跟著團隊一起運作；而AdobeXd與Sketch因為不可交互使用的關係（設計稿檔案不能共用），都自己衍伸出了各自的設計與開發流程，所以一家公司或一個設計部門，通常會有指定使用，而通常也會出現在招募的職缺頁面上。

但如果你是即將決定團隊使用哪一套軟體作為這次專案的軟體的話，我覺得要評估該專案在中後期可能會用到的第三方工具，去作出相應的選擇。

比如說需要InvisionStudio來做原型，或是用Flinto做動畫，那麼在專案一開始就要都使用Sketch來製作。

又或者公司已經有採購AdobeCC，或是要讓工程部門的PC配機也能開啟設計檔，那使用AdobeXd會更好一些，就算沒有剛提到的MacOnly軟體，也可以使用內建的Prototype工具、用MarvelAPP拉flow，或是搭配AfterEffects做動畫，都有相對應的配套措施。

3、剛開始學習階段，還不用到正式工作使用。

如果你還是設計系大學生，或目前還在安排要選哪個來當做第一款工具做學習，基於未來的發展性、市佔成長等考量⋯⋯我會推薦新手先學AdobeXd。

原因是，大多數的大專院校電腦教室，都還只是配有Windows電腦（少數有錢的學校有全Mac教室）這意味著幾年後從大學出來的新鮮人多是習慣使用AdobeXd，而這也會影響整體業界大家優先選擇的設計流程。

除了學校之外，政府機構以及企業單位也是，我原本以為設計師都是用MacBook（我也是啊！）但這一兩年跑了很多企業內訓跟學校講課，才知道有為數不少的工作環境是整間公司都是用Windows電腦，而這也影響了教授推廣或政府教育部的教學計畫，都只選用AdobeXd。

的確現在還是很多公司採用Sketch為主軸的設計流程，但經過上述的整體社會環境牽動，在不出一兩年的未來，使用AdobeXd的人數會持續上升，而因應的工具與相容性也會陸續出來。

現在我們社團每週加進來的新手都超過一百位，也能多少看出一點趨勢。

啊，別誤會了，我是說「先學」。

等熟悉AdobeXd之後，不管要換用Sketch，或是FramerX等等，都因為其「長得都差不多」而學起來都很快。

而這篇文章的使用比較也可以輔助你決定要先使用哪套工具，但我還是建議都用用看，挑順手的開始。

選擇使用哪個設計軟體跟工程師選擇要學哪一套程式語言不同。

Developer的每一套Coding技能都有不同的邏輯、寫法，要花時間修煉點技能，而且有有相對應的開發環境，每個社群派系都有各自的主張，而Desginer的軟體像是AdobeXd與Sketch僅僅是工具而已，設計理論與方法基本上都一個樣，我們不用太去糾結到底要用哪一套。

在稍微有一點資歷的設計師眼中，其實不太會去選要學哪個，身為大人我們都是全都得要會的⋯⋯，之後職業生涯中，肯定會遇到不同設計流程的專案、或是習慣不同流派的同事，又或者也還會有更新更好的軟體出現。

UI設計師隸屬於IT資訊網路產業，唯一不變的是每天都要保持學習，以及擁抱每一天的不一樣。

哎，就不多說了，學新軟體去⋯⋯推薦學習資源如果只是想學習軟體，建議先下載AdobeXd自己摸熟，不太需要去上課。

然後，遇到問題再Google查資料，養成上網爬梳的習慣，畢竟之後若想待在網路、資訊產業，自己找資料（大多是國外的英文）跟解決問題能力還滿基本的～只是UI設計還涵蓋了許多設計流程、設計方法以及較深的理論基礎，這部分我曾經整理撰寫過「介面設計師轉職之路（UIDesignerRoadMap）」也許能指引一些方向。

如果想更有方向地準備，或想省下多點時間，我有跟YOTTA合作的線上課程，目前已經超過千人參與囉！（應該有不少讀者有買，謝謝你們的五星評分）Sketch的話，剛好去年有跟我相當尊敬的設計師美勞哥（吳姓網友）合作辦了這場線上的超完整軟體教學，除此之外若是對俄羅斯方塊遊戲有興趣也可以發摟他的Twitch頻道。

若是有遇到相關的UI/UX設計問題，歡迎分享到我們的AdobeXdTaiwanUserGroup台灣交流社群噢！這次關於Sketch與AdobeXd的討論正熱烈進行呢！我是設計師林育正Riven謝謝您耐心的閱讀，期待這篇文章能幫助到你！YOTTA你最專業的學習夥伴，提供優質內容與有趣觀點，擴大豐富你的視野。

訂閱林育正老師的專欄，閱讀更多文章。

延伸學習：「AdobeXd設計實務｜成為UI設計師的8項核心技能」所有圖片來源：林育正文章標籤上一篇下一篇相關課程：堂｜相關文章：篇管理訂閱已訂閱訂閱文章標籤分享：上一篇下一篇