The top 6 prototyping tools for UI and UX designers - Heart Internet Blog - Focusing on all aspects of the web

Prototyping, more than ever, is playing an increasingly vital role in the product design process, and has now become an essential part of the workflow for modern-day UI and UX designers.

The prototyping tool landscape has changed considerably in recent times, and we have become a little spoilt with the influx of tools now at our disposal. The design and development community is still debating whether we’ve hit a saturation point but, personally, I think having all this choice is no problem. One size doesn’t fit all, right?

Just choose one that eases into your workflow, and feels the most comfortable fit for the project at hand. Some folks (including myself) have a preference for desktop-based tools, others side more with cloud-based platforms (which are gaining in popularity). You don’t have to stay locked into one tool throughout the duration of a project. Myself and many other designers happily use a combination of these tools in our daily workflow, and you can too.

I will cover just a handful of prototyping tools that I use on a regular basis, and have spent a great deal of time with, as well as those that I’ve at least given a good run-out when looking for a suitable companion tool for a project.

Flinto

Screenshot of the Flinto prototyping tool home page

Flinto for Mac allows you to create small interactions, and animations, all the way through to building comprehensive flows for multi-screen apps. It follows a similar aesthetic to the design tool Sketch, and even offers up similar features to what you can find in the aforementioned tool. Heck, it even has some of the same keyboard shortcuts. It’s as though they were cast from the same mould, and that’s always a bonus.

It’s intuitive for beginners, and a breeze to use when you’ve become accustomed to it, with menus, tools, and options kept to a minimum. Enough to enable you to create impressive prototypes, and avoid venturing into the world of ‘feature overload’ which becomes an unwelcome distraction.

The key features of Flinto are the Transition, and Behaviour Designer. If you’re the type of creative who has an aversion to timelines and coding, these awesome features will bring a very big smile to your face. It’s a powerful beast, and the precise control you have over each layer enables you to create some very complex transitions, and animations, which are then reusable throughout your project.

Principle

Screenshot of the Principle prototyping tool home page

Principle shares many similarities to Flinto. The first, and most obvious of those, is the Sketch aesthetic that it mirrors. Even more so than Flinto. That’s always a plus in my book and just enables the transition from Sketch, and makes the tool a little less daunting.

Principle is one of a few prototyping tools that have focused more on the ‘timeline’ route of creating transitions, and interactions between your Sketch screens. Some folks enjoy that method of working, others prefer to use a more visual approach with something like the Transition Designer in Flinto, or the Auto-Code approach inside of Framer. Either way, out of the ‘timeline’ focused tools I’ve tested, Principle is the most intuitive.

Principle allows you to easily create flows for multi-screen apps, or just focus on micro-interactions, and it is very competent at both. Its UI lacks a little polish compared to some of the other tools in this list, but the capabilities of the tool far outweighs something as minor as that.

Framer

Screenshot of the Framer prototyping tool home page

Framer is a little different from the tools that came before it. The key reason being that you’re going to have to get your coding hat on (to a point) to achieve results inside of it. But even if your role is solely as a designer, don’t go running for the hills right away, as Framer is an approachable prototyping tool even for the uninitiated.

With Framer, designers can create, and manipulate objects with ease, while still retaining the power and flexibility of what hand-coding can bring you. It truly excels is in its ability to allow you to create the most detailed of interactions for designs that you’ve created in Sketch. The depth of the interactions you create inside of Framer are only limited by what you can imagine, and puts it a few rungs up the ladder compared to prototyping tools that are more linear in their nature. And with the inclusion of recent features like Auto-Code, the entry level to Framer has been lowered considerably.

Origami Studio

Screenshot of the Origami Studio prototyping tool home page

The team at Facebook Design went back to the drawing board and came up with a new, and improved entry into the prototyping tool category with Origami Studio. It’s a different beast compared to the rest of the tools found in this list and some folks take to it, and others may be initially confused by its Patch-based method of creating interactions, and animations.

My first impressions after a couple of run-throughs with this tool was that it was just a little too different and we wouldn’t bond over a cup of coffee, but I gave it a few more chances and started to grow a bit of a soft-spot for it. It’s capabilities are extremely powerful, and it sits pretty much at the top of the pile when you’re looking for a tool to create true ‘hi-fidelity’ prototypes.

In its current form, the relationship with Sketch can be a little quirky on occasion, with imports not always looking their best when they’re brought over to the application. But bear in mind there’s a very small team working on it currently, and these minor issues will be corrected over time.

Hey, and it’s free! No excuse not to try it really.

Marvel

Screenshot of the Marvel prototyping tool home page

Marvel was one tool that I skirted around the fringes of for quite some time.

I had heard about it many times via the usual channels, and had viewed its site and promo video countless times (the site is just so gorgeous, I couldn’t help myself).

The thing that drew me to Marvel initially, was not a client project or working alongside a developer to bring my designs to fruition. No, it was working on a tutorial series for Medium, when I was looking for something a little more lightweight and beginner friendly to squeeze into my short tutorial series, and Marvel was there to greet me with open arms.

It’s not the most ‘feature-rich’ of the tools out there, but what it does, it does very well. It’s probably also one of the easiest tools in this list to just pick up and run with from the off. Like Atomic (which I touch on below), you also have the ability to create screens directly in Marvel, with its simple, but intuitive editor called Canvas.

Atomic

Screenshot of the Atomic prototyping tool home page

Atomic is another prototyping application that is purely browser-based, but out of the ‘cloud-based’ tools I’ve had the pleasure of using, Atomic is the most polished and feels like a ‘pro’ tool from the get-go. From the ability to not just prototype, but design your application in Atomic through to something a simple as the History slider, which allows you to scrub back through iterations of a project with ease (think Undo on steroids).

The UI is very slick, and a pleasure to navigate around. Think Sketch in ‘dark mode’. Which as I’ve mentioned before always makes the transition from design, to prototyping feel more fluid.

The collaborative aspect of Atomic is very strong, and allows you, and the rest of your team to seamlessly work on the same project, and share design files with ease. This is an invaluable feature for when you’re working on prototypes for your app, and Atomic absolutely nails it.

When deciding on which prototyping tool to use just find something that fits your workflow, and run with it. You can switch between them, depending on the project at hand. They all have their pros, and cons, and as I mentioned at the beginning of the article, remember that one size never fits all.

Subscribe to our monthly Heart Internet newsletter, filled with the latest articles about web design, development, building your business, and exclusive offers.

Subscribe now!

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Leave a reply

Comments are closed.

Drop us a line 0330 660 0255 or email sales@heartinternet.uk