Create Elegant (but Easy) Interactions Using Sketch & Atomic.io
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.
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.
Recreating the SitePoint Logo
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.
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:
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.
Duplicate, flip, and move both layers until we have this:
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.
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.
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.
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.
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:
- On: Click or Tap
- Go To: Page 2
- Animation: Elastic: Ease in-out
- Duration: 1000ms
- Delay: 0ms
Page 2 – create another hotspot with these settings:
- On: Click or Tap
- Go To: Page 3
- Animation: Expo: Ease in-out
- Duration: 1000ms
- Delay: 0ms
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.
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.