Prototyping is a key step in the design process. You can use wireframes, flowcharts, mockups, flow charts to help your clients understand what you have in mind before investing money in visual design work. There are lots of prototyping tools out there.
In this article, I’ve tried to gather 11 of the best free prototyping tools for you so you can test them and decide which ones you want to use on your next project.
Adobe Experience Design:
Cost:
- Free
Runs on:
- OS X
- Windows
- Android
- iOS
Prototypes for:
- All
With Adobe XD, you can draw, reuse, and remix vector and build artwork to create wireframes, screen layouts, interactive prototypes, and production-ready assets all in the same app. We can switch easily from design to prototype right within the app. Also, add interactions and transitions and share with teammates and stakeholders to test the look and feel of your design.A product coming from adobe allows integrations with several of its products like Photoshop and After Effects which is a big plus.
Designers can be more productive by just importing files from their tools of Adobe without any hassle.Clients can make comments on your prototypes when you share directly, and view designs in real time on actual devices.
Origami Studio:
Cost:
- Free
Runs on:
- OS X
Prototypes for:
- Android
- iOS
Origami was initially created by Facebook to help teams build and design products. With this prototyping tool, we can preview the mockup live on our mobile in real time using Origami Live. Also, we can show off our designs in presentations in full screen, on a number of different devices.Sketch and Photoshop designs can be imported into Origami, and your project layers will be preserved, ready to be linked, animated and transformed as needed.
You can also export your prototype components (including animations) with just one click, so engineers can copy-and-paste into the project.One of the harshest drawbacks, though, is the lack of collaboration features. There’s little in the way of commenting and viewing version histories. This prototyping tool seems more attuned to freelancers or individuals just starting out in the business.
Sketch:
Cost:
- Free trial
- $99 for full version
Runs on:
- OS X
Prototypes for:
- OS X
- iOS
- Web
WebSketch is similar to Photoshop in many ways, allowing you to edit and manipulate photos. Sketch’s Vector shapes easily adapt to changing styles, sizes, and layouts, allowing you to avoid a lot of painful hand-tweaking. Sketch’s fully vector-based workflow makes it easy to create beautiful and high-quality artwork from start to finish. In UI design, repeating elements is something very common: buttons, bars, bubbles — all sorts of things; and these reusable elements can be automatically copied and pasted using the sketch app.
Axure:
Cost:
- 30-day Trial — Free
- Pro — $29/month ($495 to purchase)
- Team — $49/month ($895 to purchase, per user)
- Enterprise (includes on-premise solutions) — $99/month
Runs on:
- OS X
- Windows
Prototypes for:
- All OS’s
Axure provides powerful prototyping without the need for coding. It provides features like:
– Dynamic content for providing hover functions if present.
– Conditional flow statements for checking conditions
– Math functions like adding or removing from cart which reflects the amount
– Data-driven sorting
– Adaptive views for sizing the screen depending on the screen size
– Animations on the prototype can also be catered.
It also makes sharing a prototype to be viewed by your team or client very easy with the click of a button. Also, Axure RP will publish your diagrams and prototypes to Axure Share on the cloud or on-premises. Just send a link (and password) and others can view your project in a browser.
Webflow:
Cost:
- 2 Unhosted projects — Free
- Personal — $16/month
- Pro — $35/month
Runs on:
- Web
Prototypes for:
- All
Webflow’s main selling point is that it provides such robust functionality without the need to write a single line of code. Webflow is heavily focused on web animations, interactions, and responsive web design. Although you can only build, design, and publish the entire site using the visual-based UI.After you refine your UI mockup how you like it, you can turn into a production-ready site with just a click. These features appeal to independent designers, who now have the option to export the prototype without needing developers on-hand.
You can either host your prototype with Webflow or export the code in clean HTML, CSS, and JavaScript. You can also start with a blank canvas and choose one among the hundreds of ready webflow templates.
Mock flow
Based on the Adobe Flash platform, Mock Flow is another free wireframing tool at your service. It offers tons of features, including preset buttons, images, graphs, and pre-made templates for your convenience. Plus, it has a built-in revision control and team chat to collaborate with other developers on the team.
The tool provides complete freedom of creativity in designing mockups for iOS, Android, Web, and wearables. In a matter of minutes, developers will have finished wireframes for websites or apps in various themes shareable as PNG, HTML, PDF, or PowerPoint.
Additionally, WireframePro is a product of Mock Flow that allows designing of interactive wireframes, and collaborate on projects. The developers can even create sitemaps for the pages created and export them in any format.
The free plan for the Mock Flow wireframing tool offers one design license with one design project.
InVision
InVision offers a variety of tools for creating engaging interactive prototypes, and like many of the platforms covered here it operates on a paid basis but with a free version. In this case, the free version of InVision restricts you to just one prototype, but as is the case with Figma, there are free upgrades available for students.
Turning static designs into clickable prototypes is nicely straightforward with InVision; you can click and drag hotspots onto your creations to simulate click or hover actions, add links to other screens in your prototype, and simulate real-life interactivity by using gestures for transitions. And it’s similarly easy to share your work; prototypes can be opened in the browser or on mobile, and InVision’s LiveShare feature means that you can also present prototypes in real-time.
Vectr
Built as a free cross-platform vector design app, Vectr also works very well as a free prototyping tool. While it’s maybe a little slim on features compared with other vector apps, it’s designed to be easy to pick up and play with, and after following a few tutorials (there are plenty to get stuck into on the Vectr site) you’ll be ready to start designing.
One really useful collaboration function is its link sharing option; with that you can send a link to others and they’ll be able to watch you edit in real-time and provide quick feedback. And once you’re done, your finished design can be exported as a JPG, PNG or SVG.
Framer:
Cost:
- Free Trial (14 days)
- $15/month
Runs on:
- OS X
- iOS
- Android
- Windows 10 Mobile
Prototypes for:
- All
Framer is one of the most popular prototyping tools. It’s based on the premise that with the code it is possible to prototype anything, resulting in novel and beautiful designs. It provides a seamless workflow, further complemented by device previewing, version control and easy sharing.In case you do not understand, Framer has a very well structured documentation. Also, there are plenty of how-to videos and courses on Udemy and O’Reilly about the UX prototyping tool. It offers a first-hand view of how flexible and powerful code can be.
Like other tools, Framer supports Sketch, Photoshop projects, and will also preserve your design’s layers.In addition to this, Framer’s Mac App is well designed and provides live previews as you write code, which is encouraging for those who are writing code for the first time. You can also import graphics directly from Sketch, Photoshop or Figma.
Principle:
Cost:
- Free Trial
- $129 for full version
Runs on:
- OS X
Prototypes for:
- iOS
- OS X
- Watch OS
Principle is built for OS X and comes with an iOS app to mirror live prototypes. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. The app appears very much like the UI of Sketch including other familiar aspects of alignment, art board creation, and screen connections, plus real-time previews. You can also mirror your designs on an iOS device.
While Principle does not provide collaboration for teamwork, this drawback will likely be overshadowed by its offline capabilities. The flexibility of working offline is further highlighted by increased speeds since you’re not relying on a potentially unreliable or slow connection.
Just in mind:
Justinmind’s powerful prototyping tool is available to download for free, but to get the full set of features you’ll need to sign up for a paid subscription. However, for more basic projects Justinmind also provides a wireframing tool that’s free forever and allows you to create unlimited prototypes, pages and users for both web and mobile apps.
During your 15-day trial period you’ll get access to more advanced functionality, such as advanced web interactions and mobile gestures, plus effects, transitions and animations, so you might feel inclined to pay up for the full feature set once the trial period runs out. By then, though, you’ll have got an idea of whether Justinmind will pay for itself as a prototyping tool.
Cost:
- $19/month
Runs on:
- OS X
- Windows
Prototypes for:
- Web
- iOS
- Android
Another popular prototyping tool, JustInMind is known for creating high-quality work, although at a very steep cost. Another big plus is that it can be downloaded on your computer for offline work anywhere. If you’re new to this tool it comes packed with tutorials and guided videos for everyone from beginner to expert.Export your prototype to a fully functional HTML document and make it readily available to view in any web browser. Also, it provides you access to use items from UI libraries and download numerous add-ons.
Balsamiq Mockups:
Cost:
- 30-day Free trial
- Web app — $12/month
- Single User — $89
- Volume License — Varies by number of users
Runs on:
- Web
- OS X
- Windows
Prototypes for:
- Web
- iOS
- Android
Conclusion
Prototyping is a process of building a model of your product with the help of a software. Rapid prototyping helps to simplify complicated processes and projects by reducing many months of work into a few days. Today I share with you some free tools to help you create prototypes for desktop, mobile apps, website and from any platforms.