Although tools are not the most important things to learn as a UX designer, inevitably you need to use it in order to achieve your more important goals, to solve user’s problems. This article covers today’s 8 popular UX prototyping tools including

雖然工具不是UX設計人員最重要的知識，但為了實現更重要的目標，解決用戶的問題，不可避免地需要使用工具。 本文介紹了當今8種流行的UX原型設計工具，包括

I understand there are many more tools out there, and other people may have different opinions. I also acknowledge that I am not familiar with every single tool available. I chose these 8 tools based on a combination of popularity and how these tools played key roles in the modern history of prototyping tools, and likely to take part in the future.

我了解還有更多工具，其他人可能會有不同的看法。 我也承認我并不熟悉每個可用的工具。 我根據流行度以及這些工具如何在現代原型工具歷史中扮演著關鍵角色，并可能會在未來參與其中，來選擇這8種工具。

When Adobe Flash started going down, Axure took over in Web 2.0 Era, then Sketch came along to become a de facto standard. But lack of prototyping and cloud features in its early days opened up other new tools to emerge around Sketch, such as InVision, Principle, Craft plugin for Sketch, and Adobe XD with a new voice capability. Framer X is tackling a challenging developer handoff problem, which could be the future of prototyping. Figma is getting more tractions lately because it was built for cloud-based collaboration, which is becoming a norm in today’s accelerated remote work situation.

當Adobe Flash開始崩潰時， Axure接管了Web 2.0時代，然后Sketch成為了事實上的標準。 但是，由于早期缺乏原型設計和云功能，因此圍繞Sketch出現了其他新工具，例如InVision ， Principle ，Sketch的Craft插件和具有新語音功能的Adobe XD 。 Framer X正在解決具有挑戰性的開發人員交接問題，這可能是原型開發的未來。 Figma最近獲得了更多的關注，因為它是為基于云的協作而構建的，在當今加速的遠程工作環境中，它已成為一種規范。

當今原型工具的趨勢 (Trends in today’s prototyping tools)

Today’s trends in prototyping tools are “stitch screens with wires” interaction model, accompanied by auto-animate transitions that smartly animate transitions between two screens connected. This makes prototyping super-fast and intuitive for non-tech-savvy UX designers.

原型工具的當今趨勢是“帶有線的縫合屏幕”交互模型，并伴隨自動動畫過渡，該過渡可以對兩個連接的屏幕之間的過渡進行智能動畫處理 。 對于不精通技術的UX設計人員來說，這使原型制作變得非常快速和直觀。

Currently, Sketch is the most popular prototyping tool. However, Sketch is very limited when it comes to creating transitions and micro-interactions with animated effects. This is where other tools have strengths, and all of them have some sort of compatibility with Sketch. Let’s dive in to comparisons of 8 popular prototyping tools.

目前， Sketch是最受歡迎的原型制作工具。 但是， 在創建帶有動畫效果的過渡和微交互時 ， Sketch非常有限 。 這是其他工具的強項，并且所有工具都與Sketch具有某種兼容性。 讓我們深入研究8種流行原型工具的比較。

8種原型工具的比較 (Comparison of 8 prototyping tools)

價錢 (Price)

• Sketch one time price is $99 which includes 1 year of software updates and Sketch Cloud usage. Optional renewal is available for $79/year for software updates and cloud.

  Sketch One的價格為99美元，其中包括一年的軟件更新和Sketch Cloud的使用。 可選續訂的價格為每年79美元，用于軟件更新和云計算。

• Adobe XD is free.

  Adobe XD是免費的。

• Axure is $495 for its perpetual license, or $29/month subscription.

  Axure的永久許可價格為495美元，或訂閱價格為29美元。

• InVision Studio and Craft are free, but are limited to only 1 prototype in InVision Cloud for free.

  InVision Studio和Craft都是免費的，但僅限于免費使用InVision Cloud中的1個原型。

• Principle is $129 (one time fee).

  原理是129美元(一次費用)。

• Framer X is $15/month or $144/year, based on 1 year subscription.

  Framer X的月費為15美元/月或144美元/年，基于1年的訂閱期。

• Figma is free with a Starter plan, up to 3 prototypes.

  Figma免費提供入門計劃，最多可提供3個原型。

基本的原型制作功能 (Basic prototyping features)

Because the whole point of prototyping is to quickly test concepts, ease of use and speed are critical. In most real world situations, time is very limited, so ability to quickly create a basic prototype just by connecting screens together is super convenient, and that’s all you need in most cases.

因為原型制作的全部目的是快速測試概念，所以易用性和速度至關重要。 在大多數現實世界中，時間非常有限，因此僅通過將屏幕連接在一起即可快速創建基本原型的能力非常方便，這就是大多數情況下所需的一切。

From this perspective, Sketch, Craft, InVision Studio, Principle, Figma, Adobe XD, Framer X all do great jobs with similar “stitch screens via wires” interaction models.

從這個角度來看， Sketch，Craft，InVision Studio，Principle，Figma，Adobe XD，Framer X都可以通過類似的“通過電線縫制屏幕”交互模型來完成出色的工作。

Principle creates all the transitions automatically, allowing some controls via timeline UI. This is great for creating a nice animation instantly. But it doesn’t offer the most basic “preset transitions” such as slide, push or dissolve like other tools. For this reason, Principle is positioned slightly to the right in the chart below compared to others (except Axure).

Principle會自動創建所有轉換，并允許通過時間軸UI進行某些控制。 這非常適合立即創建精美的動畫。 但是它沒有像其他工具一樣提供最基本的“預設過渡”，例如滑動，推動或??溶解。 因此，與其他(Axure除外)相比，Principle在下表中稍稍偏右。

InVision Studio also provides a timeline UI similar to Principle, but it also provides basic preset transitions, which makes it a bit easier when it comes to basic prototyping.

