Prototyping with Principle vs Atomic

David Kovalev
Jun 28, 2016 · 7 min read
Image for post
Image for post

Prototyping For Days

In the recent year or so (since joining Mossio) we’ve seen a generous amount of awesome and helpful prototype tools emerge from the demand of our frequent evolving industry.

This article isn’t about comparing ALL of these cool and different tools, it’s simply comparing the 2 apps that WE use at Mossio. They also seem to be and offer a one-sided service which is prototyping only (not bundled with wireframing, mockups and other features).

My goal is to simply shine light on both these apps based on what I’ve experienced and hopefully teach you something new :)

Types of Prototypes

There are 3 main categories I would say that most, if not all, prototyping tools would fall under:

Image for post
Image for post
  1. (Invision, Marvel, Flinto, Justinmind) — This is great if you have a whole website that you’ve designed or wireframed and want to create a clickable page to page prototype. It’s normally very basic. inVision offers Overlays which gives you more control over certain elements layers over your screen.
  2. (Principle, Atomic, AfterEffects, Pixate, Proto.io) — You would use these apps if you’d like a little more fidelity in your prototype. Normally if you’d like to show more detail on a transition or some kind of movement with multiple layers not just single pages.
  3. (Framer.js, Origami, etc) — this one is a bit out of my league. But this is basically creating prototypes with actual code. This is the closest you’d get to the FINAL product and I believe you can even reuse some of the code. I’ve fiddled around with framer and origami but there is something about code that intimidates the little designer in me.

Principle and Atomic both fall under category #2.

Shall We Begin?

Both the Principle App and Atomic App do their job really well. Of course there are pros and cons on both ends but at the end of the day, its what you need and sometime just a user preference. Here is where they shine:

  1. — When your done creating ScreenA, you duplicate it, call it Screen B. Whatever you change on Screen B will automatically animate then you fine-tune the timing, easing and layer styles (opacity, size, rotations, etc)
  2. — Both of these apps are relatively easy to get the hang of. I would start off with Atomic if you’re very new to this but Principle has the familiar feeling of Sketch / Mac apps. The drivers section in Principle is more challenging to wrap your mind around so don’t feel like you have to learn that right away.
  3. — Very important and both do this well
  4. — I’m a Shortcut (hotkey) MASTER, I love learning shortcuts to speed up my workflow. Amazingly, both these apps use the same shortcut keys as you would expect coming from sketch.

Principle App

Principle is an amazing desktop app that has a familiar sketch app interface which makes it easy to learn and navigate. Overall it feels fast, smooth and independent (you don’t need to rely on the internet).

Their Official Site

Image for post
Image for post

Strong Features

  1. — Installed locally makes it smoother and more reliable.
  2. — Its as easy as that… import and start prototyping.
  3. — Once you’ve completed your prototype you can press the record button and start clicking and swiping. Once you’re done you can export as a .GIF or .MOV
  4. — This is a BIG one! You can control animations INSIDE a page (ex: when scrolling up and down) not only when transitioning from page to page.
  5. — You can open your prototype live on your phone and start experiencing how it feels. Changes show instantly.
  6. — Principle’s pricing wins in terms of long term, $99 vs $25/mo with atomic. In 4 months Principle will pay itself off.
  7. — Seems like there is larger Principle community where people share their work and ask questions (Facebook, etc) than Atomic, but I haven’t really looked for it.

Things It Lacks

  1. — Most of my projects are WEB related, there is currently no way to share a clickable prototype via a link. Atomic does this very well.
  2. — I totally just made that phase up, but I’d love to be able to move the animation left/right with my cursor to see how the animation plays out. Currently I can only see the animation within the preview window in real time (think AfterEffects, you can move to any frame)

Built with Principle by me:

Image for post
Image for post

I created a product selector for Bevs. It was a simple concept and it took about an hour to build.

Image for post
Image for post

During the redesign of Mossio, I had the opportunity to play around with some transition ideas from the home page to the case study page.

Image for post
Image for post

Using Peter Deltondo’s original design, I had the opportunity to take it a step further and visualize how the animation would work. Took about 3hrs (first project)

Atomic App

The Atomic App is dear to my heart. The logo and branding is really what drew me in. I started using it while it was in BETA and they’ve progressed greatly since then! Very simple to use, cloud based, web app and share you interactive prototype with a share link!

Their Official Site

Image for post
Image for post

Strong Features

  1. — Easily share your prototype with anyone by generating a simple link. Users can then comment on each screen to leave specific feedback.
  2. You build your prototype inside the webapp. Everything is in the cloud, access anytime and anywhere (requires internet).
  3. — Creating animations from screen to screen seems to be way easier in Atomic. You see exactly what the animation will looks like, no need for guessing. Also the easing seems easier to work with.
  4. — This is a fairly new feature which allows you to your own fonts to use in your prototype. This is really good for a web app but with Principle you already have access to your fonts locally.
  5. — I don’t use this feature often but its good to know that its there. I can quickly slide back into previous versions if I want to go back or simply see how the design evolved.
  6. — Its nice to see all your projects and sub-projects super organized visually, easily find anything.
  7. — It seems that Atomic is more socially active and quick response time when I’m asking a simple question. They actually duplicated my project to help me diagnose an issue!
  8. — One thing I noticed is that there are constant updates and refinements to the app. They are constantly improving and innovating. I’ve suggested a few features which they’ve already implemented!!!

Things It Lacks

  1. — To me, having a native app has its pros. It just feels smoother overall and less buggy. Both would be awesome!
  2. — This seems pretty vital as well… currently I have to record my screen with a third party tool to showcase my prototype. However the fact that it was a share link is good when I need to quickly share an idea!
  3. — This would totally save some time… I don’t feel like its super duper necessary, since it’s fairly quick to copy and paste things in. Either way would be neat to have.
    UPDATE: Sketch Import Coming VERY Soon
  4. — To portray a simple idea, you don’t need to get into the details… so maybe this wouldn’t be necessary and might just clutter the clean direction

Built with Atomic by me:

Image for post
Image for post

This was an earlier concept of one of the new redesigns of Mossio’s website. I explored the menu and page transitions. This took about 2 hrs to build.

Image for post
Image for post

Side menu navigation transition for a schedule iOS app. This took about 30min to build.

Image for post
Image for post

I created a product selector for Bevs. It was a simple concept and it took about an hour to build.

Final Statements

So in conclusion both of these apps work and do the job. I would say CURRENTLY Atomic is more for the quick rapid prototyping / sharing idea via link, but if you want something with some extra fidelity and polish and interacting on it on mobile, you should go with Principle.

Let me know if you guys have any questions or think I might have missed some important elements!

Thanks for reading and hope you enjoy your week.

Mossio / Check out our work

Mossio

A collection from the creators and thinkers at Mossio.

David Kovalev

Written by

I specialize in web design, branding, ui/ux, apps, interaction deisgn, etc. Have a project you want to team up on? Lets connect to discuss.

Mossio

Mossio

A collection from the creators and thinkers at Mossio.

David Kovalev

Written by

I specialize in web design, branding, ui/ux, apps, interaction deisgn, etc. Have a project you want to team up on? Lets connect to discuss.

Mossio

Mossio

A collection from the creators and thinkers at Mossio.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store