How to make an animated prototype in Atomic

Eileen Schwab
eileen@atomic.io

Atomic approaches prototyping in the way designers think: design your different states as separate pages, then create automatic animations between them.

  1. Create your designs from scratch in Atomic, or bring your assets in from another drawing tool.

  2. Draw Hotspots over elements in your design and link pages together into a prototype.

  3. You can choose to animate these transitions between pages. When the same object exists on both pages, Atomic will animate any changes automatically. These connections between objects are created when you copy-and-paste them from one page to another, or when you duplicate a page. Anything that only exists on one page will be faded in or out.

Happy prototyping!

Posted 11 March 2015

Cloud prototyping for teams