ui設計師常用的設計工具

重點 (Top highlight)

It’s 2020, the market today is saturated with UI design tools. Ever since Sketch app came out with its sleek, simple, and efficient tool to craft user interface design, many companies have followed suit to take a piece of the design tools market share. Based on the 2019 Design tools survey conducted by UXtools.co, Sketch was leading the way last year but quite a few tools are catching up if you compared to the previous year.

到了2020年，當今的市場已經充滿了UI設計工具。 自從Sketch應用以其時尚，簡單，高效的工具來制作用戶界面設計以來，許多公司都紛紛效仿，搶占了設計工具的市場份額。 根據(jù)UXtools.co進行的2019年設計工具調查 ，Sketch去年處于領先地位，但如果與上一年相比，有很多工具正在趕上來。

2019 most popular UI design tools survey result

2019最受歡迎的UI設計工具調查結果

UI design tools survey graph 2019UI設計工具調查圖2019

2018 most popular UI design tools survey result

2018最受歡迎的UI設計工具調查結果

UI design tools survey graph 2018UI設計工具調查圖2018

Based on my observed growth of these tools, my own experiences using these tools, as well as hearing about other designers' experience with these tools, I project the spotlight will likely shine on Sketch, Figma, and Adobe XD in the next year or two.

根據(jù)我觀察到的這些工具的增長，我自己使用這些工具的經驗以及聽取其他設計師使用這些工具的經驗，我預計明年一兩年內，Sketch，Figma和Adobe XD可能會受到關注。 。

This year, one of the most common questions I got from speaking with aspiring designers is ‘Should I learn Sketch or other tools?’. To answer this question, we can dig into a few different key aspects of a tool and make a comparison. To keep this article concise, let’s focus on only the top three tools from the survey, Sketch, Figma, and Adobe XD.

今年，我與有抱負的設計師交談時遇到的最常見問題之一是“ 我應該學習Sketch還是其他工具？ '。 為了回答這個問題，我們可以深入探討該工具的幾個關鍵方面并進行比較。 為了使本文簡潔明了，讓我們僅關注調查中的前三個工具Sketch ， Figma和Adobe XD 。

系統(tǒng)要求 (System requirements)

Let’s start with a key requirement of the tool, which is what operating system you are running. Many people are not aware that Sketch is a Macintosh only app. Therefore, if you are running a Windows or Linux machine then you are limited to Figma or Adobe XD.

讓我們從該工具的關鍵要求開始，這就是您正在運行的操作系統(tǒng)。 許多人不知道Sketch是僅適用于Macintosh的應用程序。 因此，如果您正在運行Windows或Linux計算機，則只能使用Figma或Adobe XD。

For Mac users, all options are on the table.

對于Mac用戶，所有選項都在表中。

價錢 (Pricing)

Another key deciding factor for a lot of people. Below is a summary of the personal/individual pricing model for each tool:

許多人的另一個關鍵決定因素。 以下是每種工具的個人/個人定價模型的摘要：

• Sketch: $99 one-time payment. One-year free update. Meaning you likely want to pay a renewal price of $79 every additional year to benefit from new features.

  草圖 ：一次性支付$ 99。 一年免費更新。 這意味著您可能希望每隔一年支付$ 79的續(xù)訂價格，以使用新功能。

• Figma: It’s free with 3 project limits, an unlimited number of files within a project, and 2 editors.

  Figma ：它是免費的，具有3個項目限制，一個項目中不限數(shù)量的文件和2個編輯器。

• Adobe XD: Free with unlimited projects/files and no sharing limitation until October 2020. After that, there is a limit of 1 shared project and 2 editors.

  Adobe XD ：免費，具有無限的項目/文件，并且在2020年10月之前沒有共享限制 。 之后，限制為1個共享項目和2個編輯器。

At the time of this writing, Adobe XD seems to offer the most value given the promotion.

在撰寫本文時， Adobe XD似乎提供了最大的價值。

布局編輯 (Layout editing)

A significant amount of design time is spent on managing the layout. Choosing a tool with a well-designed layout feature is critical to productivity.

在布局管理上花費了大量設計時間。 選擇具有精心設計的布局功能的工具對于提高生產率至關重要。

For Sketch, they have the Smart layout feature that makes it possible to do things like auto-resizing the container when the content length/size is changed. e.g. button backgrounds adjust to its text length.

對于Sketch，它們具有智能布局功能，可以在更改內容長度/大小時執(zhí)行諸如自動調整容器大小的操作。 例如，按鈕背景會調整為其文本長度。

Sketch’s smart layout auto-adjusted the size of elements when editing the content編輯內容時，Sketch的智能布局會自動調整元素的大小

Figma offers a similar set of features to Sketch in this area with its Auto layout feature such as drag and drop content re-arrangement.

