10 個你必須從Sketch 改用Figma 做UI 的真實原因

到底Figma 是什麼樣的設計工具，能讓我從Sketch 移情別戀？ 為什麼要寫這篇Figma 推薦文. 今天的主題要跟大家聊聊Figma 這個火紅的UI 設計工具，如果 ... 10個你必須從Sketch改用Figma做UI的真實原因 跨領域學習技能carousel Sep22,2020 全文 本文轉載自LinSimon的medium，原文章標題《我從Sketch老粉變成Figma鐵粉的10個理由》 到底Figma是什麼樣的設計工具，能讓我從Sketch移情別戀？ 為什麼要寫這篇Figma推薦文 今天的主題要跟大家聊聊Figma這個火紅的UI設計工具，如果你還不知道什麼是Figma的話，可以參考Jasmine寫過的這篇文章《Figma—異軍突起的設計協作神器》，裡面有滿不錯的介紹。

會想跟大家分享的主要原因是Figma在國外的討論度一直都很高，在台灣好像相對來說少一點，不確定是不是因為大家的使用習慣或是公司工作模式的不同，而間接影響了設計工具的選擇。

所以才會想以自己使用的觀點來分享Figma是如何改變我的設計流程與習慣，甚至不知不覺讓我變成它的鐵粉。

Simon精心規劃的《產品設計實戰：用Figma打造絕佳UI/UX》課程已經在Hahow正式開始募資囉！學習使用Figma這個火紅全球的介面設計工具，跟上全球設計趨勢，成為軟硬實力兼具的產品設計師吧！ 初遇Figma不來電，再次相見驚為天 我記得在兩年前就有嘗試過Figma，但老實說當時沒有很強烈的印象，加上人類是習慣性很強的動物（尤其是設計師），基本上設計工具只要一用習慣就很難再換，就像要你用右手寫字突然換成左手差不多，當時感覺使用起來就是不順手。

不過直到半年前再次體驗Figma就能感受到它在各方面的進步，而它打到的設計流程的痛點對我來說更是拳拳到肉，所以不跳槽也是有點說不過去了。

這邊也有一篇Figma官方的文章解釋為什麼可以從Sketch轉過去：《FigmavsSketch-WhatsetsFigmaapart？》 我自己從Sketch轉換到Figma大概有半年以上的時間，主要原因是目前的公司的整個設計團隊在當時有更換工具的計畫，加上Figma在歐美已經非常火熱，從國外平台2019年的UI設計工具調查報告也可以看到：Figma已經衝到業界使用工具第二名，而在Windows平台上更是超越Adobe，看得我自己也滿好奇的，到底Figma為什麼可以這麼厲害？ 而自己在使用過一段時間之後，真的是覺得Figma在很多方面都影響了我的工作模式，甚至已經到有點無法想像以前用Sketch做設計的時光了（文章之後會提到原因），也會和大家分享，為什麼我喜歡Figma以及分享一些真實的使用場景。

10個你必須從Sketch改用Figma的理由 接下來就正式跟大家分享我喜歡上Figma的10個理由，希望這些理由也能成為你開始嘗試這個潛力新星的原因（以下圖片大多取自Figma官網）。

一、實現真正的即時同步與協作(Real-timesynchronization&collaboration) 一直以來，即使在不同團隊中，我的設計流程大多分為：前期規劃、思考設計、執行設計、分享設計等階段，當不同階段遇到需要討論溝通的時候，總是需要把設計稿匯出或上傳到某個地方請別人看，或是面對面討論，等到彼此有結論之後再更新設計稿，接著重新上傳新版設計，依此流程不斷重複直到完稿。

多數時候，可能因為已經習慣這樣的流程，所以不覺得是問題，但就是有點瑣碎。

後來發現，這樣的工作流程間接了壓縮一些可以被討論、讓設計進步的空間，因為一來這樣一來一往的溝通模式成本太高，二來頻繁的切換工具對於設計流程也是一種干擾。

漸漸變成如果是太小的設計改動、或是覺得不想花太多力氣去溝通的設計，設計師就會省去討論的步驟，當然很多設計上細節也不會被看見，最終會少了許多透過吸收反饋而迭代設計的機會。

而Figma最大的賣點之一—「即時協作」，正好就能讓這整個協作流程變得更透明與容易。

以往最新的設計檔案就是儲存在個人本地主機，同時就只能一人開啟，最新版設計當然就掌握在一人手上。

