一個好的UI設計工具應該可以滿足快速創建設計，無需在多個平臺之間切換等特點。現在市面上的這類型的軟件越來越多，但是功能上能夠形成真正競爭關係的其實不算多。今天我們來看一看兩個業內認知度比較高的工具：Figma 和 InVision，看看他們的比較結果會如何。
通過本文你會了解到：
- 什麼是UI（界面）設計工具
- Figma 和InVision的相近之處
- Figma 和InVision中哪一個更適合你
- 大家熟知的大廠都在用哪些工具
- 一些可以幫助你做決定的實用信息
什麼是UI設計工具？
UI設計工具供設計師來完成線框，原型，界面，交互設計。通常設計師會用UI工具來完成以下的工作：
- 構建UI導航模式，比如用戶流（可視接觸點）
- 交付設計給開發，促進與開發人員的協作
- 確定交互的視覺效果（原型）
- 與其他設計師在線上合作，收集反饋並優化設計
UI設計工具市場（包括功能齊全的平臺，也包括注重於某塊特定功能的工具）已經相當飽和了。 一些比較流行的UI設計應用程序包括：
Sketch
Adobe XD
Mockplus
InVision (InVision Studio)
Figma
這些工具裏，我們關注最後兩個：Figma和InVision（InVision Studio）。 原型能力上，InVision的功能只有Figma功能的一小部分。InVision加上InVision Studio作爲一體，纔算一個完整的產品。
Figma和InVision：相同之處
我們來看一看兩種工具的共同點：
- 支持組件嵌套
- 整體的界面和視覺結構
- 支持常用開發語言的代碼段生成
- 能夠設置響應式佈局
- 支持靜態UI屏幕設計
- 都有免費版
- 支持三方工具的對接
推出後的市場接受度
Figma在2016年正式上線，InVision早在2011年就進入市場（InVision Studio在2018年上線）。 根據2800位設計師的2018年設計工具調查顯示，界面設計上，Figma的使用頻率高於InVision。
最受歡迎的UI設計工具。 資料來源：UXtools
但是，在原型工具的使用上，InVision的使用數量幾乎是Figma的兩倍：
最受歡迎的原型製作工具。 資料來源：UXtools
平臺工具和生態系統
InVision Studio的推出很大程度上補充了它之前的不足。推出之後，設計師可以在同一個產品內做設計和原型，讓InVision達到了對設計師的需求整體滿足的狀態。
不過，InVision的生態本來也比較全面，它既有專注於某一板塊的功能工具，也有很多與第三方的對接。
Figma沒有把產品線拆得這麼細，功能都在一處提供。InVision的大部分功能，在Figma中都可以通過Web的應用程序得到。
因此，使用InVision就要從其他平臺包括自身工具導入/導出文件。InVision Studio是一個桌面端產品，支持macOS和Windows，但是無法基於瀏覽器使用。 Figma裏的工作流程更簡化，更順暢。Figma也有Windows和macOS的桌面端應用程序，但是同時支持瀏覽器運行，所以並不挑平臺。
動畫製作
在Figma中，製作動畫只能通過Principle插件。 需要注意的是Principle只支持macOS。
InVision Studio有相當不錯的時間軸動畫功能。這一點上，與UXpin一起在UI設計工具領域中名列前茅。
視頻地址：https://asperbrothers.com/wp-content/uploads/2019/09/figma.mp4
InVision Studio中的時間軸動畫編輯器。 資料來源：InVision
協作
Figma有類似於Google Docs的實時協作功能。 Figma中，支持對不同項目設置細化訪問權限，有編輯權限的團隊可以隨時隨地實時在線編輯設計稿。 嚴格的權限設計確保了任何未經授權的人無法以任何方式更改項目。
Figma支持設計中的實時評論
InVision裏有註釋功能，但沒有Figma的多人協作功能。 並且，在InVision Studio中完成的設計稿必須上傳到InVision線上版才能使用到協作和反饋等功能。
Figma工具欄能顯示在同一設計稿上的編輯者。
歷史版本
Figma的表現類似於Google Docs-有自動生成的歷史記錄。可以查看，也可以選擇返回到以前的狀態繼續編輯。
InVision沒有這個功能。
組件
Figma的組件庫，每個組件都有縮略圖。 並且，在右側的圖層面板中就可以設置組件覆蓋，使用很方便。 Figma還允許自定義許多圖層變量，比如顏色，字體，文本對齊方式，不透明度等。
視頻地址：https://asperbrothers.com/wp-content/uploads/2019/09/ezgif.com-gif-to-mp4-2-1.mp4
Figma組件覆蓋。 資料來源：Figma
在InVision Studio中，組件沒有略縮圖，必須按列表的視圖來瀏覽組件名稱。 組件覆蓋的功能與Figma的非常相似，但是InVision Studio中的圖層屬性可自定義板塊性沒有Figma提供的多。
性能
儘管InVision線上版本在性能方面與Figma相當，但InVision Studio仍存在一些細微卻能被察覺到的問題。 當原型文件比較大的時候，會感覺到斷斷續續，軟件響應時間變慢。 InVision社區中，就有用戶就提出過這個問題。
Figma過去的性能也常常出問題， 但是，經過一些更新之後這個工具變得非常的穩定。即使在多人同時處理同一文件的情況下，也可以平滑地呈現。
團隊規模和項目
因爲Figma支持多人實時編輯，加上性能穩定，對於大型團隊或者項目中的快速原型製作和快速迭代而言，它是一個不錯的選擇。 在企業環境中，Figma提供的開放式協作和簡化的工作流程確實可以提高效率。
Figma支持同一團隊中，不同成員各有不同的權限。
但是，這也並不是說InVision僅適用於小型團隊。 恰恰相反，許多國際知名品牌在設計過程中都使用了InVision。
使用Figma和InVision的大廠
Figma：
- Microsoft
- Dribbble
- Slack
- Dropbox
- GitHub
InVision:
- HubSpot
- Sony
- Visa
- GoDaddy
- Atlassian
SVG導入
InVision Studio導入SVG文件一直都存在少許的問題。 他們的官網上有更多的信息。 雖然這不算是個大的缺陷，但對於在項目中需要大量使用SVG文件的團隊來說，這是一個需要認真考慮的點。
到目前爲止，在Figma中還沒有出現過這樣的問題。
Figma與Invision的定價
Figma：
Invision：
最後——Figma還是InVision？ 取決於你對不同工作流程偏好
Figma和InVision之間最大的區別似乎在於協作的風格。 Figma在設計UI方面有實時協作體驗，而InVision則偏向於有些孤立的設計工作流程，但也支持收發反饋，進行更改。
UI設計工具的選擇本質上可以迴歸到項目，工作方式的特點，以及特定工具中設計師的偏重。 對於許多團隊來說，從一個由Sketch + InVision（或者其他互補工具組）過渡到Figma，不會是一件容易的事，也並非每個公司都願意花時間和精力去形成新的使用習慣。 工具的切換需要大量的學習，在此上所花的時間有的時候可以持續數月之久。