Figma通過其自動布局功能(例如，拖放內容重新安排)在此區(qū)域提供了一組與Sketch類似的功能。

Figma’s Auto Layout drag and drop rearrangement of layersFigma的自動布局拖放圖層的重新排列

Adobe XD has its Content-Aware layout feature, which helps to enforce the padding of a layer group when the content is resized. Compared to the other tool’s layout features, I think Adobe XD’s execution of the padding feature is quite unique.

Adobe XD具有 內容感知布局功能 ，這有助于在調整內容大小時強制圖層組的填充。 與其他工具的布局功能相比，我認為Adobe XD對填充功能的執(zhí)行非常獨特。

Adobe XD offers the padding layout feature that enforces the padding when content is editedAdobe XD提供了填充布局功能，該功能可在編輯內容時強制執(zhí)行填充

The ability to auto adjust the vertical position of layers upon when changing content height is a great time saver. Figma has a slight edge in this area.

在更改內容高度時自動調整圖層的垂直位置的功能可以節(jié)省大量時間。 Figma在該區(qū)域略有邊緣。

合作 (Collaboration)

If you are working with other designers, all three tools provide ways to share files with other people and more if you want to count the availability of plugins. For our discussion here, we’ll focus on default collaboration related features that came with each tool.

如果您與其他設計師一起工作，則這三種工具都提供了與其他人共享文件的方法，如果您想計算插件的可用性，則可以提供更多方法。 在這里的討論中，我們將重點介紹每個工具附帶的與默認協(xié)作相關的功能。

For Sketch, files can be stored in their cloud server. The files can also be shared with and edited by others just like other cloud storage services. Versioning is available and their inspect tool is in beta at the time of this writing. Historically, Sketch is paired up with other tools like Invision or Zeplin for collaboration features like design sharing and hand-off. Sketch is catching up to offer better versions of these features but still a bit behind other competitors in 2020.

對于Sketch，文件可以存儲在其云服務器中。 就像其他云存儲服務一樣，文件也可以與其他人共享和編輯。 可以使用版本控制，并且在撰寫本文時，他們的檢查工具處于beta版。 從歷史上看，Sketch與其他工具(例如Invision或Zeplin)配對使用，以實現(xiàn)諸如設計共享和移交之類的協(xié)作功能。 Sketch正趕上提供這些功能的更好版本，但在2020年仍落后于其他競爭對手。

Multiplayer editing example from Figma’s announcement postFigma公告中的多人編輯示例

Figma came out of the gate with its live collaboration capability, which allows multiple people to view/edit the same file at the same time. This has been one of the most unique features out on the market of UI design tools in recent years. That being said, this feature is only beneficial for a design team that actually collaborates on the same project at the same time. The live edit/preview feature is convenient in the sense that anyone reviewing the design file will always see the latest changes as it happens. Aside from the live collaboration, Figma also has its versioning, design system, and inspect feature for that is on par with other tools.

Figma憑借其實時協(xié)作功能脫穎而出，它允許多個人同時查看/編輯同一文件。 這是近年來UI設計工具市場上最獨特的功能之一。 就是說，此功能僅對實際上在同一時間在同一項目上進行協(xié)作的設計團隊有用。 實時編輯/預覽功能很方便，因為任何人查看設計文件都可以隨時看到最新的更改。 除了實時協(xié)作之外，Figma還具有其版本控制，設計系統(tǒng)和檢查功能，與其他工具相當。

Adobe XD launched its own coediting feature back in November 2019 with features like multi-user editing and file versioning. In addition, XD has similar sets of sharing and hang-off features as other tools.

Adobe XD于2019年11月推出了自己的共同編輯功能，其中包括多用戶編輯和文件版本控制等功能。 此外，XD具有與其他工具相似的共享和掛斷功能集。

Adobe XD’s co-editing feature is currently in betaAdobe XD的共同編輯功能目前處于測試階段

Considering the beta status of features from XD, Figma is the first pick here especially for designers that value live collaboration.

考慮到XD功能的beta狀態(tài)， Figma是這里的首選，特別是對于重視實時協(xié)作的設計師。

性能 (Performance)

For most people with a decent hardware spec, there shouldn’t be much of a performance difference between the three design tools. Performance issues will become more noticeable when working with a large amount of artboards/frames, an external plugin, and image assets within a file.

對于大多數(shù)擁有不錯硬件規(guī)格的人來說，這三種設計工具之間應該沒有太大的性能差異。 當使用大量畫板/框架，外部插件和文件中的圖像資產時，性能問題將變得更加明顯。

When using Sketch, I often encounter sluggish interaction when working on a file that has more than a few dozen artboards on a single Sketch page. I have also seen reports where people experienced performance issues when using third party plugins.

