Prototyping, more than ever, is playing an increasingly vital role in the design and development process, and has become an essential part of the workflow for a modern-day designer, and developer.
There is still the debate running through the design, and development community of “Have we hit a saturation point? When is enough?”. I personally think there is no problem with having all this choice. Do we complain about another Puzzle Based game being added to the App Store? Not really, and at my last count there were 15,489 in that genre (I made that figure up, but I know there’s a lot. Double points to anyone who has the specific figure).
Just choose one that eases into your workflow, and feels the most comfortable fit for the project at hand. Some folks (myself being one of them) have a preference for desktop based tools, others side more with a cloud-based platform (which are gaining in popularity).
I will be covering 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 that suitable companion tool for Sketch.
Flinto
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 Sketch, and even offers up similar tools 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 feature with Flinto is the Transition Designer. If you’re the kind of designer who has an aversion to timelines, and programming, the Transition Designer will bring a very big smile to your face. It’s powerful beast, and the precise control you have over each layer enables you to create some very complex transitions, which are then reusable throughout your project. Interested? Well, in a later chapter I’ll be showing you how to put this tool to the test.
Principle
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 between Sketch, and a tool like this 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 makes it the most intuitive.
The tool allows you to easily create flows for multi-screen apps, or just focus on micro-interactions, and it is very competent at both. It lacks a little polish compared to some over the other tools in this list, but it’s a much newer member to the prototyping family, and these things take time.
Framer
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 the recent ‘Auto-Code’ feature, the entry level to Framer has been lowered considerably.
The thing I love about Framer is that it can actually help teach designers how to code, or at least give a much better insight on how your manipulations affect the code, and vice-versa. This I feel, allows a designer to have a much stronger affinity to their work, when they can control their project to a much later stage in the development process.
Now they have the Framer for iOS app available, the workflow between iterating, and testing has just become a whole lot more enjoyable.
Marvel
Marvel was one tool that I skirted around the fringes of for quite some time. I had heard about them many times via the usual channels, and had viewed their site, and promo video countless times (there site is just so gorgeous, I couldn’t help myself).
The thing that drew me to Marvel initially, was not a client project, not working alongside a developer to bring my designs to fruition. No, it was working on a tutorial series, where 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, and probably 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 it’s simple, but intuitive editor called Canvas. Is this feature of Marvel a Sketch contender? No it’s not, but having the option there can prove extremely useful if you want to iterate even faster.
Proto.io
Unlike the prototyping apps I mentioned earlier, Proto.io is completely browser-based, which is not to everyone’s liking. I’m more of a Desktop based application kind of guy, but that’s not to say that I didn’t find Proto.io to be robust for being a ‘browser-based’ solution. If you’ve a solid, speedy internet connection this could be very much the app that floats your prototyping boat.
It’s a very powerful tool, and probably the most feature-rich tool in this list, but it can also seem a little overwhelming at first compared to those other tools.
The UI is not the prettiest thing in the world (although this has been improved in Version 6), and a little on the cluttered side, which I feel has the potential to distract when working on a project. Keep it stripped back. Leave the extraneous features at home. Let people focus on their designs, and the transitions, or interactions happening in the editor.
Atomic
Atomic is another prototyping application that is purely browser-based. At this current time, Sketch importing is not the most streamlined of features available, but that is changing with a dedicated Sketch plugin coming to an update near you very soon. It has arrived, and it rocks!
Of the ‘Cloud-Based’ tools I’ve had the pleasure of using, Atomic is the most polished out of the bunch, 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 much 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.
Finished!
As well as the tools I’ve touched on in this article, there’s many more out there such as InVision (which I really need to spend more time with), Pixate, and UXPin, and that’s not forgetting Origami Studio by the team at Facebook, which is putting in an appearance later in the year, as well as the Craft Prototype plugin from those awesome folks at InVisionLabs.
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 one size never fits all, remember that.
Looking for the fastest, most practical way to learn Sketch?
My new guide ‘Sketch App Essentials’ is the perfect resource to help you realise the full potential of this amazing application.
Use the Offer code MEDIUMESSENTIALS25 to receive 25% OFF any of the Packages.
Grab the guide here.