In their work, UX/UI designers will come across a plethora of different design and prototyping tools. With a vast selection of tools to choose from, where do you start? Which ones are the best, and how do you find out which one is right for you? In this article we will go over what prototyping is, why it is essential for design, and review five of the top-rated prototyping tools to help you decide which is right for you. 

What Is Prototyping & Why Does It Matter? 

Prototyping, as defined by Think Design, is "a simple model or a mockup of a concept, idea, product or service." Prototyping in its most basic form is compiling and understanding the flow of your product. Creating sitemaps in the early stages of product design can lessen the load when you begin hard prototyping by establishing a clear path of the flow of your product, while also giving you a better idea on how to organize your mock-ups within your design tool. 

When completing and presenting your product, having interactive components can reinforce the overall flow and completeness of the design to clients and stakeholders. Interactive visuals allow for a tangible experience most resembling what the final product would look and function like. 

3 Primary Types of Prototypes 

In our article, Lets Talk Wireframes, we go over the various types of wireframes that are utilized throughout your product design process. Prototyping is a large part of these phases as it gives you an interactive product design for clients and stakeholders to view, and use. 

Low-fidelity or wireframe prototypes are simple representations of the overall structure of your initial design. These can be created by hand with a pen and paper, or in a design tool for easy changes. This will give you a better understanding of how each page will function and let you see how the site will flow before adding visual elements and copy to your designs.

High-fidelity prototyping allows you to share an interactive preview of what the site will look like to clients and stakeholders. This type includes imagery, placeholder text and various different forms of interactivity throughout.

Live Data Prototype is the type that most resembles how the finalized product will look and interact. This prototype includes finalized copy, imagery, functioning user inputs, live data, and API’s (Application Programming Interface) to present a customized experience. 

Five Best Prototyping Tools For UX/UI Designers 

1. Figma 

Figma is a free and paid collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. This platform is best suited for making designing easy and accessible for collaborative teams. It allows for quick sharing and viewing access to mock-ups by editors/viewers within its files and allows for easy presentation for clients and stakeholders. Figma’s built- in "share” feature allows designers to present, and clients to view, the product in an interactive setting that most resembles what the final product would look like. 

Pros: no installation required, unique features, unlimited viewership, unlimited commenting, community resources, free tutorials, free for personal use (with exceptions), tons of plugins, native apps available for both MacOS and Windows, seamless prototyping, simplified hand-off 

Cons: free version has limited features, only works online, lacks cross collaboration capabilities 

Pricing: Starter is free forever, Figma Profession is $12 per editor/month, Figma Organization is $45 per editor/month

2. Adobe Xd 

Adobe Xd is “a vector design tool for web and mobile applications, developed and published by Adobe Inc. It is available for macOS and Windows, and there are versions for iOS and Android to help preview the result of work directly on mobile devices.” Similar to Figma, Adobe Xd has great capabilities that allow for best performance, user friendly interface and an ever-expanding set of features. One notable feature of Adobe Xd is its repeat grid functionality and allows users to create complex layouts with multiple elements fast, and easy.

Pros: included in Adobe Creative Cloud, works well cross functionally with other Adobe apps, Adobe font access, records videos for prototyping and interactive previews, collaborative plug-ins, import to photoshop, illustrator and sketch, native apps available for both MacOS and Windows 

Cons: limited 7-day free trial, registration required to view projects, limited cloud storage, co-editing feature fee for corporate, primarily a desktop design tool 

Pricing: 7-day free trial, the paid version starts at $9.99/month for individual, $19.99/month for Students and Teachers, $39.99/month for businesses-single app, $79.99/month for businesses-all apps (Adobe Xd full price breakdown) 

3. Sketch 

Sketch is “a Mac app for designers to create, team up, prototype, and more.” This web app allows for users to browse, give feedback, inspect, and handoff in any browser. Sketch is a tool for both beginner and advanced designers that offers powerful vector editing tools and hosts boolean operations. 

Pros: powerful vector editing, easy prototyping, shared libraries, opentype font support, reusable design templates, ability to design and collaborate in a single workspace, export code and presets with ease, smart layouts, gif creation capabilities, does not require internet connection to edit 

Cons: is a heavy tool and has to be run on a desktop Mac, no browser or app version, there is no repeat grid capabilities like Adobe Xd, you need plugins to get responsive design tools 

Pricing: $9.99 per editor/month *standard), $20 per editor/month *business

4. Balsamiq Cloud 

Balsamiq is a web-based user interface design tool for creating wireframes (sometimes called mockups or low-fidelity prototypes). You can use it to generate digital sketches of your idea or concept for an application or website, and to facilitate discussion and understanding before any code is written. Wireframes done in Balsamiq Cloud can be prototyped in the most basic form and allow for very few customization options. with very few customization options. 

Pros: easy to learn, integrates well to web browser, rapid prototyping, available for web and app, real time collaboration available, ability to sharing projects

Cons: few customization options, minimal prototyping capabilities even though it is fast, will need to switch to different tool for more options and customization, slows down as the you prototype more 

Pricing: $9 per month for 2 projects, $49 per month for 20 projects, $199 per month for 200 projects

5. ProtoPie 

Protopie is the easiest tool to turn your interaction design ideas into realistic prototypes. Create tomorrow’s digital experiences and test them on real displays, from smartphones and

desktops to tv and car dashboard screens. Make interaction design the epicenter of your workflow with ProtoPie. Protopie is a powerful design that gives designers the 

ability to have high fidelity prototypes with no code required. With collaborative integration directly into tools such as Figma, Adobe Xd, and Sketch, designers can make high fidelity interactions while still utilizing their preferred design tools. Other features include viewing and testing, collaborative features, sharing prototypes on real device moco-ups and much more. 

Pros: free version available, available for MacOS and Windows, advanced interaction design, high fidelity prototyping, in-app mock-up features for presentation, integrates with a large amount of apps, easy to share projects 

Cons: no real-time collaboration, need to download software to begin prototyping, slight learning curve for speedy prototyping, pricey with the features available 

Pricing: free with limitations, $67 per editor/month *includes everything in free plan with additional features, custom pricing available for enterprise 

Now that we have laid the foundation and given you some of the background, pros and cons, and pricing for our top five prototyping tools, we pass the torch to you to go out and try these amazing tools and test which works best for you. At the end of the day, learning each tool will have its own trials and tribulations, but with practice and determination we know you can master your preferred design system and make your own dent in the universe! 

References 

Think Design: Prototyping

About Figma, the collaborative interface design tool

What is Adobe XD and What is it Used for?” Adobe

Sketch.com

Introduction to Balsamiq Cloud