使用Sketch時，在一個Sketch頁面上包含多個畫板的文件上工作時，經常會遇到呆滯的交互。 我還看到了一些報告，其中人們在使用第三方插件時遇到性能問題。

I rarely experienced performance issues within the day to day flows of using Figma. Given that Figma is a browser-based tool (also has a desktop app that’s likely a wrapper of the web app), performance is less dependent on hardware and is quite good in most cases. Similar to Sketch, the plugins can take some time to load depending on its content and function but this is not very significant.

在使用Figma的日常流程中，我很少遇到性能問題。 鑒于Figma是基于瀏覽器的工具(也具有桌面應用程序，可能是Web應用程序的包裝)，因此性能對硬件的依賴性較小，并且在大多數(shù)情況下都相當不錯。 與Sketch類似，根據(jù)其內容和功能，加載插件可能需要花費一些時間，但這并不是很重要。

For Adobe XD, I encountered some performance issues when it was first launched in early 2019. Since then, the same performance issues were resolved by subsequent updates. I honestly have not tested the performance of XD as extensively as the other tools but so far the performance has been on par with Sketch.

對于Adobe XD，我在2019年初首次啟動時遇到了一些性能問題。此后，后續(xù)的更新解決了相同的性能問題。 老實說，我沒有像其他工具那樣廣泛地測試過XD的性能，但是到目前為止，該性能已經可以與Sketch媲美。

In the performance category, Figma has been the most reliable in my experience.

在性能類別中，根據(jù)我的經驗， Figma是最可靠的。

原型制作功能 (Prototyping features)

There is much to discuss when it comes to prototyping tools as there are more specialized prototyping tools on the market to consider. However, it’s beneficial to have a summary of the prototyping capabilities with the three tools.

關于原型制作工具，有很多討論要討論，因為市場上有更多專門的原型制作工具可供考慮。 但是，使用這三種工具總結原型功能是有益的。

Sketch supports screen linking to build a clickable prototype using hotspots. The prototype can then be previewed locally or shared with others via Sketch Cloud. Additional nice to have features such as ‘fixed position when scrolling’ and ‘maintain scroll position after click’ make Sketch on par with what Invision has to offer for prototyping.

Sketch支持屏幕鏈接以使用熱點構建可點擊的原型。 然后可以在本地預覽原型，也可以通過Sketch Cloud與其他人共享原型。 具有“滾動時固定位置”和“單擊后保持滾動位置”等功能的其他優(yōu)點使Sketch與Invision為原型提供的功能相當。

Sketch’s fix position when scrolling feature help to create a more complex click-through prototypesSketch滾動時的固定位置功能有助于創(chuàng)建更復雜的點擊原型

Figma has almost the same set of prototyping features as Sketch. The main difference is in the transition effects, where Figma has a Smart Animate feature that automatically animates the states between two frames. Using Smart Animate, we can create more complex looking prototypes.

Figma具有與Sketch幾乎相同的原型制作功能。 主要區(qū)別在于過渡效果，其中Figma具有智能動畫功能，該功能可自動為兩個幀之間的狀態(tài)設置動畫。 使用Smart Animate，我們可以創(chuàng)建外觀更復雜的原型。

Figma’s Smart Animate can create more complex transitions between framesFigma的Smart Animate可以在幀之間創(chuàng)建更復雜的過渡

Adobe XD has more features in the prototyping area. In addition to what Figma and Sketch have to offer, there are more capabilities such as the keyboard, gamepad, and voice-based triggers that can support more specialized prototype experiences.

Adobe XD在原型制作領域具有更多功能。 除了Figma和Sketch提供的功能外，還有更多功能(如鍵盤，游戲手柄和基于語音的觸發(fā)器)可以支持更專業(yè)的原型體驗。

Adobe XD has a trigger type for building voice-based user experienceAdobe XD具有用于建立基于語音的用戶體驗的觸發(fā)器類型

For out of the box features around prototyping, Adobe XD is the front runner with a bit more input options.

對于原型開發(fā)的開箱即用功能， Adobe XD是領先者，提供了更多輸入選項。

外掛程式 (Plugins)

All three tools come with an ecosystem of plugins.

這三個工具都帶有插件生態(tài)系統(tǒng)。

Sketch’s official plugin pageSketch的官方插件頁面

Having been around for a long time, Sketch has a large and diverse library of plugins. You can find many useful plugins to speed up the design workflow or extend the functionality of Sketch.

經過很長一段時間的發(fā)展，Sketch具有龐大而多樣的插件庫 。 您可以找到許多有用的插件來加快設計工作流程或擴展Sketch的功能。

Figma’s plugin pageFigma的插件頁面