而在Figma裡面，每個團隊成員都能共享同一個設計檔案（當然，你可以設定編輯權限），所以只要任何人對設計有想法都能即時在設計稿上留言討論，設計師在卡住時也能和團隊成員快速尋求反饋，設計、文字上的改動也馬上就在Figma上呈現，想測試多少ideas都不是問題，減少了大量的溝通成本與思緒轉換。

即時同步協作還有其他的應用場景，像我自己常常用Figma來做使用者測試或快速設計Demo，在訪談中收到前一個使用者的回饋之後，就可以立馬修改文字或設計並反映在我的Prototype上，有時候整場設計研究下來，設計不知不覺又迭代了兩三次，還賺到了很多額外的insights！ 二、再也不用擔心是否沒存到擋或找檔案在哪裡，檔案就住在你每天會打開的瀏覽器裡 我印象還很深刻，在大學念設計的時候，用Photoshop和illustrator做作業常常都因為檔案過大或不明原因整個當機，更慘的是熬夜做好幾個小時的作業，只因為忘記存檔直接胎死腹中。

再經歷過幾次重大的教訓之後，我就非常把Command+S（儲存檔案）這件事情放在心上，每做幾個動作就要Command+S一下確保我的心血結晶不會因為沒存到檔而毀於一旦。

Figma總是很貼心的會自動存擋 加上以前因為很不懂得做檔案管理跟命名，所以找檔案這件事情也讓我非常痛苦，常常需要穿梭在各種資料夾之間尋找找不同版本的設計檔案，想起來真的是非常浪費時間（和生命）。

但這件事情到了Figma就相對來講沒什麼問題！因為Figma的檔案結構從團隊、專案到設計檔案都劃分的相對清楚，而且全部東西都在雲端隨時更新，所以只要打開瀏覽器、連上Figma就一定找得到你的檔案，也不會有什麼檔案新舊版問題。

另外Figma也提供了簡單的版本控制，由於Figma會自動存擋的關係，所以當你或團隊成員不小心誤刪檔案裡的東西的時候，可以快速找到之前的版本把東西救回來，簡直是設計師的救命仙丹！ 三、從設計到規格交付一條龍搞定，前所未有的All-IN-ONE流暢體驗 以往使用Sketch的經驗是，除了設計本身，還要使用許多第三方的軟體來進行溝通、原型（Invision）、版本控制（Abstract）、工程交付（Zeplin）等需求，雖然這也像是一種強大的生態系，每個工具各司其職，但Figma更巧妙的把這些流程都整合在一個工具裡了，以上提到的各個需求都在Figma裡面能夠被滿足，也就是說設計師可以更專注在設計本身，而不需要因為流程或設計上的改動，需要去切換工具、上傳更新設計稿，導致自己的注意力被分散而效率變低。

另外一個方面來看，團隊成員之間的合作也能更緊密，因為所有流程都被集中到同個地方（Singlesourceoftruth）管理，減少了許多潛在的溝通成本與誤會。

舉個例子：我在執行一個專案時，發想階段可能就會用Figma的留言功能和其他設計師討論想法，設計完成後也會請內容策略師檢查所有的文案用字是否精準，或是跟研究員說明可能某些地方需要做易用性測試，在工程師接手開發時如果對設計、流程、內容有疑惑時，其他夥伴也能幫助說明或釐清一些設計師沒想到的部分，而這些討論都在Figma之中保有完整的紀錄。

四、對團隊角色有更高的包容性，設計流程變得更加透明與直接 前面有提到Figma將檔案存在雲端的特性，只要有瀏覽器就能隨開隨用，意思就是不需要安裝任何軟體，對於跨平台也更友善，相信以往用Sketch都常常會有團隊成員沒有安裝設計軟體無法查看設計規格的狀況，加上Sketch是Maconly，很多合作的工程師都是使用Windows或是Linux系統，這就大大了彌平了合作上的代溝，讓溝通更順暢。

我想這也是為什麼許多國際一流大企業已經開始採用Figma作為主力設計工具的原因，大公司中團隊的角色多元，且設計師的利害關係人相對較多，讓設計變得已經不再只是設計師一個人單打獨鬥、閉門造車的過程。

以我所在的公司為例，光UX團隊就有五種角色，因此更要去擁抱更多的聲音（當然，對設計師來說這需要一段時間去習慣），用更透明、更包容的協作模式讓設計進化到更好的狀態。

對我來說，這樣的流程改變的確是件好事，轉換到Figma之後很多設計上的想法能在更早期得到驗證，不用等到設計已經100%完美才去尋求反饋，在設計前期聽取意見可以更容易找到一些可行的方向。

