sketch-a-net_Adobe XD，Sketch，Figma，InVision-如何在2020年選擇最佳設計軟件

sketch-a-net

Comparing Adobe XD vs Sketch vs Figma vs InVision studio is a very common topic among designers who are looking for the best design software.

在尋求最佳設計軟件的設計師中，比較Adobe XD，Sketch，Figma和InVision Studio是一個非常普遍的話題。

Sketch has long been the application of choice for UX and UI designers. But in the last four years, we have seen many new contenders for Sketch’s crown. Three of them that have made the biggest strides are Figma, Adobe XD, and InVision Studio.

長期以來，Sketch一直是UX和UI設計人員的首選應用程序。但是在過去的四年中，我們看到了許多新的爭奪Sketch皇冠的競爭者。其中三個取得最大進展的是Figma，Adobe XD和InVision Studio。

These four tools have many pros in common but there are some differences too. For example, the first comparison, Adobe XD vs Sketch, makes sense especially since both have a similar interface which is user-friendly and has a minimalistic style.

這四個工具有很多共同點，但也有一些區別。例如，第一個比較Adobe XD與Sketch比較有意義，特別是因為兩者都具有相似的界面，該界面易于使用且具有簡約風格。

In this article, I analyze how the most used design apps compete and what their unique features are using my experience acquired while working at Creative Tim.

在本文中，我根據在Creative Tim工作時獲得的經驗，分析了最常用的設計應用程序如何競爭以及它們的獨特功能。

Adobe XD (Adobe XD)

Adobe XD was developed and published by Adobe Inc. XD, released on 18 October 2017. It is a vector-based user experience design tool for web apps, mobile apps, and voice apps available for macOS and Windows. There are versions for iOS and Android as well that help you preview the result of your work directly on mobile devices.

Adobe XD由Adobe Inc.開發和發布。XD于2017年10月18日發布。它是基于矢量的用戶體驗設計工具，適用于macOS和Windows上的Web應用程序，移動應用程序和語音應用程序。還有適用于iOS和Android的版本，可幫助您直接在移動設備上預覽工作結果。

XD also support website wireframing and creating simple interactive click-through prototypes. With the character and layout tools of Adobe XD, Elements can be easily created and individual objects can be exported.

XD還支持網站線框圖和創建簡單的交互式點擊型原型。使用Adobe XD的字符和布局工具，可以輕松創建Elements并可以導出單個對象。

The interface is kept relatively simple, with a toolbar that is aligned at the side, as well as the large artboard area.

該界面保持相對簡單，并具有在側面對齊的工具欄以及較大的畫板區域。

Comparing Adobe XD vs Sketch makes sense especially because of this similar interface which is user-friendly and has a minimalistic style.

比較Adobe XD與Sketch是有意義的，特別是因為該用戶友好且具有簡約風格的相似界面。

草圖 (Sketch)

Sketch is a vector graphics editor, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010 for macOS. It won an Apple Design Award in 2012.

Sketch是由荷蘭 Bohemian Coding公司開發的矢量圖形編輯器。 Sketch于2010年9月7日首次針對macOS發布。它在2012年獲得了Apple設計獎。

A key difference between Sketch and other vector graphics editors is that Sketch does not include print design features. Sketch is only available on macOS. This problem is partially solved by third party and handoff tools.

Sketch與其他矢量圖形編輯器之間的主要區別在于Sketch不包含打印設計功能。草圖僅在macOS上可用。第三方和移交工具可部分解決此問題。

When Sketch first came out it completely disrupted the interface design space, but Adobe XD and Figma have recently come forward as new challengers. They offer unique functionality like prototyping and live collaboration.

Sketch最初問世時，它完全破壞了界面設計空間，但是Adobe XD和Figma最近成為了新的挑戰者。它們提供了原型制作和實時協作等獨特功能。

I’ve recently been researching these tools for my side project, uxtools.co, and wanted to share what I believe the be the most noteworthy decision points. Also, from my point of view, learning to sketch is very useful and it does not take to much to become a Pro.

我最近一直在為我的輔助項目uxtools.co研究這些工具，并希望分享我認為最值得一提的決策點。另外，從我的角度來看，學習素描非常有用，成為專業人士并不需要太多。

菲格瑪 (Figma)

Figma came to the stage in 2016 with initial funding of $14M.

