6 best free prototyping tools

[Rss Bot 1]

Whether you're designing website or apps, prototyping is a vital part of the design phase that enables you and your clients to get an idea of what you're building and how it feels to use. A good prototype can save you countless hours of explaining features and gathering feedback, and with the right tools you can quickly iterate and fix any potential problems before moving to production and user testing. 

Established studios will already be set up with one or more of the top prototyping tools, but if you're just getting started and cash flow is a problem, you might be reluctant to spend money that could be used elsewhere in your business. Thankfully there are some great free options out there, from free versions of paid services through to completely free prototyping tools that do much of what premium services offer. Here are six of the best to try out.

• 8 essential tools for UI prototyping

01. Origami Studio

Origami's a Mac-only tool developed at Facebook

Developed at Facebook as a tool for building and designing products, Origami is available free for Mac users. You need to be a registered Apple developer to get started, with Xcode and Quartz Composer installed, but once you've jumped through the necessary hoops you'll find that it's easy to start creating with Origami, thanks to a wealth of online documentation, tutorials and ready made prototypes.

You can import designs from Sketch and Photoshop with project layers preserved, and create concepts with simulated scrolling, taps, swipes and page links. As well as mobile apps you can also use Origami to create responsive websites with features such as text input and drag and drop, and once you're finished it's easy to export prototypes to be added to projects.

02. Webflow

Webflow gives you two free projects to get a taste for its abilities

Webflow has plenty of paid plans on offer for all team sizes, but if you're looking for a taster then there's a free option that will do a great job of getting you started, allowing you two projects, client billing and free staging, but no code export or project transfer option. 

With a visual CMS you can create dynamic, responsive prototypes without having to write any code, and it comes with a library of templates and components to make it even easier to build your projects. Prototypes can be connected to over 400 services including Slack, Google Drive and MailChimp, and if you get stuck there's a wealth of online documentation to help you out.

03. Vectr

Here's a vector design tool that's great for prototyping and gathering feedback

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.

04. Justinmind

Justinmind's free wireframing tool gives you plenty of options to play with

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.

05. Figma

The free option from Figma is brilliant for collaborative creation

For anyone wanting to work collaboratively on their prototypes, Figma is a brilliant solution. It enables designers to work together in real-time and also makes it easy to share works-in-progress with clients and stakeholders, and crucially it enables you to build prototypes that feel like the real deal, complete with interactions, animations and dynamic content overlays.

While the professional versions of Figma are paid-only, there's a free starter version that's ideal for getting up to speed with its tools. It allows for up to two editors and three projects, with unlimited cloud storage and a 30-day version history, making it perfect for getting up and running. If you're a student, though, it's worth knowing that you should qualify for free access to Figma's professional plan, giving you unlimited project and much more.

06. InVision

InVision makes it simple to turn flat designs into clickable prototypes

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.

Related articles:

• 8 essential prototyping and build tools
• How to avoid prototyping pitfalls
• The 20 best wireframe tools

View the full article