一個(gè)好的UI設(shè)計(jì)工具應(yīng)該可以滿足快速創(chuàng)建設(shè)計(jì)，無(wú)需在多個(gè)平臺(tái)之間切換等特點(diǎn)?，F(xiàn)在市面上的這類型的軟件越來(lái)越多，但是功能上能夠形成真正競(jìng)爭(zhēng)關(guān)系的其實(shí)不算多。今天我們來(lái)看一看兩個(gè)業(yè)內(nèi)認(rèn)知度比較高的工具：Figma 和 InVision，看看他們的比較結(jié)果會(huì)如何。

通過(guò)本文你會(huì)了解到：

• 什么是UI（界面）設(shè)計(jì)工具
• Figma 和InVision的相近之處
• Figma 和InVision中哪一個(gè)更適合你
• 大家熟知的大廠都在用哪些工具
• 一些可以幫助你做決定的實(shí)用信息

什么是UI設(shè)計(jì)工具？

UI設(shè)計(jì)工具供設(shè)計(jì)師來(lái)完成線框，原型，界面，交互設(shè)計(jì)。通常設(shè)計(jì)師會(huì)用UI工具來(lái)完成構(gòu)建UI導(dǎo)航模式，交付設(shè)計(jì)給開(kāi)發(fā)，確定交互的視覺(jué)效果，與其他設(shè)計(jì)師在線上合作，收集反饋并優(yōu)化設(shè)計(jì)。

UI設(shè)計(jì)工具市場(chǎng)已經(jīng)相當(dāng)飽和了，一些比較流行的UI設(shè)計(jì)應(yīng)用程序包括：Sketch, Adobe XD, Mockplus, InVision和Figma。

在Figma和InVision之間，原型能力上，InVision的功能只有Figma功能的一小部分。InVision加上InVision Studio作為一體，才算一個(gè)完整的產(chǎn)品。

Figma和InVision：相同之處

我們來(lái)看一看兩種工具的共同點(diǎn)：

• 支持組件嵌套
• 整體的界面和視覺(jué)結(jié)構(gòu)
• 支持常用開(kāi)發(fā)語(yǔ)言的代碼段生成
• 能夠設(shè)置響應(yīng)式布局
• 支持靜態(tài)UI屏幕設(shè)計(jì)
• 都有免費(fèi)版
• 支持三方工具的對(duì)接

推出后的市場(chǎng)接受度

Figma在2016年正式上線，InVision早在2011年就進(jìn)入市場(chǎng)（InVision Studio在2018年上線）。 根據(jù)最新2024的設(shè)計(jì)工具調(diào)查顯示，界面設(shè)計(jì)上，F(xiàn)igma的使用頻率高于InVision。

最受歡迎的UI設(shè)計(jì)工具。 資料來(lái)源：UXtools

但是，在原型工具的使用上，InVision的使用數(shù)量幾乎是Figma的兩倍。

最受歡迎的原型制作工具。 資料來(lái)源：UXtools

平臺(tái)工具和生態(tài)系統(tǒng)

InVision Studio的推出很大程度上補(bǔ)充了它之前的不足。推出之后，設(shè)計(jì)師可以在同一個(gè)產(chǎn)品內(nèi)做設(shè)計(jì)和原型，讓InVision達(dá)到了對(duì)設(shè)計(jì)師的需求整體滿足的狀態(tài)。

不過(guò)，InVision的生態(tài)本來(lái)也比較全面，它既有專注于某一板塊的功能工具，也有很多與第三方的對(duì)接。 Figma沒(méi)有把產(chǎn)品線拆得這么細(xì)，功能都在一處提供。InVision的大部分功能，在Figma中都可以通過(guò)Web的應(yīng)用程序得到。

因此，使用InVision就要從其他平臺(tái)包括自身工具導(dǎo)入/導(dǎo)出文件。InVision Studio是一個(gè)桌面端產(chǎn)品，支持macOS和Windows，但是無(wú)法基于瀏覽器使用。 Figma里的工作流程更簡(jiǎn)化，更順暢。Figma也有Windows和macOS的桌面端應(yīng)用程序，但是同時(shí)支持瀏覽器運(yùn)行，所以并不挑平臺(tái)。

動(dòng)畫制作

在Figma中，制作動(dòng)畫只能通過(guò)Principle插件。 需要注意的是Principle只支持macOS。 InVision Studio有相當(dāng)不錯(cuò)的時(shí)間軸動(dòng)畫功能。這一點(diǎn)上，與UXpin一起在UI設(shè)計(jì)工具領(lǐng)域中名列前茅。

InVision Studio中的時(shí)間軸動(dòng)畫編輯器。 資料來(lái)源：InVision

協(xié)作

Figma有類似于Google Docs的實(shí)時(shí)協(xié)作功能。 Figma中，支持對(duì)不同項(xiàng)目設(shè)置細(xì)化訪問(wèn)權(quán)限，有編輯權(quán)限的團(tuán)隊(duì)可以隨時(shí)隨地實(shí)時(shí)在線編輯設(shè)計(jì)稿。 嚴(yán)格的權(quán)限設(shè)計(jì)確保了任何未經(jīng)授權(quán)的人無(wú)法以任何方式更改項(xiàng)目。