Figma于2016年進入階段，初始資金為1400萬美元。

With its seamless user interface and sleek feature palette, the tool quickly became a notorious competitor to similar solutions in the field.

憑借其無縫的用戶界面和時尚的功能面板，該工具Swift成為該領域類似解決方案的臭名昭著的競爭對手。

Designers from brands like Twitter, Microsoft, GitHub, and Dropbox swear by Figma as the ultimate UI design tool.

來自Twitter，Microsoft，GitHub和Dropbox等品牌的設計師認為Figma是最終的UI設計工具。

InVision Studio (InVision Studio)

InVision Studio is a new piece of software, released in 2019, that allows designers to build more advanced animation and micro-interactions. Studio also integrated with InVision’s link to Sketch via its Craft plugin.

InVision Studio是2019年發布的新軟件，可讓設計人員構建更高級的動畫和微交互。 Studio還通過其Craft插件與InVision的Sketch鏈接集成在一起。

InVision Studio has got a nice dark UI by default, that helps developers focus on the work to be done in the evening. However, with macOS Mojave, every app can look like this quite easily. When they created it, they were inspired by another design tool - I am thinking about the Sketch app.

InVision Studio默認具有漂亮的深色UI ，可幫助開發人員專注于晚上要完成的工作。但是，使用macOS Mojave，每個應用程序都可以很容易地看起來像這樣。當他們創建它時，他們受到另一個設計工具的啟發-我正在考慮Sketch應用。

應用比較 (Apps Comparison)

1.定價 (1. Pricing)

Budget can be a big deal when you’re working with your own resources. Some of these licenses have educational and promotional pricing (often 50% off), so don’t miss that part. For example, Figma will get you there for free as long as you're not working on a team.

當您使用自己的資源時，預算可能很重要。其中一些許可證具有教育性和促銷性的價格(通常優惠50％)，因此請不要錯過這一部分。例如，只要您不在團隊中工作，Figma就會免費帶您到那里。

Figma: Free for individuals! You can have 3 projects for free, or you can upgrade to unlimited projects and team functionality for $12/month (billed annually).
Figma ：個人免費！您可以免費擁有3個項目，也可以以每月12美元(每年計費)的價格升級到無限的項目和團隊功能。
Sketch: $99 per license that gets you the Mac App for life and access to the next production versions of the app.
Sketch ：每個許可證$ 99，可讓您永久使用Mac App，并可以訪問該應用的下一個生產版本。
Adobe XD: It offers free and paid plans, depending on an individual's or team's needs. Paid plans start at $9.99/month.
Adobe XD ：根據個人或團隊的需求，它提供免費和付費的計劃。付費計劃的費用為每月9.99美元。
InVision Studio: Free right now.
InVision Studio：立即免費。

2.平臺 (2. Platform)

Though Sketch has been immensely popular, it forces designers to only use Mac, which alienates developers from accessing design files.

盡管Sketch已廣受歡迎，但它迫使設計師只能使用Mac，這使開發人員無法訪問設計文件。

Figma: Browser! Figma recently released a Mac app and Windows app (not offline-capable, though).
Figma ：瀏覽器！ Figma最近發布了Mac應用程序和Windows應用程序 (不過不支持離線功能)。
Sketch: Mac only.
素描：僅適用于Mac。
Adobe XD: Mac and Windows. Subject to the same limitations as the CC suite.
Adobe XD ：Mac和Windows。受到與CC套件相同的限制。
InVision Studio: Mac and Windows.
InVision Studio： Mac和Windows。

3.現場協作 (3. Live Collaboration)

Nobody likes to send at the end of the day “version 3.0”, “version3.0.final”, “version3.0.final.final”. Live Collaboration can help us, especially live comments.

沒人喜歡在一天結束時發送“ version 3.0”，“ version3.0.final”，“ version3.0.final.final”。實時協作可以幫助我們，尤其是實時評論。

I imagine these were the same concerns that surrounded the release of the highly innovative Google Docs suite. Google Docs, however, turned the Microsoft Suite on its head with live collaboration, and now Figma is seeking to do the same thing with UI design.

我想這些都是高度創新的Google Docs套件發布時的擔憂。但是，Google Docs通過實時協作使Microsoft Suite脫穎而出，現在Figma正尋求在UI設計上做同樣的事情。

