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 modern-day designers, and developers.
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.
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). Nowhere is it written that you have to stay loyal to one application. Myself and many other designers happily use a combination of these tools in our daily workflow, and you can too.
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.
Sketch (Yes it does Prototyping too)
Before we check out the other Tools later in this article I want to briefly touch upon the Prototyping feature of Sketch itself.
I think it was inevitable that something had to change. Don’t get me wrong I love Sketch as the lightweight tool that it is and never want to see it bloated with extraneous features, but Bohemian Coding had to give the user a little more to keep up the pace with the many other Design & Prototyping Tools appearing on their radar.
Now it seems at this stage, and I’m not sure if this a permanent feature, but if you’re working with Symbols, Overrides and the like (hey who isn’t now), then you have to use the Hotspot feature of Prototyping to link things up. I’m cool with this for now. It’s simple as a few key presses, no dramas.
Simply press H to draw a Hotspot around an element on the Artboard (which is now your Start Point) and then drag the Link Connector across to the Artboard you wish to Transition to.
Simpler than Mr Simple on a really simplistic day.
You’ll then see the Inspector Panel update to show you, firstly, the Artboard you’re now transitioning to, and the Animation type…
- No Artboard Animation
- Animate Artboard from Right
- Animate Artboard from Bottom
- Animate Artboard from Left
- Animate Artboard from Top
One great thing about the Hotspot feature is that they can belong inside Symbols where their target destination can be overridden, allowing you to reuse a Symbol but change the Target destination each time, something that you can’t do with the Links feature.
Compared to some of the more advanced animation/motion/prototyping tools out there, it may seem a little basic in its choice of Transitions, but hey it’s early days, and I’m sure that it’s a native feature that will expand and improve going forward.
It’s a big deal just having native Prototyping inside of Sketch, and like they say, from small seeds grow bigger things.
Flinto 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 features with 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 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 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. 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.
Principle - Animated Design
Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a…
Framer, in its current form, has evolved into something a little more than ‘just another Prototyping tool’, but at its core it is still just that, although it likes to do things a little differently to the tools I’ve already mentioned. Let me explain some more.
With Framer, the potential barrier between design & code has been lowered considerably for users, because inside Framer you can do just that; Design & Code. No need to switch between 2 applications because Framer has it all there for you wrapped up in one convenient package.
Like I mentioned, Framer is a little different from the Prototyping tools that came before, and after it. The key reason being that you’re going to have to get your coding hat on (Framer is powered by CoffeeScript) to achieve the very best 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.
The thing I love about Framer is that not only do is it allow you to create your designs inside of it (no not comparable to something like Sketch), but that it can also (when you switch to the Code/Prototyping aspect) actually help teach designers how to code, or at least give you 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.
The design tool that does it all.
Framer is the only tool you need to create interactive designs for any platform. Powering the product teams at Dropbox…
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 chapter 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 of 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.
Origami Studio - Design Prototyping
A new tool for designing modern interfaces, built and used by designers at Facebook
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 for Medium, 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.
Marvel - The design platform helping apply design thinking
The collaborative design platform. Wireframe, prototype, design online and create design specs in one place. Or create…
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 may even have arrived).
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 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.
Advanced interactive design and prototyping - Atomic.io
Atomic picks up where simple tools leave off. Advanced interactive features, built for scale, easy to learn, accessible…
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 (I’m such a slave to beauty), and a little on the cluttered side, which I feel has the potential to distract you 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.
Proto.io - Prototypes that feel real
Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required…
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.
📣 Woah! Hang on. Before you go…
…If you want to improve your Design Workflow in Sketch even more, you need to check out the Cabana Design System below…
🎁 Design UIs Better, Smarter, and Faster in Sketch. Check it out here.
Use the offer code MEDIUM25 to receive 25% OFF.
Thanks for reading the article,
Designer, Author, Father and Lover of the ‘microtherapy’ Playlist on Spotify