Prototyping with Sketch & Principle

Categories Principle, Prototyping, Sketch

Introduction

Another very popular prototyping choice for creatives is Principle, and the following tutorial 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 lets 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…

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

Quick Note: If you want to see what we’ll be creating in this Tutorial, you can find the completed Principle file in the Tutorial Assets/Principle folder.

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


Getting the Sketch file ready

Firstly, before we jump into Principle, let me show you my method of preparing my Sketch files before I import them into the aforementioned application.

Open up the User Profile Sketch file from the Tutorial Assets/Sketch folder.

You will see we have a couple of screens. The first, a simple Profile Card, which when imported into Principle, and with a press of that mighty fine View Profile button will transition us across to the second screen, Full Profile. Simple as that!

Like I mentioned earlier we’re going to make a few simple adjustments to the naming of our layers/groups here, which in turn, will make life so much easier when we’re working inside of Principle. Trust me, you’ll never look at a Sketch file the same way again.

From the Layer List, and if they’re not already, open up a few of the groups until you have something like the following…

Ok. Let me guide you through priming our Sketch file before we import it into Principle, and also what to expect when we do.

Let’s start with the Available Badge group.

As you can see from the design, they share a few similarities, but also a few noticeable differences (i.e. Color, and Size).

Now we want to transition smoothly between these two elements when we jump across to Principle, and it’s as simple as just labelling the groups with the same name. Simple as that.

Any layer/group with the same name, Principle will treat as the same element and automatically put a transition between them with the default animation settings (you will be able to adjust these, but we’ll get to that later in this chapter).

This ‘auto-animation’ feature of Principle does confuse first time users of the application and makes them exclaim ”Why are there elements on my Artboards flying around everywhere? I didn’t ask for this”, but once you understand the reasoning behind it you will soon realise that it is one of Principles strongest, time-saving features.

You will find that not only can it cut down greatly the time spent putting your prototype together, it can also steer you towards taking better care of your Sketch files before you jump across to the prototyping stage, and that’s never a bad thing, and it’s something I promote at every available opportunity.

Quick Note: You can also re-create, for example the Available Badge inside of Principle, and doing this does allow you to have a little more control of the design element, as opposed to what you can do with an element that was imported from Sketch. (i.e. Fine-tune the Color transition for the text layer, and the border of the badge). For this tutorial, we’ll stick with the options available to us on our imported Sketch file, but do bear this in mind when working on future projects in Principle.

So (Cmd + R) on each of those groups, and simply rename to Available Badge. Done.

The same goes for the Header Image layer. Simply rename (Cmd + R) to Header Image.

And lastly, before we jump on over to Principle, let’s go ahead and flatten some of the groups in our Sketch file. Why? Well it makes sense, that if you’re not wanting to animate a specific layer inside of a group then you may as well just flatten it.

This helps you two-fold. Firstly it can cut down on the amount of groups/layers you’ll have appearing in the Layer List, and/or Timeline inside of Principle, and keeps your file clean, and agile. And secondly, when working on larger prototypes, with many screens, it can keep your file sizes down, which is a good thing if you’re sharing amongst teams.

Let’s get flattening!

We’ll start with the Available Badge group that we renamed earlier. To prepare this group to be flattened on its import into Principle, simply add an Asterisk (*) to the end of the group name.

Now go ahead, and do the same for the following groups –

  • Profile Button
  • Pagination
  • Recent Projects
  • Close Profile

Quick Tip: Whenever you’re creating a design in Sketch aim to decide, before you begin prototyping, what exactly is going to be animated. I feel this is a much better mindset to have, and it means you’re focused from a much earlier stage, as opposed to “Hey let’s design it, and then decide what to animate later”, which can just cause unwanted iterations at a later stage in the process.

Also, if you do change your mind in the prototyping stages then you can simply make the required adjustments in Sketch and re-import. You decide how you want to play it.

Importing our Sketch file into Principle

Ok. With our Sketch file now prepped let’s import it into Principle.

Go ahead and fire 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 has been preserved from your original Sketch file, and that certain groups have been flattened as per our settings in Sketch. 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.

Like I mentioned earlier in this chapter, 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 tutorial folks. Great job!