2021年UI設計工具對比Figma vs InVision
一個好的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-co
ntent/uploads/2019/09/figma。mp4
InVision Studio中的時間軸動畫編輯器。 資料來源：InVision
協作
Figma支援設計中的實時評論
InVision裡有註釋功能，但沒有Figma的多人協作功能。 並且，在InVision Studio中完成的設計稿必須上傳到InVision線上版才能使用到協作和反饋等功能。
Figma工具欄能顯示在同一設計稿上的編輯者。
歷史版本
Figma的表現類似於Google Docs-有自動生成的歷史記錄。可以檢視，也可以選擇返回到以前的狀態繼續編輯。
InVision沒有這個功能。
元件
Figma的元件庫，每個元件都有縮圖。 並且，在右側的圖層面板中就可以設定元件覆蓋，使用很方便。 Figma還允許自定義許多圖層變數，比如顏色，字型，文字對齊方式，不透明度等。
影片地址：
https：//
asperbrothers。com/wp-co
ntent/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，不會是一件容易的事，也並非每個公司都願意花時間和精力去形成新的使用習慣。 工具的切換需要大量的學習，在此上所花的時間有的時候可以持續數月之久。