InVision Studio還提供了類似于Principle的時間軸UI，但它還提供了基本的預設過渡，這使它在進行基本原型制作時更加容易。

Axure uses a very different interaction model. A user has to specify and add every single interaction via Interaction Editor. Interaction Editor is a very powerful tool for building complex interactions, but lacks speed and glance-ability for basic prototyping.

Axure使用非常不同的交互模型。 用戶必須通過Interaction Editor指定并添加每個單獨的交互。 交互編輯器是用于構建復雜交互的非常強大的工具，但缺乏基本原型制作的速度和瀏覽能力。

Above chart shows how 8 tools are positioned on a price vs. ease of use plane. As you can see all the tools except Axure fall under bottom-left quadrant.

上圖顯示了在價格與易用性平面上如何放置8種工具。 如您所見，除Axure以外的所有工具都位于左下象限下。

基本的原型制作功能-動畫調整 (Basic prototyping features — animation adjustments)

This chart illustrates how much controls you have when creating a basic prototype, when it comes to sequence of multiple animations, timing and duration of animations, and ease in/out effects. Software programs are broken down into 3 groups.

該圖表說明了創建基本原型時要涉及的控件數量，涉及多個動畫的序列，動畫的時間和持續時間以及緩和/緩效果。 軟件程序分為3組。

The group in the top-left quadrant have a good balance of an overall ease of use and ability to fine-tune transitions and animations without too much work. These include InVision Studio, Principle and Adobe XD. All three do pretty good job in creating auto-animate transitions. Although similar, Principle seems to create the smoothest animations in most cases.

左上象限中的組在總體易用性和無需過多工作即可微調轉場和動畫的能力之間取得了良好的平衡。 其中包括InVision Studio ， Principle和Adobe XD 。 這三個在創建自動動畫過渡方面都做得很好。 盡管相似， Principle在大多數情況下似乎可以創建最流暢的動畫。

Figma recently added Smart-Animate feature, but currently it’s lagging compared to above three programs. Framer X can do fine-tuning but only via code. Sketch and Craft does not support fine-tuning. They only support basic preset transitions.

Figma最近添加了Smart-Animate功能，但是與上述三個程序相比，它目前滯后。 成幀器X可以進行微調，但只能通過代碼進行。 Sketch and Craft不支持微調。 它們僅支持基本的預設過渡。

Axure can do many complex interactions, but only via Interaction Editor, which is not the simplest way from basic prototyping perspective.

Axure可以執行許多復雜的交互，但是只能通過Interaction Editor進行 ，從基本的原型設計角度來看，這不是最簡單的方法。

草圖兼容性 (Sketch compatibility)

Currently, InVision Studio is the most Sketch-compatible program, which supports opening Sketch file directly as well as copy & paste objects and symbols from Sketch.

當前， InVision Studio是最兼容Sketch的程序，它支持直接打開Sketch文件以及從Sketch復制和粘貼對象和符號。

Adobe XD supports opening Sketch file directly, but copy & paste from Sketch doesn’t work. Principle can import Sketch file almost the same way as opening, but copy & paste does not work. Figma can import Sketch file but takes time. Copy & pasting a Sketch object does not work. Framer X accepts copy & pasting a Sketch object, but cannot directly open or import Sketch file. Axure can take copy & pasted Sketch object, but only via Axure plugin installed to Sketch.

Adobe XD支持直接打開Sketch文件，但是無法從Sketch復制和粘貼。 Principle可以幾乎以與打開文件相同的方式導入Sketch文件，但是復制和粘貼無效。 Figma可以導入草圖文件，但需要時間。 復制和粘貼Sketch對象無效。 Framer X接受復制和粘貼Sketch對象的操作，但不能直接打開或導入Sketch文件。 Axure可以復制并粘貼Sketch對象，但只能通過安裝到Sketch的Axure插件進行。

先進的原型制作 (Advanced prototyping)

When it comes to advanced prototyping capability, Axure covers pretty much any interactions possible to simulate how the actual product is going to feel like via Interaction Editor except voice interaction. But Axure does not support videos. (Axure supports GIF animations)

當涉及到先進的原型制作功能時， Axure幾乎涵蓋了所有可能的交互，除了語音交互之外，還可以通過Interaction Editor模擬實際產品的感覺。 但是Axure不支持視頻。 (Axure支持GIF動畫)

Framer X is another tool that has a potential to add a lot of advanced interactivity to a prototype. One of the unique advantages of Framer X is that it supports video and audio. You can even embed YouTube video and run it inside your prototype, which is pretty powerful. While Framer X has a store to download many useful components, many of advanced interactivity need to be added via code.

Framer X是另一個有可能為原型添加很多高級交互性的工具。 Framer X的獨特優勢之一是它支持視頻和音頻。 您甚至可以嵌入YouTube視頻并將其運行在原型中，這非常強大。 雖然Framer X可以下載許多有用的組件，但是需要通過代碼添加許多高級交互性。

Principle has an interesting and unique feature called Drivers, which can add various micro-interactions quickly to make the prototype look real.

Principle具有一個有趣的獨特功能，稱為Drivers ，可以快速添加各種微交互來使原型看起來真實。

Adobe XD allows you to create voice interaction, which stands out from competition in this area as no other tools support that.

Adobe XD允許您創建語音交互，這在該領域的競爭中脫穎而出，因為沒有其他工具可以支持。

Sketch, Craft and Figma are fairly basic, so does not support advanced interactivity at this point.

Sketch，Craft和Figma非常基礎，因此目前不支持高級交互性。

在手機上運行原型 (Running a prototype on mobile)

All the software programs have mobile apps to run a prototype except Framer X. Framer X is lagging in this area, where a prototype can only run inside a mobile web browser via QR Code.

