Written by Femke from Atomic.io

Tutorial: How to make a hi-fi prototype in Atomic in under 10 minutes

This tutorial is great for people new to prototyping or Atomic— it’ll take under 10 minutes to create this prototype.

Prototyping in Atomic is quick and easy. You’ll be able to create a beautiful, advanced prototype in minutes, without writing any code, installing any software, or drinking too much coffee.

You’ll be able to preview with the prototype right on your mobile device, or share it with a teammate for feedback. We’ve pre-made all the assets you need to get started so you won’t have to import a thing. However if you did want to pull in your own, existing design from Sketch or Photoshop, you could do so.

Using Atomic, you’ll explore a simple swipe transition inside a Weather App that we’ll create together. We’ll walk through the basic building blocks for crafting transitions and at any time you can dive deeper into Atomic to unlock more advanced prototyping features, if you need more of a challenge.

Create a simple prototype in 20 simple steps

Step One

Let’s get started! If you don’t already have an account, open up Google Chrome, visit atomic.io and sign up for a free trial. Your free trial lasts for 30 days which should be plenty of time to make your first prototype and explore Atomic.

Step Two

A view of the Samples Project that comes with every new Atomic account

Now that you’re signed in to your account, you may want to explore. You’ll notice that we’ve set you up with a Samples Project. This has some introductory sample files that you can play around with to become familiar with the tool. Alternatively you can visit our Showcase which has a collection of prototypes built by others in Atomic. At any time if you get stuck the best place to start is our Help Center.

Step Three

Create a new Project by clicking ‘New Project’ and name it ‘Weather App’. Pressing Enter will then open the Project folder. Here you can view all the Designs within this particular Project. As this is a new Project, it’s empty. However Designs will fill up here over time as you create them in this Project.

Step Four

Copying our sample design into your own new Project is easy

Instead of creating a new empty Design, visit the Sample File for this prototype which we’ve created for you to help you get started. See the ‘copy and edit’ button in the bottom right corner? Click that and add it to your Weather App Project. Click ‘Edit Now’. Just like that a copy of our sample file is now inside your Project ready for you to edit.

Step Five

Welcome to the Editor! If you’ve used a design tool in the past, Atomic will probably feel familiar. Let’s look around. On the left you’ll find access to Drawing, Layout and Prototyping tools, as well as two tabs which let you switch between the Pages and Layers panels. On the right you’ll notice the Properties Panel which lets you change your page size, as well as brings up settings for Styles and Transitions.

Step Six

On the Assets page of the sample file you’ll see we’ve created all the elements used in this prototype for you. Switch to the Layers panel then click some of the elements on the canvas. The elements you select will be automatically highlighted in the layers panel. Speed up your workflow by pressing ? to see the range of keyboard shortcuts you can use.

Step Seven

You can preview and interact with your prototype at any point by clicking ‘Preview’ in the bottom right corner of the Editor. This is great for when you want to test your transitions and see how they feel. Selecting Preview now will show you the Assets in fullscreen mode, but if you navigate to page 2, you’ll see a reference example of the first state of the prototype we’re going to create. Try interacting with the reference example by swiping or scrolling to Preview what we’re going to create!

Step Eight

Now that you’re familiar with the prototype we’re going to create, it’s time to get started! On the Assets page select all the elements and copy them to the clipboard then change to Page 1 and paste the elements onto the page.

Step Nine

You’ll want to rearrange the assets so that your first state (Wellington weather) is positioned on the canvas, and the assets for your (soon to be created) second state (Amsterdam Today) are off the canvas to the right. Here’s why — when the same object exists on Page 1 and Page 2, Atomic will animate any changes between them automatically.

Step Ten

The Wellington part of the image is placed over the canvas, Amsterdam of off to the right (ready to transition in later)

For this particular transition, we want the ‘Amsterdam Today’ information coming in from the right, and the ‘Amsterdam Weather Forecast’ coming up from below. To make sure this happens, place these Groups in their respective starting positions. For example, ‘Amsterdam Today’ should be placed on Page 1 off the canvas and to the right, where ‘Weather Forecast’ should be placed on Page 1 off the canvas and below. Because we’re creating a swipe transition where we want the elements on our next page to swipe in, it’s important they also exist on Page 1, off the canvas, to define their starting position. At any time you can refer to Reference — Wellington’ page to see how this page should be arranged.

