Figma — 異軍突起的設計協作神器
究竟是什麼魔力讓 Figma 從設計工具大亂鬥中脫穎而出？
近幾年來隨著設計思考與 UX 設計的興起，設計工具也從 Adobe 獨霸變成百家爭鳴，試圖解決設計流程中從腦力激盪（brainstorm）到交付工程師（handoff）的種種問題。
以往每個工具都各司其職，例如 Sketch 最適合畫線框圖和 UI 設計、InVision 最適合展示簡易原型（clickthroughs）、Zeplin 最適合將設計規格轉達給設計師，每個工具都有它做最好的部分。
如今各工具為了擴展版圖，逐漸跨足其他領域，例如 InVision 推出 InVision Studio 以期網羅 UI 設計的受眾，大家都想搶好搶滿整個設計流程這塊大餅。
雖然現在戰況還不明瞭，但在這其中異軍突起的設計工具非屬 Figma 不可了。
根據 UX Tools 針對全球數千名設計師年度問卷調查，Figma 在 2017 年的愛用程度位居第六或七名，相對很少人關注。
在 2018 年卻急起直追，暴衝到 Wireframe 和 UI Design 項目的第二名，並榮登 2019 年最令人期待的設計工具，其影響力不可小覷，潛力無窮
不只是勇於導入新工具的新創公司紛紛投入 Figma 的懷抱，些許企業也難得地大動作從 Sketch 遷徙到 Figma，像是 Dropbox。
為什麼 Figma 能在短短幾年內引起高度關注，如此迅速地累積死忠愛用者呢？這都要歸功於它獨樹一格的產品定位與協作功能。
協作 Collaboration
在導入 Figma 之前，我們工作室的協作方式是每個人各自有一份 Sketch 或 Illustrator 檔案同時進行設計，最後開會彙整大家的設計點子，再重新整合一份母檔案（master file）。
這個流程最大的痛點就是常常會有重複的設計，以及無數增生的檔案，就算彙整出母檔也會有版本更新問題（「母檔裡的登入頁面是今天 Serene 子檔案中的最新版本嗎？」）
Figma 的最大亮點就是協作功能，它能同時讓許多人在單一檔案內工作，當看得到其他人在進行的設計時，只要發現跟自己的思路雷同，就可以避免重複設計的問題，檔案也永遠只需要一份，間接解決了子母檔的問題。
觀察 Observation
既然是協作工具，自然可以看到其他人的工作「直播」，不只如此，Figma 還進一步設計了「觀察」的功能 — 點擊協作夥伴的頭像就能直接跳到該夥伴的視角。
一開始覺得超怪，自己工作時的一舉一動，畫了什麼糟糕的草稿，同事都看得到，感覺會尷尬到腦袋當機，無法繼續進行設計。
可是習慣之後發現這個功能其實超級好用！尤其是需要跟其他人溝通時，不用走到人家坐位旁邊笨拙地操作他的電腦，或是把螢幕轉到他看得到的方向，只要他「觀察」你，就可以看到你意指的畫面是什麼，還能直接畫圖給他看。
我們公司運用「觀察」的時機還有在簡報時，在倫敦的 Kort 可以保持分享螢幕，只要他「觀察」在西雅圖的我們，不用切換講者分享螢幕或是打開新檔案（通常要花幾分鐘的時間），就可以繼續跟客戶分享我們的設計，過程相對順暢許多。
註釋 Comment
相信設計師們都有過這樣的一個瞬間，就是在畫一個頁面圖的時候想到許多跟這個頁面相關的點子和思考，你會怎麼記下來呢？
我之前都會在 Sketch 裏頭打一串文字在該頁面旁邊，但是當想法一多，或是需要移動頁面時就會變得很難處理那些文字。
再來是其他設計師滿常 miss 掉那些資訊，每次打一串新的思考都要改用新的顏色來吸引注意力，舊的對話也勢必要刪除，隨著時間一長，就沒有辦法再重新參考過去的對話與想法。
而 Figma 的註釋功能完美地解決了這個問題。
由於我們是跨國團隊，能夠這樣同時在相同的檔案中協作，並且為地球彼端的同事留下回饋，比起用上述在 Sketch 裏頭留言的方法而言好得太多了。
Figma 的註釋功能可以針對特定頁面留下回饋，或是在設計時紀錄思考過程，讓一邊設計一邊思考的過程非常流暢，。
如此一來所有環繞著頁面的對話都在一處，既不需要停止設計頁面本身，也不會遺忘設計當下的思路是什麼。
原型製作 Prototyping
Figma 還支援基本的原型製作功能，跟 InVision 的主要功能雷同，能顯示基本的頁面轉動跟進場畫面，預覽時也可以加上載具外殼。
只要將側欄從 Design 切換成 Prototype 模式就可以開始將元件與頁面連線，由於我大部分時間都是在畫 task flow，所以覺得這個視角特別有用。
在 InVision 中無法看到全面的流程圖或系統架構，只能透過點擊一張一張頁面來體驗流程。Figma 的 prototype view 可以直接顯示出完整的流程圖，又能夠透過預覽進行體驗測試，一舉兩得。
我們公司觀望了 Figma 許久，遲遲不遷徙的主要原因是太習慣 Sketch + InVision + Flinto 這個 workflow，當時 Figma 雖然可以取代 InVision 的功能，卻無法取代 Flinto 展示微互動的能力。
但最近 Flinto 也順著潮流推出從 Figma 直接輸入頁面的功能，workflow 因而完整，於是我們再也沒有理由不嘗試 Figma 了。
檔案位置與系統環境 Files/Environment
Figma 和 Sketch 最大的不同點就在於 Figma 是 browser-base 的，完全不受限於系統類型，無論是 Mac 還是 Windows 都可以使用，只要有瀏覽器可以開啟視窗，都可以使用 Figma。
另一個方便的附加價值是，分享設計檔案時只需要傳送連結即可，不需要另存新檔、寄送等行政上的流程，也不需要客戶端安裝任何軟體，就可以直接瀏覽檔案。
再加上前述的原型製作和註釋功能，只要分享連結就可以給客戶或主管試用 prototype 並讓他們直接在上面提供回饋，設計師完全不需要離開 Figma 的環境就可以閱讀留言，進一步更新設計。
缺點就是連線才能使用，無法像 Sketch 一樣有個 local 的存檔，只要斷網基本上就不能好好工作了。
插件 Plugin
Sketch 讓許多資深設計師熱衷不已的就是五花八門的插件，熟悉這些 plugin 之後，每個設計師都能發展出屬於自己的一套高速工作流程。
Figma 直到最近才開始支援 plugin，雖然還沒完全跟上 Sketch 的腳步（畢竟人家硬生生早紅了幾年，社群已經有足夠的成熟度），但已經有不少 sketch plugin 的替代品出現，例如最基本的 content reel 和 material design icon，以及我的愛用 plugin Rename it。
另一個不同點是，Sketch 的 plugin 散落各處，設計去們要自己去 github 等地方發掘新玩意兒。Figma 則是有個像 app store 的 marketplace 讓所有 plugin 都聚集於此，可以花很多時間在嘗試各種新的 plugin，資訊相對透明。
附註：Figma 背後的傳奇人物
Figma 的創辦人 Dylan Field 也是個傳奇，2012 年僅僅 21 歲的他創造了 Figma，在此之前他只有實習經驗，可說是天生的創業家。
Dylan 曾獲 2015 年富比世針對消費者科技產品的 30 under 30 影響力人士，但是他很低調，關於他的報導非常少，大家猜測他正全心全意投入 Figma 的開發中。
結語
我真正開始使用 Figma 快兩個月了，一開始也是戰戰兢兢的，雖然介面跟 Sketch 幾乎一模一樣，但有些相異的小地方還是讓我覺得好像有點綁手綁腳。
不過習慣了它強大的協作功能之後，反而很難想像重新回到 Sketch 該怎麼省去對客戶、主管、或是其他設計師溝通成本。
設計工具日新月異，這場仗還不知道誰會勝出，不過現在看起來 Figma 贏面頗大的呢！很期待它接下來會如何再進化。
如果喜歡這篇文章，請幫我拍手 1-10 下。
如果喜歡閱讀關於 UX 設計工具評論 的文章，請幫我拍手 10-30 下。
如果單純喜歡我的文字，希望看到更多的話，請幫我大力拍手 30-50 下。也請記得 Follow 我 Jasmine Lin 或是數位產品設計 Medium 文章平台 As A Product Designer，讓我們與你分享更多好文章 😊更歡迎你在文章底下留言，我很樂意也很期待跟你討論或聊天！
