UX designers and software engineers are fortunate to have many prototyping tools for bringing their ideas to reality. The question is, which prototyping app is best for you? To find the best prototyping apps we compare Figma and Sketch apps, along with Adobe XD, and Balsamiq. Together these are the four most widely used prototyping apps.

In this article we compare similarities and differences between four major prototyping tools: Figma, Sketch, Adobe XD and Balsamiq mock-ups. The first three of these are high-fidelity prototyping apps, with Balsamiq being the sole low-fidelity app in this comparison.

The features of these applications change rapidly, as they are offered as software-as-a-service. Some features missing at the time of this writing could have been added in a future revision as each developer continues to update their apps.

What is prototyping

The point of prototyping is to provide a method for you to quickly demonstrate an idea, workflow, or entire experience. It should be noted that your first prototype should not involve an app at all but should include sketches that you can convert into a paper prototype. This is the fastest most iterative method to start with. A paper prototype does not require tools and has no learning curve. Once you have sketches complete, it makes the process of completing your prototype using a software tool more efficient. A paper prototype is the most efficient way to start a prototype, and you can then move to digital prototyping apps.

About our evaluator and methodology

This article is written by Jennifer Smith, a working UX professional who is enrolled in graduate program (Master's degree) in computer-human interaction. The author uses prototyping apps daily for creating software designs, interfaces, and apps, and also teaches prototyping courses.   

Balsamic Mock-ups

Balsamiq mock-ups creates a sketchy look and feel which is where the times savings comes into play. Your team will not expect exact pixel placement or color selection, so it takes that pressure off. Since you can link from one mockup to another you can interactively demonstrate your overall information architecture and structure. You can share a clickable PDF right out of Balsamiq Mock-ups for others to share, test and comment on.

Balsamiq favorites

Premade UI elements

• Many of the UI elements are already created, so you can simply drag and drop them on the screen.

• If you are missing a UI element you can make your own and add it as an asset.

• There is also a community of users who are happy to share UI elements through Wireframes to go.

Super simple workspace

• Create mockups for your pages that can be linked to each other

• Use the properties inspector, on the right, to customize UI elements that can be dragged on to your screen

• Create reusable elements as symbols

• Find almost any icon you need.

• Export your working interactive prototype as a clickable PDF.

Balsamiq mock-ups includes icons.

Drag and drop UI objects right on to the screen.

High-fidelity prototyping apps

If you are searching for prototyping tools, you may have found there are many options. These apps often work in a similar manner, so the choice you make should be based upon your workflow and compatibility with others on your team. If you are working independently, you still want to be able to easily share files with your clients and developers, and will need compatibility with them.

Sketch, XD, and Figma Similarities

Simple clean design

These applications were built from the ground up so there is not a large amount of legacy features hanging around. They are easy to navigate and non-distracting in their design.

Vector based

All three of these prototyping tools are vector-based applications. This means that the UI elements you build are scalable and can be edited relatively easily. For Adobe Illustrator users, this means the learning curve is a little easier.

Allow you to build re-usable objects

Using a button 400 times in your design, no worries. In Sketch, XD, and Figma you can create one component, or symbol and dynamically use instances. These instances can be updated all at once or broken apart from the original object.

Ability to create scrolling screens

All three of these tools enable you to create screens that scroll. The scrolling can be demonstrated by swiping in the prototype previews.

Libraries

All three apps allow you to build a library of branding elements that you can share. Sketch, XD, and Figma have online solutions. Sketch is unique in that you can save your library to your own shared server. This makes a difference for organizations that don’t want to post marketing information in the cloud on a server they do not control.

Linking capabilities for prototypes

All three prototyping tools allow for the creation of links. Links from one artboard (XD, Sketch) or Frame (Figma) to another. XD and Figma offer comprehensive animation controls that you can include with the linking. Sketch is rather limited unless you find a plug-in that you feel comfortable using.

Availability of plug-ins

Sketch, XD, and Figma can all have their features expanded by loading plug-ins. Plug-ins may provide additional features as simple as providing lorum ipsum text to converting your layout to code to make it easier for your developers to run with your design.

Ability to share

All three applications offer you the opportunity to share clickable prototypes in html so that clients, or others on your team who don’t have these tools can simply click on a link to review and use your prototype.

Opportunity to share preview and accept comments

Sketch, XD, and Figma all allow you to save a preview in HTML format that you can share and use to receive comments from others.

Sketch for prototyping

Sketch is an early favorite that has incredible features that make it easy to automatically scale your layouts and organize reusable UI elements and share them in the form of a library. You can save combinations of styles for just about anything including type, objects and more. Keep in mind that at the time of this writing Sketch only works on the Mac, so you Windows users might have to switch platforms or switch to a solution from XD or Figma.

Sketch Favorites

• Although there are no pre-created UI elements in sketch many are available in the form of UI kits and libraries.

• Users can create complicated UI elements that include gradients, multiple fills, borders effects and more and save them in one dynamic style. Saving combined properties is a huge time saver when you want to remove the border from fifty items at once. Both XD and Figma lack this feature at the time of writing.

• Using automatic layout features in Sketch is a breeze. Create stacks of UI elements and automatically resize your layout as they grow or are removed. This is a huge timesaver for those who create templates for others on their team to use.

• Original reusable elements (symbols) are automatically separated to a different page from your design when created. Making organization a much easier process.

• Great collaboration solutions through Sketch teams. Create shared libraries that are well-organized and easy to implement.

Sketch cons

• Only works on Mac

• Limited animation capabilities unless you use plug-ins

Adobe XD for prototyping

Experience Design (XD) Works much like other Adobe apps. This means an easy transition for those using other Creative Cloud apps.

XD favorites

• XD works on both the Mac and Windows platforms.

• Vector tools work very much the same as Adobe Illustrator which means transfer of skills is fast.

• Although there are no pre-created UI elements in sketch many are available in the form of UI kits and libraries.

• Incredible animation features. Have a menu slide out using easing controls, add a bounce, or create your own custom animation from one artboard to another.

Auto-animate is easy to implement.

• Repeat grid is an amazing feature that allows you to quickly repeat elements by simply expanding its container. You can edit and add elements to the grid at anytime to update all the repeated elements at once.

• You can replace the images and text in a repeated grid by simply dragging and dropping content from your finder. Like a selection of images or text files.

• Easily create modal windows and overlays using the Overlay feature.

Click and drag to repeat selected elements in XD.

XD Cons

• No easy automatic method to separate original components on the canvas from the rest of the design.

• No easy naming structure for components, although you can create named groups and subgroups to find your assets easier.

• Libraries are stored on the Adobe Cloud. For some companies this isn’t an option.

Figma for prototyping

Figma works similarly to Sketch and XD but is very popular now because of several factors. It is available as an online app, or you can download it to your desktop.

• Works on both Mac and Windows platform

• Has advanced prototyping features that include animation

• Includes variable feature to make creating alternate reusable components more efficient

• Very simple auto-layout feature to build flexible layouts

• Great collaborating tools

Figma favorites

Flexible containers

Figma uses frames instead of artboards which are more flexible and can be nested inside other frames easily.

Easy auto-layout implementation

Incredibly easy to use auto-layout features to make building complex layouts a breeze. Build frames that auto expand and contract as you add or delete content. 

Built-in animation features

Many choices of animation in the prototyping tools. Makes it easy to simulate a menu appearing, rollover effect or more.

Animation is included with prototyping feature.

Inspection of code is built-in

No need for plug-ins, or exports to see CSS code. This inspection view is available right in the app.

Inspect code directly in Figma.

Preview on device

You can preview your prototype in the device. Just pick a device in the Prototyping panel and your app will preview using that as a container.

Easily organized libraries

Create components using the slash “/” in the name to categorize. This is like Sketch, but it does not automatically send the components to a new page.

You can import Sketch and XD files into Figma

You can open file from both XD and Sketch in Figma. The transition is pretty good, and you can continue to create your UI in Figma.

Figma Cons if transitioning from Sketch

• Workspace is a little “Different” 

• If you are used to pressing Ctrl/Cmd+0 to open a file you will soon discover that you import files to open them. Even if they are a Figma file.

• You think you are working on a saved file because you saved it locally, but you are working on the “cloud version”. Fortunately, there is version control in case you accidently overwrite a file.

• Panels need to be closed before moving on. For instance, you select Fill, and apply a fill color to an object. You are stuck until you close the Fill panel. This is annoying if you are used to the interactions in the Creative Cloud apps where panels can remain open while you work.

• Figma’s solution for organizing components is better than XD’s but Sketch makes creating a separate page with categories much easier.

American Graphics Institute has put together this high-level description to help you to understand the differences between Figma, Sketch, XD, and Mock-ups. AGI staff are happily using all these apps, but always start their process with paper prototypes.