Design & UX
Article

Create Elegant (but Easy) Interactions Using Sketch & Atomic.io

By Daniel Schwarz

It’s fair to say that I’ve been an unabashed Sketch App fanboy in my SitePoint articles for many months now. But the truth is, though I’ve already found many different reasons to use it for all types of design work, I still find more reasons to use it every day.

One of the more recent incentives is the beta release of Atomic.io, which I’ve found surprisingly similar to Sketch in terms of interface and executability.

Sketch App Interactions in Atomic.IO

A little while ago I wrote about Atomic.io only recently, where we created a basic icon directly in Atomic, and then demonstrated how the icon would animate if we interacted with it.

This time we’re going to design something in Sketch and use it in an Atomic prototype.

Here’s an example animation of what we’ll be making.

Creating a Simple Loading Screen Animation in Sketch

When you open an app for the first time you’re nearly always shown a tiny animation that lets the user know that their app is loading (and hasn’t frozen). Let’s assume that SitePoint has hired us to create said animation. We’ll design the screen in Sketch App first.

Open Sketch and press “A” to start with and select the iPhone 6 artboard from The Inspector.

It needs a blue background (#4494c2 will do), but we’ll want to animate it in Atomic later on, so an artboard background would not be suitable in this case. Instead, create a Rectangle (“R”) as big as the artboard and add a blue fill, emulating a background.

Make sure to remove the default border, and repeat this step once more with a white background (leave it underneath the blue).

Press “T” to create some text (any colour, any size, it doesn’t matter) and once again move it behind all the other layers. We’ll call it “App”, and all this will do is demonstrate how our hypothetical app will animate in after the loading screen.

Setting Up the Artboard in Sketch

Setting Up the Artboard in Sketch

Press “R” again, remove the default border, and create a white rectangle that is 50x16px with a Rotate of -45deg. When that’s done, Duplicate it (command+d) and use the horizontal flip button (next to Rotate). It should look something like this.

Constructing Our First Shape

Constructing Our First Shape

Hold Shift while you select both of these rectangles at the same time and lets starting using some tools from the menu bar up top. You’ll need to use these tools in this order:

  1. Union
  2. Flatten
  3. Edit

After using the Edit tool, it’ll be obvious that our rectangles have now become a singular flattened vector shape, and that we can edit its points. While holding Shift again, select three of them (in the image below these are highlighted in black) and use the inspector to change the Corners to 5. Almost there.

Adding Corner Radius to Vector Points

Duplicate, flip, and move both layers until we have this:

Finalising Our Design in Sketch

Finalising Our Design in Sketch

Copying Layers from Sketch to Atomic

We’re done with our .sketch file now. Open your web browser and skip over to Atomic.io. Login (or register if you’ve never used it before), create a “New Project” and then “New Design”; the first thing we need to do is select the “Pages” tab (on the left) and then look to the opposite side of the screen and choose the iPhone 6 Portrait Preset.

Creating the Artboard in Atomic

Creating the Artboard in Atomic

What we have now is a blank canvas, and this step mainly involves copying layers from Sketch App into Atomic. Copying-in the entire artboard won’t work because Atomic will force this into a single flattened layer. But that doesn’t matter – we need to split our design into several Pages anyway, to represent the different stages in the animation. Copy the layers in first.

Copying Layers Over to Atomic

Copying Layers Over to Atomic

Setting the Stage in Atomic

Let’s move all the layers to where they should be – “setting the stage” so to speak. Our “App” text layer will slide in from the right, so it’s not needed on stage at the moment. Make the “X” axis of this layer “373px” so that it appears off-stage.

Do the same for our white background.

Make sure “App” is entered vertically.

You’ll need to switch to the Layers Panel before you can select an individual layer. Flick back to Pages, click the hamburger menu, and Duplicate. Do it again so there are three versions of this same screen. Now let’s start with the first screen.

One “Page” Equals One Stage of the Animation

Our animation will begin with the logo not visible. Since our logo consists of two layers, make the left side appear off-screen to the left, and the right side appear off-screen to the right. In the next step, we will animate these layers to fly in from either side of the canvas with a smooth bouncy effect.

Page one looks a little blank at the moment; this is desired.

Setting the Stage in Atomic

Setting the Stage in Atomic

Page two is fine as it is.

Skip to page three and select all of the layers at once by holding Shift as you do so, then drag the layers so that the white background fills the canvas completely, and our blue background (+logo) is now off-stage. Since all layers were converted to images when we copied them from Sketch, our “App” text layer has now lost its auto-width. You’ll need to move that layer manually so that it snaps to the dead-center grid.

Creating the Different Stages of Animation

Creating the Different Stages of Animation

Animating the Screens

Press “H” to activate the Hotspot tool and draw it out (as you would do with a simple rectangle) to fit the entire dimensions of the artboard. On the right-hand side, the “Interaction” section will appear and we’ll need to use the following settings:

  1. On: Click or Tap
  2. Go To: Page 2
  3. Animation: Elastic: Ease in-out
  4. Duration: 1000ms
  5. Delay: 0ms

Page 2 – create another hotspot with these settings:

  1. On: Click or Tap
  2. Go To: Page 3
  3. Animation: Expo: Ease in-out
  4. Duration: 1000ms
  5. Delay: 0ms

Conclusion

Ready to show the world your work? Press the “Preview” button (bottom-right corner) to start testing our animation. Click on the first hotspot, anywhere on the artboard, to watch the screen animate to the next. Click “Edit” to return back to the editor and then “Share” when you’re happy with it.

Sharing the Prototyped Interaction

Sharing the Prototyped Interaction

We didn’t explore many of the design tools in Atomic.io today because we used Sketch App for that, but you might have noticed the striking resemblance between the two tools nonetheless. Despite the fact that they were designed for different tasks, their similarities make them a smashing combination for creating great UI interactions.

  • http://careersreport.com Sandra Bean

    There is a method how you can make sixty-five%dollars every hour… After being without work for 6 months , I started freelancing over this site and now I could not be more happy . After 3 months doing this my income is around five thousand bucksmonth -Check link on MY-PROFILE-PAGE for more info

  • Elliot Birch

    I’ve had a play with it, but I couldn’t find the “Delay” setting you referred to. I was also wondering if there is a way to automatically transition between pages so you can set up a complex animation.

    • http://sitepoint.com Alex Walker

      Heya @elliotbirch:disqus, Nice to see you round these parts ;) . I’ve pinged Dan about this too.

    • https://mrdaniels.ch/warz/ Daniel Schwarz

      Hi Elliot. I had absolutely no idea what you meant until I checked for myself and yep, it’s not there! I spoke to the guys at Atomic and this has been swapped with “Motion”, and strangely enough this is what they’ve called “Advanced Motion Control”, designed to create complex animations. For the sake of this quick tutorial though, the delay is 0ms so you won’t need to fiddle with it anyway, but I suspect that this will become an integral feature in future versions. I might have to cover it!

      • http://careersreport.com elizabeth_barnes6

        Here $is how you can make 65 bucks /hr… After being unemployed for half-a-year , I started working over this website and today I am verry happy. After 3 months doing this my income is around 5000 bucksmonth -Check link on MY-PROFILE for more info

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.