Figma — 異軍突起的設計協作神器 - Medium

究竟是什麼魔力讓Figma 從設計工具大亂鬥中脫穎而出？ 近幾年來隨著設計思考與UX 設計的興起，設計工具也從Adobe 獨霸變成 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinAAPD — AsAProductDesignerFigma—異軍突起的設計協作神器究竟是什麼魔力讓Figma從設計工具大亂鬥中脫穎而出？近幾年來隨著設計思考與UX設計的興起，設計工具也從Adobe獨霸變成百家爭鳴，試圖解決設計流程中從腦力激盪（brainstorm）到交付工程師（handoff）的種種問題。

以往每個工具都各司其職，例如Sketch最適合畫線框圖和UI設計、InVision最適合展示簡易原型（clickthroughs）、Zeplin最適合將設計規格轉達給設計師，每個工具都有它做最好的部分。

如今各工具為了擴展版圖，逐漸跨足其他領域，例如InVision推出InVisionStudio以期網羅UI設計的受眾，大家都想搶好搶滿整個設計流程這塊大餅。

TheGreatDesignBattleof2018—PickYourSideTrendsandPredictions+WhySketchPrototypingisagamechanger.medium.com雖然現在戰況還不明瞭，但在這其中異軍突起的設計工具非屬Figma不可了。

根據UXTools針對全球數千名設計師年度問卷調查，Figma在2017年的愛用程度位居第六或七名，相對很少人關注。

在2018年卻急起直追，暴衝到Wireframe和UIDesign項目的第二名，並榮登2019年最令人期待的設計工具，其影響力不可小覷，潛力無窮不只是勇於導入新工具的新創公司紛紛投入Figma的懷抱，些許企業也難得地大動作從Sketch遷徙到Figma，像是Dropbox。

DesignToolingatScale|DropboxDesignI'vealwaysbeenslowtoadoptnewdesigntools.IfI'mcomfortablewithacertainworkflowortoolset,it'sdifficult…dropbox.design為什麼Figma能在短短幾年內引起高度關注，如此迅速地累積死忠愛用者呢？這都要歸功於它獨樹一格的產品定位與協作功能。

協作Collaboration在導入Figma之前，我們工作室的協作方式是每個人各自有一份Sketch或Illustrator檔案同時進行設計，最後開會彙整大家的設計點子，再重新整合一份母檔案（masterfile）。

這個流程最大的痛點就是常常會有重複的設計，以及無數增生的檔案，就算彙整出母檔也會有版本更新問題（「母檔裡的登入頁面是今天Serene子檔案中的最新版本嗎？」）Figma的最大亮點就是協作功能，它能同時讓許多人在單一檔案內工作，當看得到其他人在進行的設計時，只要發現跟自己的思路雷同，就可以避免重複設計的問題，檔案也永遠只需要一份，間接解決了子母檔的問題。

觀察Observation既然是協作工具，自然可以看到其他人的工作「直播」，不只如此，Figma還進一步設計了「觀察」的功能—點擊協作夥伴的頭像就能直接跳到該夥伴的視角。

一開始覺得超怪，自己工作時的一舉一動，畫了什麼糟糕的草稿，同事都看得到，感覺會尷尬到腦袋當機，無法繼續進行設計。

可是習慣之後發現這個功能其實超級好用！尤其是需要跟其他人溝通時，不用走到人家坐位旁邊笨拙地操作他的電腦，或是把螢幕轉到他看得到的方向，只要他「觀察」你，就可以看到你意指的畫面是什麼，還能直接畫圖給他看。

偷窺同事視角我們公司運用「觀察」的時機還有在簡報時，在倫敦的Kort可以保持分享螢幕，只要他「觀察」在西雅圖的我們，不用切換講者分享螢幕或是打開新檔案（通常要花幾分鐘的時間），就可以繼續跟客戶分享我們的設計，過程相對順暢許多。

我跟同事還常常在Figma裡頭（狂亂地）打招呼XD註釋Comment相信設計師們都有過這樣的一個瞬間，就是在畫一個頁面圖的時候想到許多跟這個頁面相關的點子和思考，你會怎麼記下來呢？我之前都會在Sketch裏頭打一串文字在該頁面旁邊，但是當想法一多，或是需要移動頁面時就會變得很難處理那些文字。

再來是其他設計師滿常miss掉那些資訊，每次打一串新的思考都要改用新的顏色來吸引注意力，舊的對話也勢必要刪除，隨著時間一長，就沒有辦法再重新參考過去的對話與想法。

而Figma的註釋功能完美地解決了這個問題。

由於我們是跨國團隊，能夠這樣同時在相同的檔案中協作，並且為地球彼端的同事留下回饋，比起用上述在Sketch裏頭留言的方法而言好得太多了。

