10 Tools for Rapid Prototyping — Design Files

10 Tools For Rapid Prototyping

There are a lot of prototyping tools on the market and it is easy to be confused about which of them will work for you the best. That's why we've taken a look at the most popular prototyping workflows and highlighted pros and cons for each of them.

We chose Figma, Sketch, Marvel, Invision (web), Invision Studio, Protopie and Framer and linked a couple of demo screens from Platforma iOS Wireframs using the aforementioned software.


Figma

Figma is a rising star among modern design tools and it definitely has a big future. One of its main advantages is that it provides realtime online collaboration for your team. This allows you to quickly fix and iterate your prototypes in no time. Moreover, Figma is cross-platform and has iOS and Android apps to demonstrate your design.

Figma works out of the box and has a relevant functionality for design and prototyping so you don't need to integrate anything additional, though you can connect it to Principle on Mac.

However, you should keep in mind that you could only open Figma when you have the internet connection, since its a browser app.

To create a link, go to the Prototype tab on the right panel, select the layer you want to use as a hotspot and note the blue circle on the right side of the select box. Click and drag it to a destination screen.

Sketch

For the last couple of years, Sketch remains a standard classic as a user experience design tool. You can connect screens with hotspots and test your prototype on an Apple device or upload the project to the web using a web platform called Sketch Cloud.

The downside is quite drastic: every time you update your prototype online, you have to sync the whole project or use side services such as Invison or Marvel.

Also, you are able to work with prototypes locally and monitor them in a window or Apple device. It is important to carefully control all the hotspots to avoid broken links.

To make a link, select a layer you want to use as a hotspot, press W and point to a destination screen. Then, press Cmd + P to Preview Prototype.

Principle

Principle is a powerful yet simple keyframe-animation tool for Mac OS. It is quite popular among designers. It fits well if you use Mac and want to record a demo video or show a prototype locally on your Mac or iPhone.

Unfortunately, Principle doesn't allow to upload the prototype online, though it allows you to save a transition as a video or GIF.

First, import your design from Sketch using File → Import from Sketch. Second, to make a transition click a lightning icon of a layer you want to use as a hotspot, and point to a destination screen. Choose interaction, for example, Tap.

Craft and InVision

Sketch supports plug-ins which allow you to integrate it with side applications like InVision. It is a widely popular web-platform where you can upload your design.

On one hand, it is better then uploading the whole project to Sketch Cloud. On the other hand, you have to use Craft plugin to sync screens, which literally runs a whole browser inside Sketch. Craft has a Prototype mode which allows you to use layers from your design as hotspots. It saves time as you don't need to draw hotspots manually.

Unfortunately, the screens should be uploaded manually which is very time consuming for a designer. When I used Craft in 2017, it was a disaster. It was heavy, slow and updated every few days. That's why I decided to stop using InVision completely and moved to Marvel.

To create a link, switch to Prototype mode by clicking Prototype icon on Craft panel. Then select a layer you want to use as a hotspot and press C to make a link.

Marvel

Marvel is a web service like Invision, but it is more stable, syncs faster and has a lightweight plug-in. If you use Sketch, tired of Craft and need to make a quick web-prototype, Marvel is for you.

Like Invision, it allows you to upload screens and make hotspots between them.

Downsides: You still have to upload the updated screens manually and check the links. Marvel supports import of your native hotspots from Sketch. This workflow seems to be clunky nowadays in comparison to, for example, Figma.

Just make a link from screen A to B in Sketch and export both screens to Marvel web platform using Marvel plugin. Also, you are able to draw hotspots manually by clicking and dragging them.

InVision Studio

Let's imagine you use InVision Studio to create your design. Like Principle, it allows to set precise keyframe animations inside the product which is similar to Sketch. Sure, you are able to upload the screens to Invision.

You can open Sketch file in Invision Studio. Like in Craft, click a layer you want to use as a hotspot and press C to make a link.

Adobe Xd

Xd is a fast-growing product by Adobe which is similar to Sketch. So far, it allows you to make prototypes and use them on mobile devices. If you need to make a web-prototype, you still have to upload screens to Adobe Cloud. However, soon XD is going to allow real-time collaboration and it will make web-prototyping a lot easier.

Downsides: No Sketch and Figma export.

To make a link, select a layer you want to use as a hotspot, then go to the Prototype tab on the left. Click and drag the blue arrow on the right of the select box.

Protopie

Protopie is a new promising prototyping tool which is available for Mac OS and Windows. It is similar to Principle and allows importing your design from Sketch, Figma and XD. It fits for prototyping micro-interactions and animated transitions between screens.

Firstly, import your artboards from Sketch as new scenes. Secondly, click a layer you want to use as a hotspot and add a new Tap trigger by pressing a button on the right panel. Then, click Plus button below the new trigger and assign action the trigger should cause. Choose Jump and select a destination scene.

Overflow

It is a Mac-only tool for UX designers which is similar to Sketch. Overflow could be useful if you need to create a user flow or mindmap. All links in it are visual and it makes Overflow a good presentational tool which puts it up there with InVision and Marvel. You can work locally or upload your project to Overflow web platform.

The downside is the same: you need to sync your every edit manually.

Import your design from Sketch, Figma or XD. Hover over a layer you want to use as a hotspot till you see pink arrows. You are able to choose which way your link shoud point from the start. Click and drag one of four arrows and let it go over a destination screen.

Framer X

As opposed to other tools, Framer has no limits in terms of screen interaction and allows you to go as deep and crazy as you need.

For the last few years, Framer was used mainly for animation prototyping, but Framer X aims to provide tools which enable users to work with it as a primary design tool. Framer allows you to do everything that Javascript does. The only limit is your time.

First, Copy your artboards from Sketch and paste them to Framer X using Cmd + C and Cmd + V. The layer structure should be saved. It will only work if you have Framer X Sketch import plugin. Choose the desired layer and press L to create a link. Point to a destination frame.

Conclusion

All these ways to prototype are good and it's up to you which way to choose. There are no strict rules on how to prototype and we encourage you to experiment and find the best workflow for you.