除Framer X外，所有軟件程序都具有移動應用程序來運行原型。 成幀器X在該領域處于落后地位，原型只能通過QR代碼在移動網絡瀏覽器中運行。

在線共享原型 (Sharing a prototype online)

Principle falls short in this area as it does not have a cloud. In order to share a prototype in Principle, you need to either send a Principle file and have it open from Principle mobile app, or export a prototype as a Mac Desktop app to be viewed on a Mac that doesn’t have Principle app installed. This means you cannot share a prototype with Windows users.

由于沒有云，因此該領域的原則不完善。 為了共享Principle中的原型，您需要發送Principle文件并從Principle移動應用中打開它，或者將原型導出為Mac桌面應用，以便在未安裝Principle應用的Mac上查看。 這意味著您無法與Windows用戶共享原型。

第三方生態系統 (3rd-party ecosystem)

While Sketch remains strong in this area with its abundant plugins, Adobe XD and Figma are catching up. Framer X has a unique approach with its Store, which is super-easy to browse and download functional components such as YouTube Player. Moving forward, Adobe may have a powerhouse advantage in a near future, as seen in innovative new feature such as voice interaction. Many of popular Sketch plugins are already getting ported to Adobe XD too.

盡管Sketch憑借其豐富的插件在這一領域保持了強大的實力，但Adobe XD和Figma仍在追趕。 Framer X的Store具有獨特的方法，它非常易于瀏覽和下載YouTube播放器之類的功能組件。 展望未來， Adobe可能會在不久的將來擁有強大的優勢，如語音交互之類的創新性新功能可以看出這一點。 許多流行的Sketch插件也已經移植到Adobe XD。

協作能力 (Collaboration capability)

As for collaboration within a team, Principle falls short. Adobe XD and Figma offers free collaboration feature. Sketch offers a separate subscription for Team feature. Axure has a separate software that supports Team feature called Axure RP9 Team. InVision Studio offers additional subscription for Team feature. Craft uses InVision Cloud. Framer X has Small Teams plan that allows access to Team Store.

至于團隊內部的協作， Principle不足。 Adobe XD和Figma提供免費的協作功能。 Sketch為團隊功能提供了單獨的訂閱。 Axure有一個單獨的支持Team功能的軟件，稱為Axure RP9 Team 。 InVision Studio為團隊功能提供了其他訂閱。 Craft使用InVision Cloud。 Framer X具有允許進入Team Store的小型團隊計劃。

1.草圖(基于版本63.1) (1. Sketch (based on version 63.1))

Sketch is the most popular tool, a de facto standard with various 3rd party plugins. But the default transitions are minimum, animate from right, bottom, left, top only.

Sketch是最流行的工具，它是各種第三方插件的事實上的標準。 但是默認過渡是最小的，僅從右，下，左，上進行動畫。

• Pricing: $99 (includes 1 year updates, 1 year Sketch Cloud. Optional renewal is available for $79/year for software updates and cloud. )

  定價 ：99美元(包括1年更新，1年Sketch Cloud。可選更新的價格為79美元/年，用于軟件更新和云。)

• Free trial: 30 day

  免費試用：30天

• Mac only

  僅Mac

Pros:

優點：

• Abundant plugins
  豐富的插件
• De facto standard
  事實標準
• Strong symbol features
  強大的符號功能
• Smart Layout
  智能布局

Cons:

缺點：

• Limited transition animation options
  有限的過渡動畫選項
• No fine-tuning capability for animations
  沒有動畫微調功能
• No micro-interaction support
  沒有微互動支持

在移動，云上本地運行原型 (Running a prototype locally, on mobile and in the cloud)

• Clicking a preview icon on the top right corner allows you to run a prototype locally.

  單擊右上角的預覽圖標，可以在本地運行原型。

• Sketch Mirror app can mirror an open Sketch file on your Mac through the same wifi connection. To mirror a prototype on a mobile app, click Notifications on the top right of the desktop app window, and select a mobile phone running Sketch Mirror app.
  Sketch Mirror應用程序可以通過相同的wifi連接在Mac上鏡像打開的Sketch文件。 要在移動應用程序上鏡像原型，請單擊桌面應用程序窗口右上方的通知，然后選擇運行Sketch Mirror應用程序的手機。
• Uploading to a cloud allows you to share a prototype with others via a link. This is a great way to share a prototype with others and get feedback.
  上傳到云使您可以通過鏈接與其他人共享原型。 與他人共享原型并獲得反饋的好方法。

智能版式，插件 (Smart Layout, plugins)

• Smart Layout allows automatic resizing of buttons and layouts based on the text lengths.

  Smart Layout允許根據文本長度自動調整按鈕和布局的大小。

• Abundant plugins are one of Sketch’s biggest strengths compared to its competitors. All the installed plugins appear under Plugins menu, and can be disabled via Preferences/Plugins.

  與競爭對手相比，豐富的插件是Sketch的最大優勢之一。 所有已安裝的插件都顯示在“ 插件”菜單下，并且可以通過“首選項/插件”禁用。

• Rename It, one of Sketch plugins lets you rename selected layers or artboards in bulk with numbered names. Adding “%N” in Name field after your desired text string (e.g., rectangle, square, thumbnail) results in layer names with your [desired text string]+number.

  重命名它是Sketch插件之一，可讓您使用編號名稱批量重命名選定的圖層或畫板。 在所需的文本字符串(例如，矩形，正方形，縮略圖)后的“名稱”字段中添加“％N”，將得到帶有[所需文本字符串] +數字的圖層名稱。

協作—團隊功能 (Collaboration — Team feature)