五、免費方案就能充分體驗核心功能，也省去了很多周邊第三方軟體的費用 Figma其中一個對於新手最友善的部分就是：它是免費的！ 除了專業方案或企業方案才提供的某些功能（例如超過2人以上的協作、無限專案數、共享元件庫）之外，免費方案幾乎就能體驗到所有核心功能，對於想要轉換工具但還拿不定主意的人來說其實很不錯，而且說真的，如果要一直就這樣免費用下去也不是不可能。

免費方案就可以有3個專案跟2個協作者 而介面設計工具的操作方式其他都不會到差太多，所以免費也成為了一個非常吸引人來試水溫的作法。

前面提到Sketch擁有強大的周邊生態系與第三方串接工具來滿足設計流程的流暢度，但這也意味如果這需要多支付許多額外費用來購買這些好用的工具，不知不覺整個軟體或學習的的成本也提高了不少，所以從初期花費的考量來說Figma還算是滿佛心的。

六、強大的社群力貢獻豐富的插件（Plugins）和設計資源 一直以來Sketch就以有許多好用的插件著稱，而近來也越來越多Figma的插件開發者開始製作許多好用的工具，讓使用Figma的設計師也能享受到這些來自社群的資源，可以利用這些強大的插件讓設計流程可以更流暢、用更有效率的方式產出高品質的設計。

Figma中也有許多方便好用的插件可以下載 另外，Figma這陣子也開始測試了社群（Community）的功能，讓設計師可以開源自己的設計檔案或元件庫讓其他人使用，我相信這將會大大地加速設計師們彼此間的交流，以及刺激這個工具的進步，甚至是可以讓這些資源貢獻者在社群裡更多的聲望。

七、更彈性的共用樣式與元件架構，打造更完整設計系統 我自己長期都是設計系統的擁護者，我相信一致性的設計可以讓使用體驗更直覺、讓品牌形象更穩固、並減少開發與溝通成本。

因此在設計工具中我會大量的使用共享樣式和定義共用元件，確保即使不同設計師在同一個產品下共事，也能有相對一致的設計產出。

我覺得Figma在一些樣式細節的設定上做得非常不錯，在不破壞核心元件（Mastercomponent）的前提下，給予子元件（Instance）足夠的彈性來客製化與延伸成為更複雜的設計模式。

這也大大減少了在設計共用元件時的結構複雜度，讓設計師只要專注在元件的核心架構上，其他改變都能在不同場景中分別套用與延伸不同的共用樣式。

另外，Figma最近推出的Auto-Layout功能也是介面排版更系統化的亮點之一，它讓設計稿能更符合真實開發環境下的邏輯，讓元件與頁面都能根據內容元件的組成、文字長短適應做變化，做出真正意義上的響應式設計。

八、共享連結讓你的設計無所不在 我相信「設計」不該永遠只在設計工具、檔案裡，提高設計的能力度可以幫助團隊更融入設計流程、了解設計師背後的設計邏輯，並能夠在不同設計階段給予適合的反饋。

可以透過信箱邀請或分享連結的方式，讓其他人進入設計檔案 Figma的共享連結功能讓所有人都能透過一個連結輕鬆到達指定的設計頁面，設計師也常常需要做許多溝通文件、簡報、即時的設計討論等，一個能夠公開分享的連結可以讓文件與設計稿之間的轉換變得更無縫，到了指定頁面也可以直接在設計稿的特定區塊直接留言，對於後續的追蹤也很方便，再也不要需要截圖上傳到各種平台了，一個連結輕鬆搞定！ 九、簡單卻強大的原型功能（Prototyping）幫助你快速分享、溝通設計 在產品開發的設計流程中，設計師的工作有很大一部分是去定義與溝通「介面的流程與互動」，透過Figma內建的原型功能可以很快速的製作出介面的流程圖，裡面已經定義好了基本的動態轉場效果，甚至如果花點心思可以做到滿多細節的效果（滾動置頂導航、彈跳框、hover效果等），最棒的又是基於Figma雲端共享的特性，製作好的原型可以立馬分享給團隊，也可以拿來做使用者測試，快速得到反饋，而且設計上的調整會馬上反應到原型上，也不需要手動更新，真的非常高效！ 當然，目前Figma的原型功能還有不少進步空間，但對於日常基本的使用和溝通來說已經非常夠用，相信之後也會有更多實用的功能陸續釋出。

十、用Figma創造「設計介面」以外的可能性 大部分的Figma使用者當然就是會拿它來設計介面，或是簡單的線框稿、流程圖等等，這些基本的設計需求Figma都可以滿足。

