Published in


Prototyping with Principle vs Atomic

Prototyping For Days

Types of Prototypes

  1. Flat Screen-To-Screen (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. Layered (Principle, Atomic, AfterEffects, Pixate, — 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. Coded (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?

  1. Auto Animate — 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. Small Learning Curve — 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. Easing, Timing & Style Control — Very important and both do this well
  4. Sketch Shortcut Keys — 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

Strong Features

  1. Native App — Installed locally makes it smoother and more reliable.
  2. Sketch Import — Its as easy as that… import and start prototyping.
  3. Record / Export — 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. Drivers — 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. Mobile Preview — You can open your prototype live on your phone and start experiencing how it feels. Changes show instantly.
  6. Pricing — Principle’s pricing wins in terms of long term, $99 vs $25/mo with atomic. In 4 months Principle will pay itself off.
  7. Community — 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. Share Prototype via web — 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. Frame-By-Frame Animator Preview — 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:

Atomic App

Strong Features

  1. Share & Feedback — Easily share your clickable prototype with anyone by generating a simple link. Users can then comment on each screen to leave specific feedback.
  2. Cloud Based — You build your prototype inside the webapp. Everything is in the cloud, access anytime and anywhere (requires internet).
  3. Animation Frame-By-Frame — 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. Custom Fonts — 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. History Slider — 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. Project Management — Its nice to see all your projects and sub-projects super organized visually, easily find anything.
  7. Customer Service— 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. Constant Updates — 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. Native App — To me, having a native app has its pros. It just feels smoother overall and less buggy. Both would be awesome!
  2. Export / Record — 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. No Sketch Import — 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. No Drivers — 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:

Final Statements



A collection from the creators and thinkers at Mossio.

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
David Kovalev

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.