• Sketch has a Team feature which allows you to collaborate. You can access this feature by logging in to your Sketch Cloud, then select Create New Team.

  Sketch具有團隊功能，可讓您進行協作。 您可以通過登錄草圖云來訪問此功能，然后選擇“創建新團隊”。

• Adding team members cost $9/month per contributor, or $99/year per contributor.
  添加團隊成員的費用為每個貢獻者每月9美元，或每個貢獻者每年99美元。

素描相關的有用墨水 (Sketch related useful inks)

• Sketch Repo

  素描回購

2. Sketch的Craft插件(基于1.0.94版) (2. Craft plugin for Sketch (Based on version 1.0.94))

InVision’s Craft plugin enables a slightly better prototyping capability directly within Sketch. These include gestures such as tap, swipe, and transitions such as dissolve, push, slide.

InVision的Craft插件可直接在Sketch中實現稍微更好的原型制作功能。 這些包括手勢(例如輕擊，滑動)和過渡(例如溶解，推動，滑動)。

• Pricing: free

  定價：免費

• Mac only (as it’s a Sketch plugin)

  僅限Mac(因為它是Sketch插件)

Pros:

優點：

• Free (if you already have Sketch)
  免費(如果您已經有素描)
• More transition controls than Sketch
  過渡控件比草圖更多
• Smart Duplicate, Data features
  智能復制，數據功能

Cons:

缺點：

• You need Sketch
  你需要素描
• Transition options are still limited
  過渡選項仍然有限
• Sticky header not supported
  不支持粘性標頭

原型菜單和工具欄嵌入在Sketch中 (Prototype menu and toolbar are embedded in Sketch)

Because Craft is a Sketch plugin, Craft menu appears as an embedded toolbar on the right side of the screen. Clicking on a circular head of a blue link arrow brings up prototype menu. Prototype options are slightly more than Sketch’s options.

因為Craft是Sketch插件，所以Craft菜單在屏幕右側顯示為嵌入式工具欄。 單擊藍色鏈接箭頭的圓形頭會彈出原型菜單。 原型選項比Sketch的選項略多。

在云端，移動設備上本地運行Craft原型 (Running Craft prototype locally, in the cloud, on mobile)

• Craft prototype is very similar to Sketch prototype. Currently a “sticky header” feature is not available.

  Craft原型與Sketch原型非常相似。 當前，“粘性標頭”功能不可用。

• A prototype uploaded to InVision Cloud can be opened in InVision mobile app to run on mobile. Only one prototype is allowed on a cloud with a free InVision account.
  可以在InVision移動應用中打開上傳到InVision Cloud的原型，以在移動設備上運行。 具有免費InVision帳戶的云中僅允許一個原型。

數據，庫存 (Data, Stock)

• Data pulls real content from a range of sources and place it directly in your design.

  數據 從各種資源中提取真實內容，并將其直接放置在您的設計中。

• Stock allows you to find and place high-resolution imagery from Getty and iStock to your design.

  使用Stock ，您可以查找和放置從Getty和iStock到設計的高分辨率圖像。

合作 (Collaboration)

Once a prototype is uploaded to InVision Cloud, clicking on “+” icon allows you to invite a person to collaborate.

將原型上傳到InVision Cloud后，單擊“ +”圖標可以邀請一個人進行協作。

Craft.io相關的有用墨水 (Craft related useful inks)

• Hide a status bar in Craft prototype on mobile

  在手機上的Craft原型中隱藏狀態欄

• InVision knowledge base

  InVision知識庫

3. Axure(基于9.0.0.3687版本) (3. Axure (Based on version 9.0.0.3687))

Axure has established its own unique place as a go to prototype tool to build a more robust, complex prototype with various interactions, not just screen-to-screen click throughs.

Axure已經建立了自己獨特的位置，可以作為原型工具來構建具有各種交互作用的強大，復雜的原型，而不僅僅是屏幕之間的點擊。

Many experienced UX designers still use Axure because you can do more, but the trend is more towards software programs with “connect screens with wires” interaction model, because that’s much faster to create simple prototypes.

許多經驗豐富的UX設計師仍然使用Axure，因為您可以做更多的事情，但是趨勢更趨向于具有“用電線連接屏幕”交互模型的軟件程序，因為創建簡單的原型要快得多。

• Pricing: $495 (perpetual) or $29/month

  定價 ：$ 495(永久)或$ 29 /月

• Free trial: 30 day

  免費試用：30天

• Both Mac and Windows

  Mac和Windows

Pros:

優點：

• Advanced prototyping capability
  先進的原型制作能力
• Can build almost any interactions (except voice interaction)
  幾乎可以建立任何互動(語音互動除外)
• Unlimited cloud
  無限云

Cons:

缺點：

• Most expensive — $495 perpetual, or $29/month.
  最貴-永久性495美元，或每月29美元。
• Does not use popular “connect screens with wires” interaction model
  不使用流行的“用電線連接屏幕”交互模型
• Font Awesome not supported in mobile app
  移動應用程序不支持Font Awesome
• Least Sketch compatibility
  草圖兼容性最低

交互編輯器和條件生成器 (Interaction Editor and Condition Builder)

• Interaction Editor allows you to add various complex interactions. Various list of events, actions and tiggers are available in Axure’s Interaction Editor to be able to create complex interactions.

  交互編輯器允許您添加各種復雜的交互。 Axure的“ 交互編輯器”中提供了各種事件，動作和老虎的列表，以便能夠創建復雜的交互。

• In Interaction Editor, Condition Builder allows conditional branching of interactions. This is basically If statement in code done visually.

  在Interaction Editor中 ， Condition Builder允許對交互進行條件分支。 這基本上是代碼中的If語句以可視方式完成。

在移動設備上在云中本地運行原型 (Running a prototype locally, in the cloud, on mobile)