但由於它檔案都儲存在雲端、可以隨時使用連結分享的特性，我也常常用Figma來製作設計投影片簡報，接著使用Prototype的分享功能就可以馬上變成一個設計的快速Demo，完全不需要把設計稿匯出成圖片，還要放到GoogleSlide或Keynote之類的簡報軟體，省去許多時間。

figma.com/@yuhki 除了簡報以外，多人協作的功能也讓線上同步發想設計成為一種可能性，有時候我會和設計師同事甚至PM一起花一兩個小時的時間，一起在Figma上針對比較複雜的專案或任務做一些想法上的發法，互相討論線框搞與互動模式，也能馬上留紀錄，讓之後要接手的設計師可以有完整的素材。

同樣的做法應用在線上設計衝刺（DesignSprint）、頭腦風暴（Brainstorming）、多人遠端工作坊（RemoteWorkshop）也都非常適合，也間接地讓團隊之間的默契更好、對設計流程更有參與感。

工具只是輔助，專注在自己要解決的問題才是重點 這篇文章其實並不是要來戰哪個工具比較好，主要是目前我找到一個適合自己目前工作流程、能幫助自己提升效率的工具。

當然，並不是說換工具就要整個打掉重練，在過去幾年使用Sketch所累積的經驗也讓我學習到許多設計執行上的觀念與技巧，這些思維同樣能應用到新工具上，也讓我轉換到Figma時沒有花太大的力氣去適應。

我也相信有一天設計工具們可能會走向「越來越像」的趨勢，然而現在彼此各有特色與各有支持者也是我覺得能促進這個產業越來越有競爭力的一種正向循環。

不過，Figma也不是沒有缺點，像是檔案存在雲端如果沒網路就無法離線編輯、從Sketch搬家有點麻煩、目前在台灣可能公司還不是主流等等、軟體本身也還有很多進步空間，但說真的Figma對我來說帶來的正面影響遠大於負面，它改變了我很多的工作習慣與流程，檔案再也不用傳來傳去，溝通也更加順暢。

總之，我自己會滿看好Figma之後的發展，還沒使用過的朋友們也推薦大家可以去試用看看！我也期待可以聽到大家的使用心得，或是有任何對設計工具上的想法可以留言讓我知道。

Simon精心規劃的《產品設計實戰：用Figma打造絕佳UI/UX》課程已經在Hahow正式開始募資囉！學習使用Figma這個火紅全球的介面設計工具，跟上全球設計趨勢，成為軟硬實力兼具的產品設計師吧！ -- 延伸閱讀： MGBoom設計－教你如何提升作品3D質感與視覺美感 資訊架構入門，UX設計師的思維培養 分享這篇文章 FACEBOOK TWITTER GOOGLE 相關文章 PREVIOUS 人物專訪老師專訪 Sep21,2020 好故事有如《天能》：跟許榮哲老師一起用故事修改記憶，抵達未來 NEXT 人物專訪老師專訪carousel Sep23,2020 專訪占星之門安格斯：「用」比「準」更重要　用占星尋找自身優勢 留言 追蹤Hahow Hahow好學校最新、最酷的線上課程平台 LINE官方帳號接收Hahow第一手優惠、活動資訊 Facebook新課募資、課程開課消息都在這 Instagram看更多Hahow幕後祕辛 Youtube最新的課程介紹影片！ 近期文章 改善經期不順、痛經等生理不適的暖宮開髖練習-凱蒂與穎盈的中醫瑜珈 如何開始戳繡？工具、布料、毛線選擇小分享｜【写生繡物】PunchNeedleEmbroidery 三個爬山必備APP推薦：備好離線地圖、預測天氣、自動生成行程影片 【2021多元領導大調查】超過九成女性期待具備領導力，卻遭「冒牌者情節」阻礙？ 用心智圖整理：主持聲音社交平台Clubhouse房間的兩大關鍵 Hahow熱門推薦課程 關於Hahow好學校 Hahow好學校，以知識技能分享為概念創立的線上課程平台。

讓擁有一技之長的人透過教學分享賺取收入，並打開有趣的學習新想像，讓跨領域自學變得更輕鬆愉快，學那些學校不會教的事！ TagCloud carouselHahowCocktailHahow內容煉金Hahow故事Hahow新功能Hahow社群故事HOW-TO-DO專欄人物專訪創業好書推薦思想翻轉技能教育現場旅行海外特派員生活專題線上學習老師專訪職涯自學親子教育跨領域學習開課教學 版權聲明 本網站內容未經許可請勿任意轉載，欲引用或轉載網站內容，請洽Hahow好學校：[email protected]