Figma: Yes! Not to mention being browser-based, it allows Windows and even Linux users to have a very polished design tool.
菲瑪：是的！更不用說基于瀏覽器了，它允許Windows甚至Linux用戶使用非常精致的設計工具。
Sketch: Not natively, but a plugin, Picnic, is looking to change that. Also, they have Sketch for Teams.
草圖：并非本機，而是Picnic插件正在尋求改變。此外，他們還有團隊素描。
Adobe XD: It offers real-time Coediting, launched at Adobe MAX 2019.
Adobe XD ：它提供了在Adobe MAX 2019中啟動的實時協同編輯功能。
InVision Studio: Not currently possible, but can generate share links.
InVision Studio：目前尚無法，但可以生成共享鏈接。

Image: Figma - Argon Design System Pro

圖片：Figma- Argon Design System Pro

4.交接 (4. Handoff)

Recently a few apps have been developed specifically to deliver specs (sizing, spacing, color) to developers, but design tools are starting to integrate this functionality natively.

最近，專門開發了一些應用程序以向開發人員提供規格(大小，間距，顏色)，但是設計工具開始將本機功能集成在一起。

Figma: Because of live collaboration, developers can easily jump in (regardless of OS) and access the designs. Figma now neatly prints the handoff code for CSS, iOS, or Android in the right panel.
Figma ：由于存在實時協作，因此開發人員可以輕松地(無論操作系統如何)進入并訪問設計。現在，Figma在右側面板中巧妙地打印CSS，iOS或Android的切換代碼。
Sketch: They've recently launched their own native developer handoff feature — Cloud Inspector. There’s even an entirely free alternative called Sketch measure that works just as well.
Sketch ：他們最近啟動了自己的本機開發人員移交功能-Cloud Inspector。甚至還有一個完全免費的替代方案，稱為“草圖測量”，它也可以正常工作。
Adobe XD: It offers design specs that allow a designer to create a shared link that contains measurements, assets, and automatically-generated CSS code snippets.
Adobe XD ：它提供了設計規范，使設計人員可以創建一個共享鏈接，其中包含度量，資產和自動生成CSS代碼段。
InVision Studio: They have “Inspect Now”.
InVision Studio：他們具有“立即檢查”。

Image: Figma - Argon Design System Pro

圖片：Figma- Argon Design System Pro

5.離線 (5. Offline)

This is so important. Some online apps can protect your information when Wifi goes down, but you need full access to open, use, and save from the app offline.

這很重要。當Wifi掉線時，某些在線應用可以保護您的信息，但是您需要完全訪問權限才能離線打開，使用和保存應用。

Figma: No, in an AMA they stated they don't have any current plans to add it.
Figma ：不，他們在AMA中表示他們目前尚無添加它的計劃。
Sketch: Sure.
素描：當然可以。
Adobe XD: Yep.
Adobe XD ：是的。
InVision Studio: Yes.
InVision Studio：是的。

Image: AdobeXD - Argon Dashboard Free

圖片：AdobeXD- Argon儀表板免費

6.原型制作 (6. Prototyping)

There are literally dozens of these apps nowadays, but they might become extinct as Adobe XD brings prototyping directly to the design tool. Keep your eye on these.

如今，實際上有數十種此類應用程序，但是隨著Adobe XD將原型直接帶入設計工具中，它們可能會滅絕。請注意這些。

Figma: Yes! It's very basic but feels like Adobe XD without the transitions. Also, there's a nice Framer integration.
菲瑪：是的！這是非常基本的，但是感覺就像沒有過渡的Adobe XD。此外，還有很好的Framer集成。
Sketch: Yes!
素描：是的！
Adobe XD: Yes, native prototyping within the app. Adobe XD also supports voice prototyping and keyboard/gamepad support.
Adobe XD ：是的，應用程序內的本機原型。 Adobe XD還支持語音原型和鍵盤/游戲板支持。
InVision Studio: Yes, you can create prototypes and animations.
InVision Studio：是的，您可以創建原型和動畫。

Image: InVision Studio - Argon React Native

圖片：InVision Studio- Argon React Native

7.符號 (7. Symbols)

Symbols can make your work easier. These have completely changed the design process. Forget building and duplicating list items over and over, let symbols do the work for you.