• Clicking Preview button opens a browser window and runs a prototype.

  單擊“預覽”按鈕將打開瀏覽器窗口并運行原型 。

• Publishing to a cloud allows you to share a prototype easily with others to collect feedback.
  發布到云使您可以輕松地與其他人共享原型以收集反饋。
• Axure Cloud mobile app can open a project published on a cloud. Font Awesome did not render.
  Axure Cloud移動應用程序可以打開在云上發布的項目。 Font Awesome沒有呈現。

素描插件，小部件庫 (Sketch plugin, widget libraries)

• To enable copy & paste from Sketch, Axure plugin for Sketch needs to be installed in Sketch.

  要啟用從Sketch復制和粘貼功能，需要在Sketch中安裝適用于Sketch的Axure插件 。

• There are various widget libraries available to download.

  有各種小部件庫可供下載。

Axure RP9團隊 (Axure RP9 Team)

• Axure offers team (collaboration) feature as a separate product.

  Axure將團隊(協作)功能作為單獨的產品提供 。

• Subscription is $49/month per user, which is more expensive than regular license.
  訂閱費用為每位用戶每月49美元，這比常規許可證的價格更高。
• Perpetual license is $895 per user.
  永久許可為每位用戶895美元。

4. Adob??e XD(基于版本28.4.12.3) (4. Adobe XD (Based on version 28.4.12.3))

While Adobe XD entered the market late, it has a unique voice interaction feature, which no other competitors support.

盡管Adobe XD進入市場的時間較晚，但它具有獨特的語音交互功能，這是其他競爭對手所不支持的。

Its Auto-Animate feature is pretty strong and simple, however, there’s no timeline UI like Principle or InVision Studio to make adjustments.

它的“ 自動動畫”功能非常強大和簡單，但是沒有時間軸用戶界面(例如Principle或InVision Studio)進行調整。

It can directly bring in Photoshop files, Illustrator files. It can also open Sketch file directly.

它可以直接引入Photoshop文件，Illustrator文件。 它也可以直接打開Sketch文件。

• Pricing: free

  定價：免費

• Both Mac and Windows

  Mac和Windows

Pros:

優點：

• Voice interaction capability
  語音互動能力
• Can open Photoshop/Illustrator files
  可以打開Photoshop / Illustrator文件
• Free
  自由

Cons:

缺點：

• Mobile app requires uploading a file to the cloud first
  移動應用需要先將文件上傳到云
• It takes long to open a file in a mobile app
  在移動應用中打開文件需要很長時間
• Font Awesome not supported in mobile app
  移動應用程序不支持Font Awesome

原型模式-觸發和動作 (Prototype mode — trigger and action)

• Adobe XD separates Design Mode and Prototype Mode. Below screenshot shows Prototype Mode.
  Adobe XD將設計模式和原型模式分開。 下面的屏幕截圖顯示了原型模式。

• Among Triggers, Time allows a timer function. Voice is the most unique feature of XD, which is one of triggers.

  其中 觸發器， 時間允許計時器功能。 語音是XD最獨特的功能，它是觸發器之一。

• Among transitions, Auto-Animate is a pretty powerful feature that can smartly animate a transition between screens.

  在過渡中，“ 自動動畫”是一項非常強大的功能，可以巧妙地為屏幕之間的過渡設置動畫。

在移動設備上在云中本地運行原型 (Running a prototype locally, in the cloud, on mobile)

• Clicking a Play button runs a prototype locally.

  單擊“播放”按鈕可在本地運行原型 。

• A file needs to be saved to a cloud in order to run a prototype on Adobe XD mobile app.
  需要將文件保存到云中才能在Adobe XD移動應用程序上運行原型。
• An XD file saved on Adobe Cloud becomes accessible from Adobe XD mobile app. Font Awesome didn’t render.
  通過Adobe XD移動應用程序可以訪問保存在Adobe Cloud上的XD文件。 Font Awesome沒有呈現。

重復網格和語音交互 (Repeat Grid and voice interaction)

• Repeat Grid auto-copies what’s selected as you drag a handle. You can bulk-adjust margins too. It’s a smart productivity tool that works great when creating tables or lists.

  重復網格會自動復制您拖動手柄時所選擇的內容。 您也可以批量調整邊距。 這是一個智能的生產力工具，在創建表或列表時非常有用。

• Voice interaction capability is the most unique and advanced feature that Adobe XD has. Below you can see the voice prototype in action. Note that you need to hold down a screen while speaking up your voice command that you specified in Speech Playback.

  語音交互功能是Adobe XD具有的最獨特和最先進的功能。 在下面，您可以看到運行中的語音原型。 請注意，在說出“ 語音播放”中指定的語音命令時，需要按住屏幕。

共同編輯 (Coediting)

• To enable Coediting, you first need to save the document to the cloud. Once the document is saved to the cloud, Invite to Document icon gets activated. After clicking Invite to Document, enable Coediting, then send an invite.

  要啟用Coediting ，首先需要將文檔保存到云中。 將文檔保存到云后，“ 邀請文檔”圖標將被激活。 單擊邀請文檔后 ，啟用Coediting ，然后發送邀請。

• Once fellow designers are added, you see them as color-coded avatars and bounding boxes.
  添加了其他設計師之后，您會看到它們是用顏色編碼的頭像和邊框。

Adobe XD相關的有用墨水 (Adobe XD related useful inks)

• 10 Most Useful / Powerful Adobe XD Plugins (2019)

  10個最有用/功能最強大的Adobe XD插件(2019)

• Adobe XD tutorial — 4. FontAwesome

  Adobe XD教程— 4. FontAwesome

• Adobe XD: putting auto-animate to the test

  Adobe XD：對測試進行自動動畫處理

• Will Adobe XD kill Sketch and InVision?

  Adobe XD會殺死Sketch和InVision嗎？