Figma’s plugin support launched in August 2019. Since then many plugins have been added but falling short compared to the other tools.

Figma的插件支持于2019年8月推出。此后，添加了許多插件，但與其他工具相比不足。

Adobe XD’s plugin panelAdobe XD的插件面板

Adobe XD started its plugin ecosystem in 2018. It may not be at the same level as Sketch just yet but it is catching up super quickly. Among the three tools, it also has (in my opinion) a nicer browse and plugin management experience.

Adobe XD于2018年開始了其插件生態(tài)系統(tǒng)。它可能尚未與Sketch處于同一級別，但正在Swift趕上。 在這三個工具中，(我認為)它還具有更好的瀏覽和插件管理體驗。

Sketch still wins the plugin category given its huge library of plugins.

由于其龐大的插件庫， Sketch仍然贏得了插件類別的冠軍。

發(fā)展速度 (Development velocity)

When choosing a design tool to invest your learning time, a big consideration is how quickly the tool evolves.

在選擇一種設計工具來投入學習時間時，一個重要的考慮因素是該工具的發(fā)展速度。

Looking at Sketch’s update log, they have been on top of the updates this past year averaging about one significant (1 whole version) update per month. This is likely fueled by their most recent funding in early 2019 to catch up with other competitors. The keyword here is to ‘catch up’, frankly Sketch has been behind in features compared to Figma and Adobe XD for awhile. Considering Sketch launched years ahead of its competitions, it’s a bit discouraging to see Sketch is just on par with other competing design tools.

查看Sketch的更新日志 ，他們在過去一年的更新中名列前茅，平均每月大約有一個重要(完整版本1個)更新。 他們可能會在2019年初獲得最新資金以趕上其他競爭對手，從而推動這一趨勢。 這里的關鍵詞是“追趕”，坦率地說，與Figma和Adobe XD相比，Sketch在功能上落后了一段時間。 考慮到Sketch在其競爭對手之前已經推出了數(shù)年，因此看到Sketch與其他競爭設計工具相當時，這令人有些灰心。

Figma has been releasing features at a similar rate to Sketch. What’s worth noting is that Figma has released more integration related features with other tools such as Maze (for testing) and Framer Web (for prototyping). Because of this, Figma plays well with designers or teams that are using additional tools to supplement the design workflow.

Figma的發(fā)布功能與Sketch相似。 值得注意的是，Figma與其他工具(如Maze(用于測試)和Framer Web(用于原型制作))一起發(fā)布了更多與集成相關的功能。 因此，Figma與使用其他工具來補充設計工作流程的設計師或團隊合作良好。

Adobe XD’s release pace is impressive. It initially launched (considering beta release in late 2017) with issues but in less than two years it caught up to become a strong contender with other tools. XD is not as widely integrated with other third party design or development tools but it has tight integration with the Adobe suite.

Adobe XD的發(fā)布速度令人印象深刻。 它最初發(fā)布時(考慮在2017年末發(fā)布Beta版本)，但在不到兩年的時間里，它Swift成為其他工具的有力競爭者。 XD并未與其他第三方設計或開發(fā)工具廣泛集成，但與Adobe套件緊密集成。

For this category, while XD has established a good run so far, Figma has a longer track record of pushing out new and diverse features.

對于此類別，盡管XD到目前為止已經取得了不錯的成績，但Figma在推出新的多樣化功能方面擁有較長的記錄。

那么您應該使用哪個工具？ (So which tool should you use?)

Sketch, Figma, and Adobe XD are all great UI Design tools. If you are just starting out and debating which tools to dive into, I recommend Figma as your starting point. If you are looking for a design tool that also has the ability to create more complex prototypes (e.g. voice input trigger) then go with Adobe XD. Ultimately, your employer/design team may end up choosing the tool for you, but the good news is the three tools are very similar. This means if you have been investing time in one tool, most of the knowledge is transferable when you pick up another tool.

Sketch，Figma和Adobe XD都是出色的UI設計工具。 如果您只是開始并討論要使用的工具，我建議您以Figma作為起點。 如果您正在尋找一種設計工具，該工具還具有創(chuàng)建更復雜的原型的能力(例如，語音輸入觸發(fā)器)，請使用Adobe XD。 最終，您的雇主/設計團隊可能最終會為您選擇工具，但好消息是這三個工具非常相似。 這意味著，如果您一直在花時間購買一種工具，那么當您選擇另一種工具時，大部分知識都是可以轉讓的。

翻譯自: https://uxdesign.cc/which-ui-design-tool-should-i-use-in-2020-afbc1c6c0b08

ui設計師常用的設計工具

總結

以上是生活随笔為你收集整理的ui设计师常用的设计工具_2020年应该使用哪个UI设计工具？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。