符號可以使您的工作更輕松。這些完全改變了設計過程。忘記一遍又一遍地建立和復制列表項，讓符號為您完成工作。

Figma: Good to go. Symbols now have states, constraints, and overrides.
Figma ：很好。符號現在具有狀態，約束和替代。
Sketch: The symbol functionality in Sketch is very impressive, and continues to improve. Symbols can be updated across entire documents and can resize responsively (that means less work for you when changing screen sizes).
草圖： 草圖中的符號功能令人印象深刻，并且會不斷改進。可以在整個文檔中更新符號，并且可以響應性地調整符號的大小(這意味著更改屏幕尺寸時所需的工作更少)。
Adobe XD: It offers components that can be used throughout a document as well as linked across documents. It also allows designers to create variations of a component for different interactions, known as component states.
Adobe XD ：它提供了可在整個文檔中使用以及跨文檔鏈接的組件。它還允許設計人員為不同的交互(稱為組件狀態)創建組件的變體。
InVision Studio: they have components that are a close approximation to the symbol conventions found in other applications. Components in their final form will honor a broad, scalable hierarchy that allows designers to quickly build-up, mix, and match components intelligently across their designs.
InVision Studio：它們具有與其他應用程序中的符號約定非常接近的組件。最終形式的組件將遵循廣泛的，可擴展的層次結構，使設計人員可以在整個設計中智能地快速構建，混合和匹配組件。

Image: Sketch - Material Kit Pro

圖片：草圖-Material Kit Pro

結論 (Conclusion)

Sketch has a big disadvantage here because it is only available for Mac users. And as such, it lets tools like Figma and Adobe XD innovate beyond the basic necessities.

Sketch在這里有一個很大的缺點，因為它僅適用于Mac用戶。因此，它使Figma和Adobe XD之類的工具能夠在基本需求之外進行創新。

Also, in terms of design tools, Adobe XD provides a robust set of responsive while the Sketch doesn’t have this feature built-in (but it has many plugins). If your tool does something better than the other, it is often enough of a reason to switch over. The browser-based approach that Figma has taken is also something to behold.

此外，在設計工具方面，Adobe XD提供了一組可靠的響應，而Sketch并未內置此功能(但它具有許多插件)。如果您的工具比其他工具做得更好，則通常足以作為切換的理由。 Figma采取的基于瀏覽器的方法也值得一看。

When talking about Adobe XD vs Sketch, the first one’s future is looking very bright and will win over many Sketch users. InVision’s change of focus may ensure its survival but one thing is for certain - Adobe XD is here to stay. The Adobe powerhouse is strong, and smaller companies like InVision and Sketch will have to work hard to stay relevant in the future.

在談論Adobe XD與Sketch時，第一個的未來看起來非常光明，將贏得許多Sketch用戶。 InVision的重點轉移可以確保其生存，但是可以肯定的是-Adobe XD可以保留。 Adobe具有強大的實力，像InVision和Sketch這樣的小型公司在未來必須努力工作，以保持相關性。

People usually prefer to design and work in just one place. If you’re a part of a team, then Figma is undoubtedly for you.

人們通常更喜歡在一個地方進行設計和工作。如果您是團隊的一員，那么Figma無疑是您的理想選擇。

After all of that: first is Figma, second is Sketch, third is Adobe XD and fourth is InVision Studio.

畢竟：第一是Figma，第二是Sketch，第三是Adobe XD，第四是InVision Studio。

Overall, when talking about the best design software, these four tools are extremely well-suited for modern designer needs.

總體而言，在談論最佳設計軟件時，這四個工具非常適合現代設計師的需求。

Try all four out to see which one is better for your use cases. I hope this comparison - Adobe XD vs Sketch vs Figma vs InVision - helped you decide which design tool is better for you.

嘗試全部四種方法，看看哪種方法更適合您的用例。我希望這種比較-Adobe XD，Sketch，Figma和InVision能夠幫助您確定哪種設計工具更適合您。

Resources:

資源：

https://www.figma.com/figma-vs-sketch/

https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/

https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/

https://support.invisionapp.com/hc/en-us/sections/360004450191-Studio

https://support.invisionapp.com/hc/zh-CN/sections/360004450191-Studio

https://helpx.adobe.com/ro/xd/help/components.html

https://www.sketch.com/docs/