In Search of the Best Prototyping Tool: Principle vs Flinto vs Pixate vs Atomic
The past couple of years have been truly great for us designers when it comes to the seemingly ever-growing amount of new design related apps. The variety of tools to put into our tool belts has grown from just a hand full of apps to a dozen of them. Along with the emersion of design related apps with a gentle learning curve, our interest in learning new skills has also grown.
Take animating and prototyping for instance. We’re not even going to get into the whole ‘animation is a part of design’ discussion as we believe we should be passed that by now (with a wholehearted ‘yay’ in favor of that statement by the way). In this post we want to compare a few of the major players in the prototyping game in an effort to make it easier for you to either dismiss or start using them without having to dive into each app seperately.
Visual and layer based prototyping tools
Please note we’re only discussing visual and layer based prototyping tools. That is why we haven’t included tools like Invision and Marvel, as they focus more on entire app flows rather than higher fidelity interactions (using multiple layers). Another criteria for apps we wanted to review was them having a GUI and let you visually control animations/interactions. We’ve also considered throwing Quartz Composer, Origami in the mix. Although they’re both extremely robust we have never felt convenient using them. That basically leaves four big players in the game: Pixate, Flinto for Mac, Principle and Atomic.
Pixate
We think it’s only right to start the list with Pixate. Released in 2014, Pixate was one of the first prototyping tools we knew of that offered a GUI and quite some flexibility when it came to animation tweaking. In March 2015, Pixate released their Mac app called Pixate Studio which made it much easier and snappier to prototype without having to go to their web app. There’s also a Windows app available by the way. In July 2015 Pixate announced that they had joined Google. We’re keeping our fingers crossed this will only affect Pixate in adding more power to its app.
Pricing
Ever since Pixate was acquired by Google, it’s been available for free. Pixate has also reduced the costs for its cloud service, which lets you share your Pixate prototypes with a team.
Pros
- Easy to use (no coding required)
- Offers re-usable code based actions
- Let’s you preview on both iOS and Android
- Extensive documention
- 100% native mobile prototypes
- Joined Google lately (which hopefully means more features are coming)
- Ships with default Iphone + Apple Watch templates (custom)
Cons
- No easy Photoshop or Sketch integration
- Doesn’t have a preview on the desktop app
- Doesn’t ship with a size template other than mobile devices
Flinto for Mac
Although Flinto has been around for a while, they’ve pivoted (puts dollar in the swearing jar) just recently by releasing a full-fledged Mac app that offers tons of animation options, called Flinto for Mac. Today, Flinto for Mac is both powerful as well as easy to use. By offering a Sketch plugin, Flinto takes the lead when it comes to recreating your designs in its own GUI. As a matter of fact, Flinto for Mac is the only one of these four apps that doesn’t require you to re-collect/rearrange your exported assets again because of the Sketch plugin.
Pricing
Flinto for Mac is available both through the Flinto website as well as on the App Store for $99. Flinto for Mac offers a 50% discount for students who want to use the app for educational, non-commercial purposes. For more details, go here.
Pros
- Gentle learning curve
- Easy to use
- Intuitive UI because of native Mac OSX elements
- Has a Sketch plugin to quickly export Sketch artboard to Flinto for Mac
- Lets you live preview on the desktop app
- Ships with default Iphone + Apple Watch templates (custom)
- Adding scrolls is super easy
- Allows easy reverse of (custom) transitions
- Offers plenty of documentation and tutorials
Cons
- Sharing prototypes requires someone to have Flinto for Mac installed
- Doesn’t ship with a size template other than mobile devices
- Export doesn’t included artboard colors (could be a bug with Sketch beta)
- Not inexpensive, one time purchase though
- Contains a few minor yet annoying bugs
- Content scales slightly when enlarging a scroll field
- Transition preview doesn’t always properly reflect the final result
Principle
Just one week before Flinto for Mac was released in late August, principleformac.com stepped on the scene and blew everyones minds. Compared to Flinto and Pixate, Principle is a new kid on the block. However, that doesn’t mean it doesn’t know how to hold its own. By using Mac OSX’ default GUI elements, Mac users will feel right at home. The app is so similar to Sketch that every now and then you have to check your menu bar to be sure what app you’re looking at. Unlike Flinto for Mac, Principle does currently not have a Sketch plugin which means you have to manually re-build your designs in Principle using assets. Principle has enormous potential and lucky for us its documentation base and support from within the design community is ever growing.
Pricing
Principle is available on Gumroad for $99 which allows for use on 3 of your personal computers. Principle lets you use a trial version for 14 (actual usage) days.
Pros
- Gentle learning curve
- Easy to use
- Intuitive UI because of native Mac OSX elements
- Super visual way of prototyping
- Offers a timeline view
- Does offer a preview in the desktop app
Cons
- The app feels a little ‘work in progress’ (some interactions aren’t available)
- No easy Photoshop or Sketch integration
- Its templates require @2x assets to be scaled to non-retina
- Not inexpensive, one time purchase though
- Prototype doesn’t scale down to device
Atomic
atomic.io is also a relatively new app and is only available as a beta at the time of writing. It’s also the only tool that exists as a web app only and doesn’t have a native Mac OSX app. Regardless of the actual transitions and tools available in Atomic, it does feel less snappy because of that.Although it might be a little presumptuous, it kind of feels like it shows Atomic is still in beta. Of course that doesn’t mean Atomic doesn’t have a lot of potential.
Pricing
Currently Atomic is in beta and available for free. Their website states Atomic will make announce more details regarding their pricing plans in September.
Pros
- Allows for multiple people working on the same project
- Ships with 3 demo files that explain the basics of Atomic
- Size templates available for desktop, mobile and Apple Watch
- Allows for corner radius based tap areas for precise
- Preview prototypes on all devices (using shared web link)
- Has a history state slider
Cons
- Easy to use, but not at all intuitive
- No native app available
- Only works in Google Chrome
- Can’t edit anything while in preview mode
- No easy Photoshop or Sketch integration
- Its templates require @2x assets to be scaled to non-retina
- Laggy animation for screens that have dark background
- Limited animation options (for now)
Conclusion
So which one should you start using? We think it kind of depends on what criteria you value. All four apps are definitely powerful and well worth their money. For convenience sake, lets pretend there are (just) two types of users. If you’re someone who doesn’t mind spending a little more time on tweaking all values, and you want full control over your animations and pay an small optional monthly fee Pixate is the tool for you. However, if you’d rather pay once for an app and whip up full app flow prototypes in a jiffy Flinto for Mac might be better for you. Principle is a good runner-up for user who’ll like Flinto for Mac. For a quick comparison list of all prototyping tools, we recommend you take a look at http://prototypingtools.co
Originally published at blog.yummygum.com.