Figma的註釋功能可以針對特定頁面留下回饋，或是在設計時紀錄思考過程，讓一邊設計一邊思考的過程非常流暢，。

如此一來所有環繞著頁面的對話都在一處，既不需要停止設計頁面本身，也不會遺忘設計當下的思路是什麼。

原型製作PrototypingFigma還支援基本的原型製作功能，跟InVision的主要功能雷同，能顯示基本的頁面轉動跟進場畫面，預覽時也可以加上載具外殼。

跟InVision一模一樣只要將側欄從Design切換成Prototype模式就可以開始將元件與頁面連線，由於我大部分時間都是在畫taskflow，所以覺得這個視角特別有用。

在InVision中無法看到全面的流程圖或系統架構，只能透過點擊一張一張頁面來體驗流程。

Figma的prototypeview可以直接顯示出完整的流程圖，又能夠透過預覽進行體驗測試，一舉兩得。

流程圖概覽可以當taskflow用我們公司觀望了Figma許久，遲遲不遷徙的主要原因是太習慣Sketch+InVision+Flinto這個workflow，當時Figma雖然可以取代InVision的功能，卻無法取代Flinto展示微互動的能力。

但最近Flinto也順著潮流推出從Figma直接輸入頁面的功能，workflow因而完整，於是我們再也沒有理由不嘗試Figma了。

檔案位置與系統環境Files/EnvironmentFigma和Sketch最大的不同點就在於Figma是browser-base的，完全不受限於系統類型，無論是Mac還是Windows都可以使用，只要有瀏覽器可以開啟視窗，都可以使用Figma。

另一個方便的附加價值是，分享設計檔案時只需要傳送連結即可，不需要另存新檔、寄送等行政上的流程，也不需要客戶端安裝任何軟體，就可以直接瀏覽檔案。

再加上前述的原型製作和註釋功能，只要分享連結就可以給客戶或主管試用prototype並讓他們直接在上面提供回饋，設計師完全不需要離開Figma的環境就可以閱讀留言，進一步更新設計。

缺點就是連線才能使用，無法像Sketch一樣有個local的存檔，只要斷網基本上就不能好好工作了。

插件PluginSketch讓許多資深設計師熱衷不已的就是五花八門的插件，熟悉這些plugin之後，每個設計師都能發展出屬於自己的一套高速工作流程。

Figma直到最近才開始支援plugin，雖然還沒完全跟上Sketch的腳步（畢竟人家硬生生早紅了幾年，社群已經有足夠的成熟度），但已經有不少sketchplugin的替代品出現，例如最基本的contentreel和materialdesignicon，以及我的愛用pluginRenameit。

另一個不同點是，Sketch的plugin散落各處，設計去們要自己去github等地方發掘新玩意兒。

Figma則是有個像appstore的marketplace讓所有plugin都聚集於此，可以花很多時間在嘗試各種新的plugin，資訊相對透明。

Figmaplugin的marketplace附註：Figma背後的傳奇人物Figma的創辦人DylanField也是個傳奇，2012年僅僅21歲的他創造了Figma，在此之前他只有實習經驗，可說是天生的創業家。

Dylan曾獲2015年富比世針對消費者科技產品的30under30影響力人士，但是他很低調，關於他的報導非常少，大家猜測他正全心全意投入Figma的開發中。

結語我真正開始使用Figma快兩個月了，一開始也是戰戰兢兢的，雖然介面跟Sketch幾乎一模一樣，但有些相異的小地方還是讓我覺得好像有點綁手綁腳。

不過習慣了它強大的協作功能之後，反而很難想像重新回到Sketch該怎麼省去對客戶、主管、或是其他設計師溝通成本。

設計工具日新月異，這場仗還不知道誰會勝出，不過現在看起來Figma贏面頗大的呢！很期待它接下來會如何再進化。

如果喜歡這篇文章，請幫我拍手1-10下。

如果喜歡閱讀關於UX設計工具評論的文章，請幫我拍手10-30下。

如果單純喜歡我的文字，希望看到更多的話，請幫我大力拍手30-50下。

也請記得Follow我JasmineLin或是數位產品設計Medium文章平台AsAProductDesigner，讓我們與你分享更多好文章😊更歡迎你在文章底下留言，我很樂意也很期待跟你討論或聊天！https://medium.com/as-a-product-designer/--3MorefromAAPD — AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

歡迎來信投稿：[email protected] — AsAProductDesignerAboutHelpTermsPrivacyGettheMediumappGetstartedJasmineLin7KFollowersUXDesigner/InformationArchitectfromTaiwan,nowlivinginSeattle.FollowMorefromMediumOliverL.inVisualSideUXdesignandwhitespace — VisualSideLLCWellJoeAxureTutorial:MakeSliderswithDynamicPanelDionLewisSemanticsof3DFormValeriiaHutorCreateyourbeautifulstickerpackinTelegramusingFigmaHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable