Published on | Prototyping: From UX to Front End — Medium Marc Andrew

Create a beautiful User Profile animation

by Marc Andrew, Author of Sketch App Essentials.

The following Article is a Chapter Excerpt from my latest guide Sketch App Essentials (2nd Edition).

Use the Offer Code — ESSENTIALS30 to receive 30% OFF any of the Packages. Offer ends this week!

Another very popular prototyping choice for creatives is Principle, and this, and the following chapter, aims to show you why that is.

With Principle it allows the creation of high-fidelity prototypes, from micro-interactions all the way through to multi-screen flows, and let’s you create these through a UI that shares more than a passing resemblance to Sketch. Always a good thing.

If you haven’t already, make sure you have the following applications, and assets installed…

Sketch
Principle
Tutorial Assets (includes Sketch file to import into Principle)
San Francisco Font*

*You can find this in the Tutorial Assets/Fonts folder.

Applications, and assets at the ready? Awesome! Let’s make a start.

Importing our Sketch file into Principle

Firstly, fire up Sketch and open the User Profile Sketch file found in the Tutorial Assets/Sketch folder.

Ok. With our Sketch file at the ready, let’s import it into Principle.

Go ahead and open up Principle, and save the new document as User Profile.

With your Sketch file still open, simply click on the Import button in the Toolbar.

And from the Import Menu, make sure 2x is selected, and click Import.

The screens have now been imported in from Sketch and aligned in the Canvas area. You can click on each of the Screens (you’ll get the green border showing you which screen is currently selected) and see it appear in the Preview window.

Quick Tip: When working through a prototype, the Preview window in Principle is a very handy feature to have, but nothing beats testing on a real-world device, so I would recommend grabbing a copy of Principle Mirror from the App Store here.

From the Layer List you will see that the order of the Screens, Groups, and Layers have been preserved from your original Sketch file. All good!

Now we want to do a simple transition from the Profile Card screen to the Full Profile screen once the View Profile button has been tapped, and then a reverse transition when the Close Profile button is tapped, so let’s make a start.

From the Profile Card screen, select the View Profile button either by selecting it in the Layer List, or by holding (Cmd) and selecting it on the Canvas.

Click on the Lightning Bolt to the right of the element, and select the Tap gesture…

…then drag the connector across to the Full Profile screen.

You’ll now see a connection has been created between the two screens, highlighted by the arrow above the screens, that shows you which element is now interactive, and what gesture it has been assigned.

Click on the arrow (it will turn green) to open up the Animate panel, where we’ll soon be creating all sorts of animation goodness.

Quick Tip: Click at the top of the Animate panel, and then drag up or down to increase or decrease the size of the panel.

Go ahead and click on the View Profile button in the Preview window, to see a simple transition in action.

Quick Tip: Simply press (W) to restart/reset your prototype in the Preview window.

How simple was that? All we did was connect the two screens up via a tap on one of the design elements. And that’s the end of this chapter. Good night, and thank you!

I joke! I do apologise there.

Yes, certain animations between the two screens do look a little weird currently, but you will see that some (the profile image for example) transition perfectly between the screens, with the minimal of effort.

Principle has taken note of groups/layers between both screens having the same names so has gone ahead and tried to give us a little helping hand from the start. It is now down to us to tweak those animations and give it polish it deserves.

Ok. Let’s take a deeper look at the Animate Panel.

Firstly, scanning down the list of elements in the Animate Panel, you will see that Principle has taken note of elements that appear on both screens, and that have different positioning, sizing or both, between the screens. And it shows you which properties you can tweak for each of those elements.

Quick Note: You may have noticed the property Media, that says Not Animatable (And I must admit it seems a little vague). What this basically means, and it’s something I touched on before, is that this element (i.e. Available Badge), and due to the fact that it was imported from Sketch, has elements in it that can not be animated, for example the color of the text, and badge border. The same goes for the text layer Trevor Smith, which has the same Not Animatable message, due to the fact that the text is black on one screen, and white on the other, and Principle cannot do a transition between the colors. Again, like I mentioned earlier you could re-create these elements using the tools in Principle, and this would then allow you to fine-tune your transitions, and create something like an Opacity change between them.

If you scroll down to the bottom of the Animate Panel, you will see the section Unmatched Names, with the Source (Profile Card screen), and the Destination (Full Profile screen), and a list of various layer names, that appear on one of those screens, but not the other.

This is basically Principle telling you that you need to look at creating animations for these elements for your prototype to look its best.

Take the Destination layers mentioned there for example. You will see that if you run the prototype in the Preview window, that those layers come in at funny angles, using default settings as provided by Principle. And you’ll also notice that an element like the Profile Button will just disappear, quite jarringly, as you transition between the two screens. Not what we want, and not cool.

So what Principle is basically telling us is to make sure we have duplicate copies of those elements between the two screens, so we can set much smoother transitions between them, and as you do this and tweak the properties in the Animate Panel, you will see these layer names disappear from the Unmatched Names section. Make sense? It will do shortly.

Let’s concentrate on the Source (Profile Card) elements first (Pagination, Profile Button, Freelance Illustrator…).

Select the Pagination layer and then (Cmd + C) to copy it.

Click on the Full Profile screen in the Canvas (the green border will let you know when it’s selected), and then (Cmd + V) to paste the Pagination layer in. You will also see it now disappear from the Unmatched Names section in the Animate Panel.

With the layer still selected, jump to the Inspector Panel and reduce the Opacity down to 0%.

One thing I also like to do with layers that I’m copying, and pasting between screens is to pop them at the top of the Layer List for that screen. It just makes those elements easier to reference.

You will also notice that the Pagination layer has now been given a property in the Animate Panel (Opacity), which allows us to adjust the animation, duration, and delay properties for that layer.

Each row in the Animate view shows two Keyframes, one representing the start time of the animation, the other, the end. Dragging these Keyframes changes the delay and duration of the animation.

Let’s quickly change the duration of the Pagination animation here, as it does seem to linger a little when viewed in the Preview window.

Select the End Keyframe, and (Click + Drag) to reduce the time down to 0.20 seconds.

That’s better.

Now for the rest of the layers on the Source screen.

Select the Profile Button on the first screen, and copy & paste it across to the second screen. And like we did with the Pagination, reduce its Opacity down to 0%.

And then, like we just did for the Pagination layer, reduce the time of the animation on the Opacity property down to 0.20 seconds.

Finally for the Source screen, select the text layer (Freelance Illustrator, and Author…), and go ahead and follow the steps that I’ve shown you to copy & paste, change Opacity, and the duration of the animation for this layer. You’ve got this!

Let’s now concentrate on the Unmatched Names for the Destination (Full Profile) screen (I’m a design professional…, Close Profile, Recent Projects).

Now you may be saying “Wow those Opacity changes on the Source screen were absolutely riveting”. So for these next few elements we’re going to be adding a little more movement to them so you don’t die of boredom.

We’ll concentrate on the large text layer first. So like before, copy & paste it across to the first screen.

And then, holding (Shift) drag it downward on the Canvas until it sits just below the Card element, and reduce its Opacity to 0%.

Let’s delay the animation of this layer on both its Y, and Opacity properties. And we can do this by simply using (Shift-Click) to select both Timeline Bars and then (Click + Drag) to pull the bars to the right until they’re at around 0.10 seconds.

With both Timeline Bars still selected, click on one of the bars to bring up the Curve Selector, and choose the Ease Both Curve. This Curve will now be applied to both the Y, and Opacity properties of the text layer.

Give things a quick try-out in the Preview window. Looks better right? We’re making progress!

Quick Note: The Curve Selector has several built in curves, as well as a graph of the selected curve. The built in curves are the same curves used in iOS and OSX. At any time the curve can be tweaked by dragging the handles in the preview, or typing in new coordinates for the handles at the bottom of the popup.

Onto the Close Profile button now, where we’ll look at adjusting a few other properties for this element, as well as giving it a little ‘Spring’ in its step.

Like before, copy & paste it across to the first screen, and then reduce the Opacity down to 0%, reduce the Scale to 0, and change the Angle to 180 degrees.

From the Timeline Panel, select the Scale property, open up the Curve Selector, and choose the Spring Animation. Leave it at the Default settings for now.

Finally, for our Unmatched Names elements we’ll be concentrating on the Recent Projects layer. Let’s get to it.

Select the layer, and copy & paste it across to the first screen. Then holding (Shift) drag it down on the Canvas until it is sat outside of the screen.

Reduce its Opacity to 20%.

From the Timeline Panel, select its Y property, add a Spring Animation to it, and enter the following settings –

Tension: 200
Friction: 20

Let’s also delay the animation for this element, so our elements appear slightly staggered on the screen.

Select both Timeline Bars, and drag them to the right until they’re sat at 0.30 seconds.

Check out the Preview. That’s looking much better. Nice work there!

Quickly, before we finish up this screen, select the Available Badge on the Profile Card screen, and in the Timeline Panel select its Y property, and change the Curve to Ease Both, then increase the animation duration to 0.35 seconds. Done!

Now we just need to create a transition back to our first screen via the Close Profile button. Let’s make that happen.

On the Full Profile screen select the Close Profile button, click on the Lightning Bolt, then select Tap and drag it across to the Profile Card screen.

If you test the prototype out in the Preview window, and click on the Close Profile button you will see the transition back to the first screen isn’t all that bad, and you could, if you were pressed for time just leave it as is. But we’ve got time to spare. Oh yes indeed!

Click on the new Transition Arrow that was created, and you’ll see the Timeline Panel change to show fresh properties for this new Event.

Now, there’s only a few elements here that we’ll adjust the properties for, but enough to give our prototype that final bit of polish.

We’ll start with the Profile Button first. Select it in the Layer List…

…and then from the Timeline Panel, select the Timeline Bar for the Opacity property, and drag it to the right until the animation is delayed by 0.20 seconds. Leave it with the Default Curve.

Repeat the same steps for the Freelance Illustrator, and Author… text layer.

For the Available Badge layer, select its Y property in the Timeline Panel, and give it a Spring Animation with the following settings –

Tension: 200
Friction: 20

And delay the animation by 0.10 seconds.

Repeat the same steps for the Trevor Smith text layer.

And finally, select the Card + Image layer, and in the Timeline Panel, reduce the duration of the animation for the Width and Height properties to 0.25 seconds. This will just create a slightly snappier animation for when the full profile is closed.

And that’s a wrap for this chapter folks. Great job!

In the next chapter we’ll dive even further into Principle, and look, in detail at using the Drivers feature inside of that application.

Chapter Excerpt taken from Sketch App Essentials (2nd Edition).

Thanks for reading the article,

Marc

If you’re a UI/UX Designer you really need to check out my new project…

Your UI/UX needs, all in one place.

Check it out, and join my Mailing List to receive a Free copy of my guide to improving your UI skills with Sketch…

www.kissmyui.com

Prototyping with Sketch & Principle was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Prototyping with Sketch & Principle

Cool stuff, every week

More Articles