Explore new prototype examples

Femke van Schoonhoven

Prototype examples.png

If you’re looking to get started in Atomic we’ve got a great collection of basic transitions that you can use as building blocks to create more complex prototypes. From basic slide in’s to expanding panels and floating action buttons, these sample files are a great way to explore what’s possible in Atomic.

We recommend copying these files into your own account so you can see the mechanics behind how they were created, and learn how to make them yourself.

Expanding panels

This is a quick and easy transition to create in Atomic. As the expanding panel is explored on both the first and second state of this transition, we’ve placed the it half on and off the first page.

Open the sample

Sliding screens in and out

Full-screen transitions are easy to create in Atomic just by moving elements between pages. In this example we’ve placed the second screen off the page and to the right. This is because we want it to slide in from the right, off the page.

Open the sample


Enlarging content to fill the screen is a common transition that’s quick to create in Atomic. This transition is crafted by changing the size and position properties of an individual element.

Open the sample

Card stacking

Card stacking Craft a card stacking transition by copying this design into your own account and exploring how the cards have been set up in the layers panel.

Open the sample

We’re hoping to add a lot more examples over time, but in the mean time you can explore our library of samples. If there’s a particular transition or example you’d like to see, let me know.

We’ve also recently released a tutorial on how to create a basic pop up transition in Atomic. Watch it here.

Posted 18 August 2015

Advanced interactive design & prototyping.