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

Flinto just took it up a level with the Behaviour Designer

by Marc Andrew. Author of Sketch App Essentials

Ok. In the final part of this Tutorial we’ll look at finishing up the final two screens of our simple Movie App, and diving even further into the capabilities of the awesome Behaviour Designer in Flinto.

If you missed Part One, you can jump to it here.

First things first, let’s create a link from the Home to the Video screen.

Press (D) to draw a link around the Index/Videos icon, giving yourself a sizeable tap area.

Then drag the Link Line across to the Videos screen, choose the Fade In Transition from the pop-up window, and click Done.

Keep things organised in the Layers Panel, by dragging the Link layer you just created next to the icon itself.

Videos Screen

On this screen we’ll be enabling the user to swipe horizontally through the video previews, and also to select some of the movies to add to their collection, and Behaviours will show their usefulness once more as we do this.

Select the Video Scroll group in the Layers Panel, and then press the Scroll Group icon in the Toolbar or use the shortcut (Option + Cmd + G) to wrap this in a new scroll group.

Flinto is a smart little cookie and takes note of the direction of the design element you have in place and sets the correct axis to scroll on, which in our case is Horizontal. There’s a clever little Flinto!

Of course if you hit (Cmd + P) you will see our scroll group is getting cut off on the left edge, and does not have enough breathing room on the right edge, so let’s fix that up quickly.

Grab the Scroll Handles on the left of the group, and pull them to the left until they snap to the edge of the screen.

And then for the right of the group, pull the Scroll Handles out to the right, or simply increase the Width to 870 in the Group Options settings.

A quick Preview (Cmd + P) will reveal that our scroll group is in a much happier place now.

One quick thing before we move on. Grab the Scroll Handles at the top of the group and pull them up by about 15pts. You’ll understand why this is necessary when we move onto the next step.

Ok. Let’s give those thumbnails a little bit of movement, and interactivity shall we.

From the Layers Panel, select the first Video Preview group, and then click the Behaviour button in the Toolbar, or use the shortcut (Cmd + B).

Hello once again Behaviour Designer!

What we’re going to do here is that when the user taps on one of the thumbnails it will expand in size, and in turn give the effect of raising from the screen slightly to give an obvious indication that it’s been selected.

Let’s make that happen.

Firstly click the Plus (+) icon next to the Initial State to create a new State, and (Double-Click) on its title to rename.

Then with the new State selected, select the Title layer in the Layer Panel, and reduce its Opacity down to 0%.

Then adjust its Timing slightly in the Inspector, using the following settings –

Damping 1
Velocity 0
Duration 350ms

Next, select the Thumbnail layer, and with the Padlock icon closed (to constrain proportions), increase its Width just marginally to around 135.

You will see the Thumbnail is now slightly off-centre, so just pull it the left a touch until you see the red guideline appear to show it has snapped back into line.

With the Thumbnail still selected, enter 10 into the Y position field just to nudge it down a little.

Hit (Space) to see the simple animation. Hmm. Looks a little, well, erm, bland.

Let’s tweak the Timing on this to give it a little more punch!

With the Thumbnail layer selected select Spring(UIKit) from the Timing Panel, and then adjust the following settings –

Damping 0.5
Velocity 0
Duration 350ms

That’s better.

Ok. Time to link this these States up.

With the the Thumbnail on the Initial State selected, press (F) to create a Link, drag the Link Line across to the new State we created earlier, choose the Tap option, and click Done.

Then switch to the new State, press (F) again, and drag this Link Line across to the Initial State, choosing the Tap option once more.

Choose a name for your new Behaviour. I simply called mine Thumb Enlarge, and then click Save & Exit.

Now the Behaviour we just created we want to use on each of the Video Preview groups, as the interaction will be one of selecting the movies you want to add to your collection, so let’s attach this new Behaviour to all of those groups now.

