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.
在尋求最佳設(shè)計軟件的設(shè)計師中，比較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設(shè)計人員的首選應(yīng)用程序。 但是在過去的四年中，我們看到了許多新的爭奪Sketch皇冠的競爭者。 其中三個取得最大進(jìn)展的是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.
這四個工具有很多共同點(diǎn)，但也有一些區(qū)別。 例如，第一個比較Adobe XD與Sketch比較有意義，特別是因?yàn)閮烧叨季哂邢嗨频慕缑?#xff0c;該界面易于使用且具有簡約風(fēng)格。
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.
在本文中，我根據(jù)在Creative Tim工作時獲得的經(jīng)驗(yàn)，分析了最常用的設(shè)計應(yīng)用程序如何競爭以及它們的獨(dú)特功能。
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.開發(fā)和發(fā)布。XD于2017年10月18日發(fā)布。它是基于矢量的用戶體驗(yàn)設(shè)計工具，適用于macOS和Windows上的Web應(yīng)用程序，移動應(yīng)用程序和語音應(yīng)用程序。 還有適用于iOS和Android的版本，可幫助您直接在移動設(shè)備上預(yù)覽工作結(jié)果。
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還支持網(wǎng)站線框圖和創(chuàng)建簡單的交互式點(diǎn)擊型原型。 使用Adobe XD的字符和布局工具，可以輕松創(chuàng)建Elements并可以導(dǎo)出單個對象。
The interface is kept relatively simple, with a toolbar that is aligned at the side, as well as the large artboard area.
該界面保持相對簡單，并具有在側(cè)面對齊的工具欄以及較大的畫板區(qū)域。
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是有意義的，特別是因?yàn)樵撚脩粲押们揖哂泻喖s風(fēng)格的相似界面。
草圖 (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公司開發(fā)的矢量圖形編輯器 。 Sketch于2010年9月7日首次針對macOS發(fā)布 。 它在2012年獲得了Apple設(shè)計獎 。
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與其他矢量圖形編輯器之間的主要區(qū)別在于Sketch不包含打印設(shè)計功能。 草圖僅在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最初問世時，它完全破壞了界面設(shè)計空間，但是Adobe XD和Figma最近成為了新的挑戰(zhàn)者。 它們提供了原型制作和實(shí)時協(xié)作等獨(dú)特功能。
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研究這些工具，并希望分享我認(rèn)為最值得一提的決策點(diǎn)。 另外，從我的角度來看， 學(xué)習(xí)素描非常有用，成為專業(yè)人士并不需要太多。
菲格瑪 (Figma)
Figma came to the stage in 2016 with initial funding of $14M.
Figma于2016年進(jìn)入階段，初始資金為1400萬美元 。
With its seamless user interface and sleek feature palette, the tool quickly became a notorious competitor to similar solutions in the field.
憑借其無縫的用戶界面和時尚的功能面板，該工具Swift成為該領(lǐng)域類似解決方案的臭名昭著的競爭對手。
Designers from brands like Twitter, Microsoft, GitHub, and Dropbox swear by Figma as the ultimate UI design tool.
來自Twitter，Microsoft，GitHub和Dropbox等品牌的設(shè)計師認(rèn)為Figma是最終的UI設(shè)計工具。
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年發(fā)布的新軟件，可讓設(shè)計人員構(gòu)建更高級的動畫和微交互。 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默認(rèn)具有漂亮的深色UI ，可幫助開發(fā)人員專注于晚上要完成的工作。 但是，使用macOS Mojave，每個應(yīng)用程序都可以很容易地看起來像這樣。 當(dāng)他們創(chuàng)建它時，他們受到另一個設(shè)計工具的啟發(fā)-我正在考慮Sketch應(yīng)用。
應(yīng)用比較 (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.
當(dāng)您使用自己的資源時，預(yù)算可能很重要。 其中一些許可證具有教育性和促銷性的價格(通常優(yōu)惠50％)，因此請不要錯過這一部分。 例如，只要您不在團(tuán)隊中工作，Figma就會免費(fèi)帶您到那里。
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 ：個人免費(fèi)！ 您可以免費(fèi)擁有3個項目，也可以以每月12美元(每年計費(fèi))的價格升級到無限的項目和團(tuán)隊功能。
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，并可以訪問該應(yīng)用的下一個生產(chǎn)版本。
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 ：根據(jù)個人或團(tuán)隊的需求，它提供免費(fèi)和付費(fèi)的計劃。 付費(fèi)計劃的費(fèi)用為每月9.99美元。
InVision Studio: Free right now.
InVision Studio：立即免費(fèi)。
2.平臺 (2. Platform)
Though Sketch has been immensely popular, it forces designers to only use Mac, which alienates developers from accessing design files.
盡管Sketch已廣受歡迎，但它迫使設(shè)計師只能使用Mac，這使開發(fā)人員無法訪問設(shè)計文件。
Figma: Browser! Figma recently released a Mac app and Windows app (not offline-capable, though).
Figma ：瀏覽器！ Figma最近發(fā)布了Mac應(yīng)用程序和Windows應(yīng)用程序 (不過不支持離線功能)。
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.現(xiàn)場協(xié)作 (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.
沒人喜歡在一天結(jié)束時發(fā)送“ version 3.0”，“ version3.0.final”，“ version3.0.final.final”。 實(shí)時協(xié)作可以幫助我們，尤其是實(shí)時評論。
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.
我想這些都是高度創(chuàng)新的Google Docs套件發(fā)布時的擔(dān)憂。 但是，Google Docs通過實(shí)時協(xié)作使Microsoft Suite脫穎而出，現(xiàn)在Figma正尋求在UI設(shè)計上做同樣的事情。
Figma: Yes! Not to mention being browser-based, it allows Windows and even Linux users to have a very polished design tool.
菲瑪 ：是的！ 更不用說基于瀏覽器了，它允許Windows甚至Linux用戶使用非常精致的設(shè)計工具。
Sketch: Not natively, but a plugin, Picnic, is looking to change that. Also, they have Sketch for Teams.
草圖 ：并非本機(jī)，而是Picnic插件正在尋求改變。 此外，他們還有團(tuán)隊素描 。
Adobe XD: It offers real-time Coediting, launched at Adobe MAX 2019.
Adobe XD ：它提供了在Adobe MAX 2019中啟動的實(shí)時協(xié)同編輯功能。
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.
最近，專門開發(fā)了一些應(yīng)用程序以向開發(fā)人員提供規(guī)格(大小，間距，顏色)，但是設(shè)計工具開始將本機(jī)功能集成在一起。
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 ：由于存在實(shí)時協(xié)作，因此開發(fā)人員可以輕松地(無論操作系統(tǒng)如何)進(jìn)入并訪問設(shè)計。 現(xiàn)在，Figma在右側(cè)面板中巧妙地打印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 ：他們最近啟動了自己的本機(jī)開發(fā)人員移交功能-Cloud Inspector。 甚至還有一個完全免費(fèi)的替代方案，稱為“草圖測量”，它也可以正常工作。
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 ：它提供了設(shè)計規(guī)范，使設(shè)計人員可以創(chuàng)建一個共享鏈接，其中包含度量，資產(chǎn)和自動生成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.
這很重要。 當(dāng)Wifi掉線時，某些在線應(yīng)用可以保護(hù)您的信息，但是您需要完全訪問權(quán)限才能離線打開，使用和保存應(yīng)用。
Figma: No, in an AMA they stated they don't have any current plans to add it.
Figma ：不，他們在AMA中表示他們目前尚無添加它的計劃。
Sketch: Sure.
素描 ：當(dāng)然可以。
Adobe XD: Yep.
Adobe XD ：是的。
InVision Studio: Yes.
InVision Studio：是的。
Image: AdobeXD - Argon Dashboard Free
圖片：AdobeXD- Argon儀表板免費(fèi)
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.
如今，實(shí)際上有數(shù)十種此類應(yīng)用程序，但是隨著Adobe XD將原型直接帶入設(shè)計工具中，它們可能會滅絕。 請注意這些。
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 ：是的，應(yīng)用程序內(nèi)的本機(jī)原型。 Adobe XD還支持語音原型和鍵盤/游戲板支持。
InVision Studio: Yes, you can create prototypes and animations.
InVision Studio：是的，您可以創(chuàng)建原型和動畫。
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.
符號可以使您的工作更輕松。 這些完全改變了設(shè)計過程。 忘記一遍又一遍地建立和復(fù)制列表項，讓符號為您完成工作。
Figma: Good to go. Symbols now have states, constraints, and overrides.
Figma ：很好。 符號現(xiàn)在具有狀態(tài)，約束和替代。
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).
草圖 ： 草圖中的符號功能令人印象深刻，并且會不斷改進(jìn)。 可以在整個文檔中更新符號，并且可以響應(yīng)性地調(diào)整符號的大小(這意味著更改屏幕尺寸時所需的工作更少)。
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 ：它提供了可在整個文檔中使用以及跨文檔鏈接的組件。 它還允許設(shè)計人員為不同的交互(稱為組件狀態(tài))創(chuàng)建組件的變體。
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：它們具有與其他應(yīng)用程序中的符號約定非常接近的組件。 最終形式的組件將遵循廣泛的，可擴(kuò)展的層次結(jié)構(gòu)，使設(shè)計人員可以在整個設(shè)計中智能地快速構(gòu)建，混合和匹配組件。
Image: Sketch - Material Kit Pro
圖片：草圖-Material Kit Pro
結(jié)論 (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在這里有一個很大的缺點(diǎn)，因?yàn)樗鼉H適用于Mac用戶。 因此，它使Figma和Adobe XD之類的工具能夠在基本需求之外進(jìn)行創(chuàng)新。
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.
此外，在設(shè)計工具方面，Adobe XD提供了一組可靠的響應(yīng)，而Sketch并未內(nèi)置此功能(但它具有許多插件)。 如果您的工具比其他工具做得更好，則通常足以作為切換的理由。 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.
在談?wù)揂dobe XD與Sketch時，第一個的未來看起來非常光明，將贏得許多Sketch用戶。 InVision的重點(diǎn)轉(zhuǎn)移可以確保其生存，但是可以肯定的是-Adobe XD可以保留。 Adobe具有強(qiáng)大的實(shí)力，像InVision和Sketch這樣的小型公司在未來必須努力工作，以保持相關(guān)性。
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.
人們通常更喜歡在一個地方進(jìn)行設(shè)計和工作。 如果您是團(tuán)隊的一員，那么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.
總體而言，在談?wù)撟罴言O(shè)計軟件時，這四個工具非常適合現(xiàn)代設(shè)計師的需求。
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能夠幫助您確定哪種設(shè)計工具更適合您。
Resources:
資源：
https://www.figma.com/figma-vs-sketch/
https://www.figma.com/figma-vs-sketch/
https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/
https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/
https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/
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://helpx.adobe.com/ro/xd/help/components.html
https://www.sketch.com/docs/
https://www.sketch.com/docs/
翻譯自: https://www.freecodecamp.org/news/adobe-xd-vs-sketch-vs-figma-vs-invision/
sketch-a-net
總結(jié)
以上是生活随笔為你收集整理的sketch-a-net_Adobe XD，Sketch，Figma，InVision-如何在2020年选择最佳设计软件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到赚钱是什么意思
- 下一篇： 维护旧项目_为什么您的旧版软件难以维护-