Figma支持設(shè)計(jì)中的實(shí)時(shí)評(píng)論

InVision里有注釋功能，但沒(méi)有Figma的多人協(xié)作功能。 并且，在InVision Studio中完成的設(shè)計(jì)稿必須上傳到InVision線上版才能使用到協(xié)作和反饋等功能。

Figma工具欄能顯示在同一設(shè)計(jì)稿上的編輯者。

歷史版本

Figma的表現(xiàn)類似于Google Docs-有自動(dòng)生成的歷史記錄。可以查看，也可以選擇返回到以前的狀態(tài)繼續(xù)編輯。 InVision沒(méi)有這個(gè)功能。

組件

Figma的組件庫(kù)，每個(gè)組件都有縮略圖。 并且，在右側(cè)的圖層面板中就可以設(shè)置組件覆蓋，使用很方便。 Figma還允許自定義許多圖層變量，比如顏色，字體，文本對(duì)齊方式，不透明度等。

Figma組件覆蓋。 資料來(lái)源：Figma

在InVision Studio中，組件沒(méi)有略縮圖，必須按列表的視圖來(lái)瀏覽組件名稱。 組件覆蓋的功能與Figma的非常相似，但是InVision Studio中的圖層屬性可自定義板塊性沒(méi)有Figma提供的多。

性能

盡管InVision線上版本在性能方面與Figma相當(dāng)，但I(xiàn)nVision Studio仍存在一些細(xì)微卻能被察覺(jué)到的問(wèn)題。 當(dāng)原型文件比較大的時(shí)候，會(huì)感覺(jué)到斷斷續(xù)續(xù)，軟件響應(yīng)時(shí)間變慢。 InVision社區(qū)中，就有用戶就提出過(guò)這個(gè)問(wèn)題。

Figma過(guò)去的性能也常常出問(wèn)題， 但是，經(jīng)過(guò)一些更新之后這個(gè)工具變得非常的穩(wěn)定。即使在多人同時(shí)處理同一文件的情況下，也可以平滑地呈現(xiàn)。

團(tuán)隊(duì)規(guī)模和項(xiàng)目

因?yàn)镕igma支持多人實(shí)時(shí)編輯，加上性能穩(wěn)定，對(duì)于大型團(tuán)隊(duì)或者項(xiàng)目中的快速原型制作和快速迭代而言，它是一個(gè)不錯(cuò)的選擇。 在企業(yè)環(huán)境中，F(xiàn)igma提供的開(kāi)放式協(xié)作和簡(jiǎn)化的工作流程確實(shí)可以提高效率。

Figma支持同一團(tuán)隊(duì)中，不同成員各有不同的權(quán)限。

但是，這也并不是說(shuō)InVision僅適用于小型團(tuán)隊(duì)。 恰恰相反，許多國(guó)際知名品牌在設(shè)計(jì)過(guò)程中都使用了InVision。

使用Figma和InVision的大廠

Figma：

• Microsoft
• Twitter
• Dribbble
• Slack
• Dropbox
• GitHub

InVision:

• HubSpot
• LinkedIn
• Sony
• Visa
• GoDaddy
• Atlassian

SVG導(dǎo)入

InVision Studio導(dǎo)入SVG文件存在一些小問(wèn)題。 雖然這不算是個(gè)大的缺陷，但對(duì)于在項(xiàng)目中需要大量使用SVG文件的團(tuán)隊(duì)來(lái)說(shuō)，這是一個(gè)需要認(rèn)真考慮的點(diǎn)。 到目前為止，在Figma中還沒(méi)有出現(xiàn)過(guò)這樣的問(wèn)題。

Figma與Invision的定價(jià)

最后——Figma還是InVision？ 取決于你對(duì)不同工作流程偏好

Figma和InVision之間最大的區(qū)別似乎在于協(xié)作的風(fēng)格。 Figma在設(shè)計(jì)UI方面有實(shí)時(shí)協(xié)作體驗(yàn)，而InVision則偏向于有些孤立的設(shè)計(jì)工作流程，但也支持收發(fā)反饋，進(jìn)行更改。

UI設(shè)計(jì)工具的選擇本質(zhì)上可以回歸到項(xiàng)目，工作方式的特點(diǎn)，以及特定工具中設(shè)計(jì)師的偏重。 對(duì)于許多團(tuán)隊(duì)來(lái)說(shuō)，從一個(gè)由Sketch + InVision（或者其他互補(bǔ)工具組）過(guò)渡到Figma，不會(huì)是一件容易的事，也并非每個(gè)公司都愿意花時(shí)間和精力去形成新的使用習(xí)慣。 工具的切換需要大量的學(xué)習(xí)，在此上所花的時(shí)間有的時(shí)候可以持續(xù)數(shù)月之久。

想了解更多相關(guān)內(nèi)容，請(qǐng)查看原文： https://asperbrothers.com/blog/figma-vs-invision/