Step Eleven

When you initially previewed the prototype you may have noticed that the lower part of the ‘Wellington Weather Forecast’ is vertically scrollable. To make the information in this panel scrollable, the content has been placed inside what we call a Scrolling Container. Select ‘Wellington Weather Forecast’ and open the group in the layers panel to see for yourself.

Step Twelve

Duplicate Page 1 to create your second

Now that we’ve set up the first page, it’s time to create the second state for the transition which we’ll do on a new page. Make sure the Pages panel is selected. Then, hover over Page 1 to bring up the hamburger menu in the bottom right of the page card. Click the menu and then select ‘Duplicate’.

Step Thirteen

Navigate to your newly duplicated page to create the second state — Amsterdam Weather. It’s important here not to delete any elements on the page otherwise this will break the transition. Because we’ve duplicated the page, Atomic knows that the elements on both pages are the same, connected elements. Therefore any changes we make to the properties of the elements on Page 2 (size, position, rotation, opacity, color etc), Atomic knows to animate. First, move the background to the left so that the dark, Amsterdam background is now on the canvas. Along with this, also move the ‘Wellington Today’ group to the left, off the canvas, and move the ‘Amsterdam Today’ group into it’s new position which is on the canvas in the center. The only element we’re not moving in this transition is the Sun. This is because the sun remains on screen and just changes color — we’ll get to that soon.

Step Fourteen

As we’re wanting the Weather Forecast for the week to shuffle up/down on the bottom half of the screen during the transition, it’s time to swap the placement around. Select ‘Wellington Weather Forecast’ and move it down, off and below the canvas. Then, select ‘Amsterdam Weather Forecast’ and move that up and onto the canvas. You’ll also want to change the color of the ‘Coloured Background’ rectangle to #334B62 — a dark blue. Just select the rectangle select Fill in the Appearance panel and type the new value in and hit enter.

Step Fifteen

Select the ovals within the group named Sun

For the sun, we want it to change color on the second state. While on Page 2, with the Layers panel open, expand the group titled ‘Sun’ and select the three ovals by holding down Shift and then clicking the first and last elements. Then, in the Appearance area of the Properties Panel, select Fill and change the color to White. Now your sun is a moon!

Step Sixteen

Set up the transition from Page 1 to Page 2

If you’ve made it this far — awesome! Now comes the fun part of creating the transition. On Page 1 we’re going to draw a hotspot over the entire page. To do this, select the Interaction Hotspot tool from the Tools Panel at the far left of the Editor (or just press H, as a shortcut). You can draw hotspots just like you would draw a rectangle onto the canvas — click and drag.

Step Seventeen

Once you’ve drawn your hotspot, with it still selected, you’ll see a new Interactions section appear in the Properties panel to the right. This is where you can specify the trigger gesture, destination page, motion type and duration of the transition. For this transition specify the following settings: Gesture = Swipe left | Distance = 200px | Go to = Page 2 | Motion = Ease in-out | Duration = 500.

Step Eighteen

We want to be able to swipe back and forth between the two transitions, so we’ll also now need to place a hotspot on Page 2 to take us back to Page 1. Copy the hotspot from Page 1 using the keyboard shortcuts, and paste it on Page 2 in the same position. Update the destination page setting of the new hotspot to Page 1, and the gesture to ‘swipe right’.

Step Nineteen

Your prototype in Preview mode

It’s time to Preview your transition! Navigate to Page 1 in the pages panel and click Preview in the bottom right of the editor, or just use the keyboard shortcut (cmd + enter). Swipe left on your prototype to go to Page 2. Then, swipe right on your prototype to be taken back to page 1. Nice!

Step Twenty

Now you’re a pro! If you delete the Assets and two Reference pages (by selecting the page’s hamburger menu and then ‘delete page’), then the prototype you’ve just made is ready to share. You can easily create a share link by pressing ‘Share’ in the bottom right of the editor!

Thanks for checking out Atomic! Don’t forget, the Atomic Help Center is packed with samples, tips and advice for prototyping in Atomic .

Got an ideas for our next tutorial? Add a response below and let us know!