近幾年來隨着設計思考與 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 可以保持分享屏幕，只要他「觀察」在西雅圖的我們，不用切換講者分享屏幕或是打開新文檔（通常要花幾分鐘的時間），就可以繼續跟客戶分享我們的設計，過程相對順暢許多。

△ 我跟同事還常常在 Figma 裡頭（狂亂地）打招呼XD

註釋 Comment

相信設計師們都有過這樣的一個瞬間，就是在畫一個頁面圖的時候想到許多跟這個頁面相關的點子和思考，你會怎麼記下來呢？

我之前都會在 Sketch 裡頭打一串文字在該頁面旁邊，但是當想法一多，或是需要移動頁面時就會變得很難處理那些文字。

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

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

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

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

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

原型製作 Prototyping

Figma 還支持基本的原型製作功能，跟 InVision 的主要功能雷同，能显示基本的頁面轉動跟進場畫面，預覽時也可以加上控件形式。

△ 跟 InVision 一模一樣

只要將側欄從 Design 切換成 Prototype 模式就可以開始將組件與頁面關聯，由於我大部分時間都是在畫 task flow，所以覺得這個視角特別有用。

在 InVision 中無法看到全面的流程圖或系統架構，只能通過點擊一張一張頁面來體驗流程。Figma 的 prototype view 可以直接显示出完整的流程圖，又能夠通過預覽進行體驗測試，一舉兩得。

△ 流程圖概覽可以當 task flow 用

我們公司觀望了 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 plugin 的 marketplace

附註：Figma 背後的傳奇人物

Figma 的創辦人 Dylan Field 也是個傳奇，2012 年僅僅 21 歲的他創造了 Figma，在此之前他只有實習經驗，可說是天生的創業家。

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

結語

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

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

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

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 杏耀註冊平台官網_是什麼魔力功能，才能讓Figma成為異軍突起的設計神器？