(Cmd + Click) to select the other Video Preview groups in the Layers Panel, and from the Inspector click on Add Behaviour, then choose the Behaviour you created earlier. Boom!

From the Layers Panel you will now see that the Behaviour has now been applied to each of those groups. How easy was that?

Hit (Cmd + P) to give things a quick try out. Looking good!

Ok. Let’s move on to the final screen.

Oh. Quickly, before we do. Press (D) to draw a link around the Profile icon, drag the Link Line across to the Profile screen, choose Fade In, and click Done.

Profile

On this final screen we’ll be creating some simple animations that occur when the content is scrolled, as well as creating some interactive Toggle Switches just to add that final bit of polish.

Let’s get to it.

Grab the Tab Bar and pull it up until it snaps to the bottom of the screen area.

Then from the Content group, select Profile Details, Separator, and Toggle Settings…

…and press (Option + Cmd + G) to create a Scroll Group around these groups/layers.

Drag the Scroll Handles at the top, and bottom until you have something like the following…

The select both the Tab Bar, and Content groups, and (Cmd + B) to create a new Behaviour.

In the Behaviour Designer, click on the Plus (+) icon to create a new State, and rename it.

With the new State selected, grab the Tab Bar and pull it down, and out of the screen area.

Then select the Profile Background layer, and from the Inspector, reduce its Height to 90.

Next, select the Profile Avatar, and reduce its Width, and Height to 70. Then holding (Shift) drag the Avatar up until it sits aligned on the Background layer.

With the Initial State selected, select the Scroll Group in the Layers Panel, and press (F) to draw a link. Take the Link Line across to the new State, and choose Scroll.

Let’s also, like we did previously, define a range of how far the user needs to scroll before the new State is activated.

With the Scroll Group still selected, drag the purple range arrow down, until you have something like the following…

(Cmd + P) to fire up that Preview.

The animations may be looking a little too snappy, so select the Tab Bar, Profile Avatar, and Profile Background elements with (Cmd + Click) and tweak the Timing settings as follows –

Spring(UIKit)
Damping 0.5
Velocity 0
Duration 700ms
Delay 100ms

Please feel free to have a play around with these Timings until you find something you’re happy with. The same goes for any of the other Timing settings used throughout both parts of this tutorial. Tweak away until you’re happy with the results.

Ok. Give your new Behaviour a name, and click Save & Exit.

Now to those Toggle Switches.

From the Layers Panel, select the first Toggle Switch (You may have to drill down through a few groups to find it).

Then press (Cmd + B) to create a new Behaviour.

In the Behaviour Designer, click (+) to add a new State, and rename.

With the new State selected, choose the Switch layer from the Layers Panel, and then holding (Shift) drag the layer across to the left.

Try tweaking the Timing settings to something like the following –

Spring (UIKit)
Damping 0.5
Velocity 0
Duration 500ms
Delay 0

From the Layers Panel, choose the On layer from the Background group, and reduce its Opacity down to 0%.

Hit (Space) to see the animation happening. Looking good! Let’s link these States up shall we?

With the Switch layer selected, select the Initial State, and press (F). Drag the Link Line across to the new State, and choose Tap.

Then select the new State, create a new link, and drag the Link Line back across to the Initial State.

Give the Behaviour a name, and click Save & Exit.

Of course we want to apply this new Behaviour to all of our Toggle Switches, so like the steps I showed you previously, select the rest of the Toggle Switch groups in the Layers Panel (Cmd + Click), and then add the new Behaviour to them.

And we’re nearly done here folks.

Quickly though. There are a few links missing on the Tab Bar that need creating, otherwise you’re not going to be able to navigate too great through your prototype.

Draw out links (D), and connect your screens up correctly, using the Fade In Transition that we used earlier, until you have something like the following…

And that’s a wrap. Now go create some awesome inside of Flinto!

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

Working with Behaviours in Flinto: Part 2 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.

Working with Behaviours in Flinto: Part 2

Cool stuff, every week

More Articles