• Adobe XD October 2018 Update: Voice Command and Playback

  Adobe XD 2018年10月更新：語音命令和播放

5. InVision Studio(基于1.26.1版) (5. InVision Studio (Based on version 1.26.1))

InVision Studio can open Sketch file, or can take objects and symbols copy-&-pasted from Sketch, and can create a more sophisticated prototype via its timeline-based transition capability.

InVision Studio可以打開Sketch文件，或者可以從Sketch復制和粘貼對象和符號，并可以通過基于時間軸的過渡功能創建更復雜的原型。

When opening Sketch files, there are a few things to keep in mind. Link layers in Edit timeline doesn’t support Sketch symbols currently. In order to achieve a smooth animation, a file may need to be optimized accordingly.

打開草圖文件時，需要牢記一些注意事項。 編輯時間軸中的鏈接層當前不支持草圖符號。 為了獲得平滑的動畫，可能需要相應地優化文件。

• Pricing: free

  定價：免費

• Both Mac & Windows

  Mac和Windows均

In order to publish more than one prototype to share online, you need subscription to InVision Cloud.

為了發布多個原型以在線共享，您需要訂閱InVision Cloud。

Pros:

優點：

• Free
  自由
• Best compatibility with Sketch
  與Sketch的最佳兼容性
• Transition adjustments via timeline
  通過時間軸進行過渡調整

Cons:

缺點：

• Sometimes buggy and sluggish
  有時越野車和呆滯
• Cloud only allows one prototype for free
  云只允許免費提供一個原型
• Sync layers does not work for Sketch symbols
  同步圖層不適用于草圖符號

互動面板和時間表 (Interactions panel and timeline)

• Selecting a layer displays Interactions panel on the right.

  選擇一個圖層會在右側顯示“ 交互”面板 。

• Timer, one of triggers, allows certain interaction to happen automatically after a specified number of seconds.

  觸發器之一的計時器允許在指定的秒數后自動進行某些交互。

• Timeline allows sequencing multiple animations in a particular order to make the overall animation easier to understand.

  時間軸允許按特定順序對多個動畫進行排序，以使整體動畫更易于理解。

在移動設備上在云中本地運行原型 (Running a prototype locally, in the cloud, on mobile)

• Clicking a Play button on the top right runs a prototype locally.

  單擊右上角的“播放”按鈕可在本地運行原型 。

• A prototype uploaded to the cloud becomes sharable with the link generated.
  上傳到云的原型可以通過生成的鏈接共享。
• Prototype on a cloud can easily be shared with others to collect feedback.
  云上的原型可以輕松地與他人共享以收集反饋。
• A prototype uploaded to the cloud becomes accessible from InVision mobile app.
  從InVision移動應用程序可以訪問上傳到云的原型。
• A prototype can be mirrored to a mobile app via QR Code without cloud, but it’s sometimes buggy.
  原型可以通過QR Code鏡像到移動應用，而無需云，但是有時會出現故障。

球隊 (Team)

To use Team feature to collaborate with other designers, you need to purchase Team plan, which is $89/month for 5 team members.

要使用團隊功能與其他設計師進行協作，您需要購買團隊計劃，這是5個團隊成員每月89美元的計劃。

InVision Studio相關的有用墨水 (InVision Studio related useful inks)

• InVision service upgrade with plans

  計劃中的InVision服務升級

• Free UI design kits

  免費的UI設計套件

• InVision Studio: A Cautionary Tale

  InVision Studio：警示故事

• InVision, valued at $1.9 billion, picks up $115 million Series F

  價值19億美元的InVision籌集了1.15億美元的F輪融資

• Is Google going to eat InVision alive?

  Google會活著吃InVision嗎？

• Advanced animation using Motion in InVision Studio | Tutorial

  在InVision Studio中使用Motion進行高級動畫制作| 講解

• InVision Inspect feature

  InVision檢查功能

• Inspect by InVision

  通過InVision檢查

6.原理(基于版本5.10) (6. Principle (Based on version 5.10))

Principle can import Sketch file directly, and can create a more sophisticated prototype.

Principle可以直接導入Sketch文件，并可以創建更復雜的原型。

Its animation is very smooth, with powerful auto-animate feature, which looks for same layer names between two screens.

它的動畫非常流暢，具有強大的自動動畫功能，可以在兩個屏幕之間查找相同的圖層名稱。

Components and Drivers feature allow you to quickly create various micro-interactions.

組件和驅動程序功能使您可以快速創建各種微交互。

However, there are a few things to keep in mind with auto-animate feature. It could automatically animate many unwanted elements in a screen depending on how layers are named between two screens. To avoid that, your may need to prepare a file in Sketch first by renaming all the layer names carefully.

但是，自動動畫功能需要牢記一些注意事項。 它可以根據兩個屏幕之間的圖層命名方式自動為屏幕中的許多不需要的元素設置動畫。 為避免這種情況，您可能需要先通過重命名所有圖層名稱來首先在Sketch中準備文件。

• Pricing: $129 (one time fee)

  定價：129美元(一次性費用)

• Free trial: 14 day

  免費試用：14天

• Mac only

  僅Mac

Pros:

優點：

• Auto-animate is very smooth
  自動動畫非常流暢

• Easy to make micro-interactions with Drivers

  易于與驅動程序進行微交互

• Works very well with Sketch
  與Sketch搭配使用效果很好

Cons:

缺點：

• Costs $129
  費用$ 129
• Auto-animate sometimes creates unintended animations
  自動動畫有時會創建意外的動畫
• Mobile app requires USB connection
  行動應用程式需要USB連線
• No cloud service
  沒有云服務

觸發器，時間線和速度控制 (Triggers, Timeline and velocity control)

• Auto option in Triggers works similar to Timer InVision Studio has, which allows things like a toast appears automatically after an action completes.

  觸發器中的“ 自動”選項的工作方式類似于Timer InVision Studio所具有的功能，它允許在操作完成后自動顯示吐司之類的內容。

• Timeline allows you to control duration, ease and sequence of certain animations, or freeze those.
  時間軸允許您控制某些動畫的持續時間，緩動和順序，或凍結它們。

在手機上本地運行的原型 (Prototype running locally, on mobile)

• Prototype preview is always open, so super-convenient to test.

  原型預覽始終處于打開狀態，因此測試超級方便。

• Connecting an iOS device running Principle Mirror app to Mac via USB cable mirrors a prototype on mobile from desktop.

  通過USB電纜將運行Principled Mirror應用程序的iOS設備連接到Mac，可以從臺式機在移動設備上鏡像原型。

車手 (Drivers)

Below shows a dynamic header that shrinks when a scroll starts, created with Drivers. As shown below, Drivers is a powerful and useful feature to build various micro-interactions.

下面顯示了一個動態標頭，該標頭在滾動開始時由Drivers創建，它會縮小。 如下所示， 驅動程序是構建各種微交互的強大功能。

原理相關的有用墨水 (Principle related useful inks)

• Principle tutorials

  原理教程

• Principle documentation: drivers

  原理文件：驅動程序

• Principle documentation: dragging

  原理文檔：拖動

• Avatar animation with Principle

  阿凡達動畫原理

• Principle principles: how not to go mad and make animation quickly and easily

  原理：如何不生氣，快速簡便地制作動畫

• A Step-by-step Guide to UI Animation with Principle and Sketch

  使用原理和草圖的UI動畫分步指南

• Interview with Daniel Hooper, creator of Principle

  原理創始人丹尼爾·胡珀(Daniel Hooper)訪談

• Principle — Continuous Interactions (Drag, Scroll, Paging)

  原理-持續交互(拖動，滾動，分頁)

• Photo App: Parallax Scrolling ? UI/UX Animations with Principle & Sketch (Tutorial)

  Photo App：視差滾動?具有Principle＆Sketch的UI / UX動畫(教程)

• Principle for Beginners (Part 2) — Using the Drivers Panel

  初學者原理(第2部分)—使用驅動程序面板

7.成幀器X(基于v50) (7. Framer X (Based on v50))

Framer X is some of newer tools. You can copy & paste Sketch symbols and elements into Framer X artboard, but you cannot directly open Sketch file. Prototyping features for average users are fairly basic, and does not have auto-animate capability. But for code-savvy users, you can use code to do more advanced prototyping.

成幀器X是一些較新的工具。 您可以將Sketch符號和元素復制并粘貼到Framer X美工板上，但是不能直接打開Sketch文件。 普通用戶的原型制作功能是相當基本的，并且不具有自動動畫制作功能。 但是對于精通代碼的用戶，您可以使用代碼進行更高級的原型制作。

• Price: $12/month (pay annually) or $15/month

  價格 ：$ 12 /月(每年支付)或$ 15 /月

• Trial: 14 day

  試用：14天

• Mac only

  僅Mac

Pros:

優點：

• Store for easy component downloads

  商店 ，方便組件下載

• Stack is a smart, powerful feature

  堆棧是一項智能，強大的功能

• Code extensibility, code handoff
  代碼可擴展性，代碼移交
• Supports videos
  支持視頻

Cons:

缺點：

• Limited Sketch compatibility (copy & paste only)
  素描兼容性有限(僅復制和粘貼)
• Basic transitions are limited
  基本過渡是有限的
• No mobile app
  沒有移動應用
• Monthly subscription ($12/month)
  每月訂閱($ 12 /月)

轉場 (Transitions)

Preset transitions are fairly basic.

預設過渡是相當基本的。

在移動設備上本地運行原型 (Running a prototype locally, on mobile)

• Clicking on Play icon opens up a window to run a prototype locally.

  單擊“播放”圖標會打開一個窗口，以在本地運行原型 。

• Framer X does not have a mobile app. Scanning a QR code opens up a browser for to run a prototype.
  Framer X沒有移動應用程序。 掃描QR碼會打開瀏覽器以運行原型。

堆疊，存儲，運動API (Stack, Store, Motion API)

• Stack is a powerful feature for creating lists and grids. Objects dropped into a Stack becomes auto-adjustable elements. Stack can be nested.

  堆棧是用于創建列表和網格的強大功能。 放入堆棧中的對象成為自動調整的元素。 堆棧可以嵌套。

• Store allows you to search and download various useful components. Video Player and YouTube Player components from the Store are super-convenient.

  Store允許您搜索和下載各種有用的組件。 商店中的Video Player和YouTube Player組件非常方便。

• For a code-savvy users, Motion API opens up various advanced prototyping possibilities via code.

  對于精通代碼的用戶， Motion API通過代碼提供了各種高級原型制作可能性。

• Web version is work in progress as below.

  網絡版本正在開發中，如下所示。

球隊 (Team)

Small Teams allows members to share components via secure Team Store.

小型團隊允許成員通過安全的Team Store共享組件。

成幀器X相關的有用鏈接 (Framer X related useful links)

• Framer X crash course

  成幀器X速成班

• The New Framer X: Initial Impressions

  New Framer X：初始印象

• Framer playground

  成幀器游樂場

• Framer X is awesome but it’s not ready

  成幀器X很棒，但還沒準備好

• Framer Cheat Sheets: Video Layers

  成幀器備忘單：視頻層

• Making a Swipeable, Draggable Card Prototype: Framer X tutorial

  制作可滑動，可拖動的卡片原型：Framer X教程

• Design Components and Stacks

  設計組件和堆棧

• Three Things to Make With Stacks using Framer X

  使用Framer X進行堆棧制作的三件事

• Team Store — Framer Crash Course

  團隊商店—成幀器速成班

8. Figma(Desktop App版本85 Build 10) (8. Figma (Desktop App release 85 Build 10))

Figma is unique in a way that it was built primarily as a web application saving it’s files to the cloud by default, even in their desktop version. Figma can import Sketch file, but could take quite some time to complete the import. Prototyping feature is fairly basic.

Figma的獨特之處在于，它主要是作為Web應用程序構建的，默認情況下將其文件保存到云中，即使在桌面版本中也是如此 。 Figma可以導入Sketch文件，但是可能需要花費一些時間才能完成導入。 原型制作功能是相當基本的。

• Pricing: Free

  定價：免費

• Starter: Free for up to 2 Editors and 3 projects

  入門：免費，最多2個編輯器和3個項目

• Professional: $12 per editor/month billed annually or $15 month-to-month

  專業人士：每位編輯器/每月$ 12美元，每年或每月$ 15美元

• Both Mac and Windows

  Mac和Windows

Pros:

優點：

• Files are saved to the cloud by default
  文件默認保存到云中
• Free up to three projects, two editors (collaborators)
  最多釋放三個項目，兩個編輯(協作者)
• Well-designed user interface
  精心設計的用戶界面

Cons:

缺點：

• Limited transition options
  過渡選項有限
• Cannot copy & paste objects from Sketch (import only)
  無法從Sketch復制和粘貼對象(僅導入)
• Free version limited to 3 prototypes
  免費版本僅限3個原型

主屏幕，原型模式，原型面板 (Home screen, prototype mode, prototype panel)

• Figma has a home screen called Drafts that displays all of your projects. Files are saved to the cloud by default.

  Figma有一個稱為“草稿”的主屏幕，其中顯示了所有項目。 默認情況下，文件會保存到云中。

• Figma has Design mode and Prototype mode, similar to Adobe XD.
  Figma具有設計模式和原型模式，類似于Adobe XD。

• Smart Animate was added in 2019 to catch up with the competition.

  Smart Animate was added in 2019 to catch up with the competition.

Running a prototype locally, in the cloud, on mobile (Running a prototype locally, in the cloud, on mobile)

• Clicking on Play button opens up a new tab and runs a prototype locally.

  Clicking on Play button opens up a new tab and runs a prototype locally .

• Clicking on Share Prototype creates a link to share with others.
  Clicking on Share Prototype creates a link to share with others.
• People who received the prototype link can view the prototype via a web browser.
  People who received the prototype link can view the prototype via a web browser.
• While a project is open on your computer AND an artboard is selected, Figma Mirror app can mirror the prototype on mobile.
  While a project is open on your computer AND an artboard is selected, Figma Mirror app can mirror the prototype on mobile.

Importing a Sketch file, plugins (Importing a Sketch file, plugins)

• Importing a Sketch file may take some time to complete.
  Importing a Sketch file may take some time to complete.

• Plugins are available from Figma website.

  Plugins are available from Figma website .

Collaboration — Share an individual file, create a Team (Collaboration — Share an individual file, create a Team)

• You can easily share your individual file with edit permission.
  You can easily share your individual file with edit permission.
• You can create a Team from Figma web UI then invite members. Team feature is free for up to 2 editors and 3 projects.
  You can create a Team from Figma web UI then invite members. Team feature is free for up to 2 editors and 3 projects.
• You can easily move your file from Drafts to a Project within a Team to collaborate.
  You can easily move your file from Drafts to a Project within a Team to collaborate.

• Team feature is free for up to 2 editors and 3 projects. Beyond that, Figma offers 2 types of paid subscription plans for more robust feature supports, Professional with $12 per editor/month, or Organization with $45 per editor/month.

  Team feature is free for up to 2 editors and 3 projects. Beyond that, Figma offers 2 types of paid subscription plans for more robust feature supports, Professional with $12 per editor/month, or Organization with $45 per editor/month.

Figma related useful inks (Figma related useful inks)

• Figma desktop version download

  Figma desktop version download

• Getting started with Figma

  Getting started with Figma

• Sketch vs Figma — Why I switched!

  Sketch vs Figma — Why I switched!

So what is recommended for beginners? (So what is recommended for beginners?)

There are three options depending on what’s important to you.

There are three options depending on what's important to you.

1: Sketch + InVision Studio

1: Sketch + InVision Studio

Given the de facto standard status of Sketch, Sketch with InVision Studio to animate prototypes makes a good choice. InVision Studio is free, but sharing a prototype requires cloud upload, which is limited to 1 prototype in a free account. And Sketch is not free.

Given the de facto standard status of Sketch, Sketch with InVision Studio to animate prototypes makes a good choice. InVision Studio is free, but sharing a prototype requires cloud upload, which is limited to 1 prototype in a free account. And Sketch is not free.

2: Figma

2: Figma

Figma is free and gaining tractions these days because of its strengths in cloud-based collaboration feature. If realtime collaboration is a high priority for you, Figma is the way to go.

Figma is free and gaining tractions these days because of its strengths in cloud-based collaboration feature. If realtime collaboration is a high priority for you, Figma is the way to go.

3: Adobe XD

3: Adobe XD

Currently, Adobe XD is the only tool that allows you to create voice interaction prototypes. XD also has Coediting for realtime collaboration. If you want to pursue voice interaction and collaboration is important for you, XD should be the choice, and it’s free.

Currently, Adobe XD is the only tool that allows you to create voice interaction prototypes. XD also has Coediting for realtime collaboration. If you want to pursue voice interaction and collaboration is important for you, XD should be the choice, and it's free.

Thank you for reading. Best wishes to your success!

感謝您的閱讀。 Best wishes to your success!