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://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