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 most popular UX prototyping tools including Sketch, Craft, Axure, Adobe XD, InVision Studio, Principle, Framer X, andFigma. First, it compares key aspects such as price, basic prototyping features, Sketch compatibility. Then it covers a high-level overview of each software program in terms of pros and cons and uniquenesses.
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.
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.
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.
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.
Comparison of 8 most popular prototyping tools
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.
Adobe XD is free.
Axure is $495 for its perpetual license, or $29/month subscription.
InVision Studio and Craft are free, but are limited to only 1 prototype in InVision Cloud for free.
Principle is $129 (one time fee).
Framer X is $15/month or $144/year, based on 1 year subscription.
Figma is free with a Starter plan, up to 3 prototypes.
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.
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 compared to others (except Axure).
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.
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.
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.
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.
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.
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.
Axure can do many complex interactions, but only via Interaction Editor, which is not the simplest way from basic prototyping perspective.
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.
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.
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)
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.
Principle has an interesting and unique feature called Drivers, which can add various micro-interactions quickly to make the prototype look real.
Adobe XD allows you to create voice interaction, which stands out from competition in this area as no other tools support that.
Sketch, Craft and Figma are fairly basic, so does not support advanced interactivity at this point.
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.
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.
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.
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.
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.
Pricing: $99 (includes 1 year updates, 1 year Sketch Cloud. Optional renewal is available for $79/year for software updates and cloud. )
Free trial: 30 day
De facto standard
Strong symbol features
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.
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.
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.
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.
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.
Adding team members cost $9/month per contributor, or $99/year per contributor.
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.
Mac only (as it’s a Sketch plugin)
Free (if you already have Sketch)
More transition controls than Sketch
Smart Duplicate, Data features
You need Sketch
Transition options are still limited
Sticky header not supported
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 that Craft has are slightly more than Sketch’s options as below.
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.
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.
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.
Once a prototype is uploaded to InVision Cloud, clicking on “+” icon allows you to invite a person to collaborate.
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.
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.
A file needs to be saved to a cloud in order to run a prototype on Adobe XD mobile app.
An XD file saved on Adobe Cloud becomes accessible from Adobe XD mobile app. Font Awesome didn’t render.
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.
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.
Once fellow designers are added, you see them as color-coded avatars and bounding boxes.
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.
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.
Both Mac & Windows
In order to publish more than one prototype to share online, you need subscription to InVision Cloud.
Best compatibility with Sketch
Transition adjustments via timeline
Sometimes buggy and sluggish
Cloud only allows one prototype for free
Sync layers does not work for Sketch symbols
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
Principle can import Sketch file directly, and can create a more sophisticated prototype.
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.
Pricing: $129 (one time fee)
Free trial: 14 day
Auto-animate is very smooth
Easy to make micro-interactions with Drivers
Works very well with Sketch
Auto-animate sometimes creates unintended animations
Mobile app requires USB connection
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.
Timeline allows you to control duration, ease and sequence of certain animations, or freeze those.
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.
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.
Starter: Free for up to 2 Editors and 3 projects
Professional: $12 per editor/month billed annually or $15 month-to-month
Both Mac and Windows
Files are saved to the cloud by default
Free up to three projects, two editors (collaborators)
Well-designed user interface
Limited transition options
Cannot copy & paste objects from Sketch (import only)
Free version limited to 3 prototypes
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 has Design mode and Prototype mode, similar to Adobe XD.
Smart Animate was added in 2019 to catch up with the competition.
Running a prototype locally, in the cloud, on mobile
Collaboration — Share an individual file, create a Team
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 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.
There are three options depending on what’s important to you.
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.
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
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!
Wacom stylus is great for hand drawing sketches if you can afford it.
iPad with Apple Pencil is nice too.
But Wacom top-of-the-line products with a large display could cost a few thousand dollars. And Apple Pencil plus iPad Pro are almost $1000.
If you already have MacBook Pro, it has a fairly large trackpad.
And surprisingly, any affordable capacitive stylus works on a trackpad. Some of capacitive styluses are under 10 dollars, which is very affordable compared to Wacom or Apple Pencil.
Now a capacitive stylus on a trackpad is definitely not perfect. In fact you need to get used to three things:
1) pressure, 2) angle, and 3) registration.
You have to get used to applying light but enough pressure on a trackpad to make the stylus register its relative position on screen with relatively up-right angle.
This is quite different compared to when using your own finger. With your own finger, you hardly apply any pressure to the trackpad. It just works without you noticing it as soon as you put your finger on the surface of a trackpad.
But with a capacitive stylus, you need to consistently apply a light pressure to move around a cursor on screen. Then, once you want to draw a line, you apply more pressure to make the trackpad “click”.
For example, when you draw a circle with a stylus, as long as you are drawing a continuous line, everything is fine, the line keeps get drawn as you move the stylus with a firm pressure.
Now once you finish a stroke, and want to draw the second stroke, that’s when you need to register your stylus’s starting position.
When using a trackpad, you are actually doing this by moving around your index finger to find out where your cursor is on a screen. But while we are used to this behavior with a mouse or a trackpad, doing the same thing by applying a light pressure to a stylus feels quite different.
So basically with a capacitive stylus on a trackpad, you end up drawing on a trackpad continuously, sometimes drawing with light pressure, other times drawing with firm pressure. The only thing is that when you are drawing with light pressure, you are actually not drawing, but just moving around the cursor.
This is where more expensive solutions like Wacom and Apple Pencil on iPad provide better experience, so that you don’t need to worry about registering a new position of a stylus on a screen.
With Wacom stylus, it continuously registers the pen position even when a pen is off screen.
With Apple Pencil + iPad, you don’t have this problem because it’s a touch screen.
So if a precise control is super important for you and you can afford it, it’s definitely better to get Wacom or Apple Pencil.
But for more casual users, a capacitive stylus on a trackpad is a good affordable solution once you get used to it.