欸你覺得Sketch 還是Adobe XD 哪個比較好用?

Sketch 多年來都是UI(使用者介面設計)設計師主要使用的設計軟體，再配合Adobe Ai 以及Ps 進行製圖，但Adobe 推出了自家專用於UI/UX 設計的軟體「Adobe ... HomeNotificationsListsStoriesWritePublishedinRAR設計攻略·欸你覺得Sketch還是AdobeXD哪個比較好用?成為UI設計師之前，得先學會哪個設計軟體？Sketch多年來都是UI(使用者介面設計)設計師主要使用的設計軟體，再配合AdobeAi以及Ps進行製圖，但Adobe推出了自家專用於UI/UX設計的軟體「AdobeXd(ExperienceDesign)」之後，設計師們從此有了新的選擇⋯懶得讀文字的同學可以看影片～😊嗨囉，我是設計師Riven。

在寫這篇的時候Medium剛破3KFollowers，也得到了TopWriterof#Design的殊榮，很感謝各位讀者支持我這邊的各種廢文🥺如果是新來的朋友可以按個Follow噢～記得年初受邀去台北擔任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的重視。

（有興趣可以參考下面連結）AdobeXDPluginAcceleratorWhyisAdobehostingtheprogram?ThePluginAcceleratorispartofourongoingeffortstocultivateandenrichthe…www.adobe.com6.「購買費用」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跟愛奇藝VIP😅）現在大家都追求更好的工作效率以及產能，我認為花點錢在軟體上很值得的～也是個逼自己專注在事業上的方法啊啊🥺[購買連結]AdobeCreativeCloud全套訂閱AdobeCreativeCloud享用我們全套的創意桌面和行動工具，例如Photoshop、Illustrator、InDesign、AdobePremierePro，以及更多AdobeCreativeCloud產品。

go.rar.design[購買連結]Sketch年費制購買ThedigitaldesigntoolkitThedigitaldesigntoolkitjustgotbigger.LinkArtboards,addsimpleanimationsandturnstaticscreensinto…www.sketch.com7.「獨一無二的殺手級功能」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個月的分期付款買下人生第第一台蘋果電腦，每個月固定要噴六千多啊才吃下來啊⋯😭但是現在不一樣了，AdobeXd的出現解決了Windows電腦沒軟體可用的囧境，如果你工作用的電腦是PC，那麼其實也沒得選⋯就Xd而已。

如果你是拿MacBook電腦，兩個都可以選的情況下，可以參考這篇文章前面分析的差異點，來做決定。

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合作這堂線上課程，目前已經超過千人參與囉！（應該有不少讀者有買，謝謝你們的五星評分🤩AdobeXd設計實務｜成為UI設計師的8項核心技能|YOTTA跨領域線上課程平台是設計使用者整體操作的感受，從整體流程規劃到資訊架構編制，就像是規劃一場完美的求婚：「她(使用者)說好，就好。

」UI(UserInterface)…www.yottau.com.twSketch的話，剛好去年有跟我相當尊敬的設計師美勞哥（吳姓網友）合作辦了這場線上的超完整軟體教學，除此之外若是對俄羅斯方塊遊戲有興趣也可以發摟他的Twitch頻道🤣若是有遇到相關的UI/UX設計問題，歡迎分享到我們的AdobeXdTaiwanUserGroup台灣交流社噢！這次關於Sketch與AdobeXd的討論正熱烈進行呢！AdobeXdTaiwanUserGroup台灣交流社群AdobeXdTaiwanUserGroup台灣交流社群has4,911members.在這裡邀請你一起建立AdobeXd使用者社群，這是個相對較新的...www.facebook.com我是設計師林育正Riven謝謝您耐心的閱讀，期待這篇文章能幫助到你！更多設計內容可以發摟這邊Medium，或是我的Youtube影片頻道還有Instagram日常～我們下次見囉😉有什麼感想可以留言在這篇下面，或是透過Facebook與我聯繫。

小訣竅：如果Medium閱讀額度不夠用，可以訂閱RAR設計攻略會收到最新文章、教學影片與近期活動通知！😀（點擊連結後輸入「訂閱攻略」即可。

）https://medium.com/as-a-product-designer/MorefromRAR設計攻略關於設計的技巧×知識×方法×教學×攻略ReadmorefromRAR設計攻略Getstarted林育正Riven7.5KFollowers是數位遊牧型態的設計師💻喜歡邊旅行邊工作的生活，逐網路、插座與咖啡而居。

期待能夠將艱難的設計與開發技術，用麻瓜都能夠聽得懂的話，說給每一個人聽。

更多關於我：riven.designFollowRelatedMaketextscrollableinFigmaIfyoucamefromGoogle,youareprobablyanoobjustlikemyselfwhenIwastryingtogettextscrollableinacertainarea.Figmavs.Sketch:WhyouragencymadetheswitchTheUltimateGuidetoRemoteUsabilityTestingLet’sTalkaboutUserInterface(UI)&UserExperience(UX)DesignHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable