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

As you may already know I do have a penchant for a certain Prototyping Tool…

…Ok. You got me. It’s Flinto. Damn, you’re good!

I’ve been an advocate of this great Sketch companion tool for quite some time. It’s relatively easy to pick up, a joy to use, and can produce some really great results when bringing your Sketch files to life. But, until recently, and compared to the likes of something like Principle, it was missing some features that could stand it alongside the aforementioned tool.

That has now changed.

The name’s Designer. Behaviour Designer.

In this short 2 Part Tutorial I’ll show you how invaluable this new feature is, and how it has raised Flinto’s standing in the whole ‘Prototyping Tools’ eco-system.

Before we start, make sure you have the following applications installed, and assets downloaded…

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

Applications, and assets at the ready?

Cool! Let’s rock out some good Behaviour in Flinto.

Opening up Flinto

After opening up Flinto you’ll be presented with the splash screen. You can go ahead and close this, then save the new document, and give it a name for the Sketch plugin to reference very shortly. Something like ‘Movie App’ would work.

We of course won’t be needing the screen that’s just been created, as we’re importing in our screens from Sketch. So delete it either by pressing the (Delete) key, or right-clicking on the screen, and choosing Delete.

From the Inspector Panel, set the Screen Size to iPhone 7. Leave the Document Properties as they are, apart from the Background Color, change that to White #FFFFFF.

Now before we jump across to Sketch, we’ll need the Sketch Plugin installed. So from the Menubar, select Flinto > Install Sketch Plugin…

Plugin installed? Good stuff. Let’s get importing.

Importing from Sketch

Jump on over to Sketch, and make sure you have the Sketch file that you download previously, open.

Now we only want to export the App Screens (not the Symbols), so (Shift-Click) to select the four App Screens (Launch, Home, Videos and Profile).

Choose Plugins > Send to Flinto from the Menu Bar, or use the Keyboard Shortcut (Shift + Ctrl + Cmd + F).

From the popup window, leave the Scale at 200%, the Device Size at iPhone 7, and make sure Export only selected artboards is checked, then click Send.

Then in the next window, check that the Flinto file you saved earlier is selected, and click Merge.

Back in Flinto, you will see all your screens have been imported into the application, and from the Layers Panel you will see that the Layer/Group hierarchy has been preserved from your Sketch file.

Choose the menu item Center Canvas, and use the shortcuts (Cmd +), and (Cmd -) so all of your screens are visible, and centered on the Canvas.

Quick Tip: If (in the Layers Panel) your screen names are not in the same sequence as they were in Sketch, you can easily click, and drag to re-order them correctly.

Launch

With the Launch screen being the first screen of our app, we need to let Flinto know that. So with the screen selected, check the Home Screen option from the Screen Properties in the Inspector.

Quick Tip(s): Now would be a good time to fire up the Preview window. Now, there’s not much to see just yet, but with the preview window you can view changes as they happen. Click on the Preview icon in the Toolbar, or use the simple shortcut (Cmd + P).

Also, if you haven’t already, you can grab the Flinto App from the iOS App Store. I like to use the Preview (Cmd + P) function for my initial run-through, and then switch to the iOS App after that. It’s entirely up to you. Whatever suits your workflow.

Ok. Back to it.

Now we’re going to add a timed transition from the Launch screen, to the Home screen. So check Timer Link in the Inspector, and enter the following settings…

Timeout: 2000ms
Target: Home

And then click New Transition, to enter the Transition Designer.

Quick Tip: Two simple Keyboard Shortcuts before we dive further into the Transition Designer…

Preview Transition: Space
Preview Transition in Slow Motion: Shift + Space

As the Launch screen will be fading to the Home screen, we want to align the screens on top of one another in a certain order, and we can do this by simply checking Align Screens in the Toolbar, and then from the Layers Panel selecting the Launch icon, and dragging it to the top of the list.

Pressing (Space) will reveal… well not much really. So we need to animate some elements on the Launch screen. Let’s go ahead and do that.

Firstly, press (Space) to go to the End of the Transition.

Then select the App Logo in the Layers Panel, Rotate it 180 on the Z axis, and with the Padlock icon closed, increase its Width to 700.

With the icon still selected, and using the alignment guides, center it up on the Launch screen, and then drop the Opacity down to 0%.

From the Timing panel, choose Spring (UIKit), and then enter the following settings…

Duration: 300ms
Delay: 100ms

Still at the end of the Transition, choose the Background layer, and reduce the Opacity to 0%.

We’ll also add a longer delay to our Background layer, so the transition is slightly staggered between itself, and the icon.

From the Timing panel, choose Classic, and enter the following settings…

Duration: 300ms
Delay: 200ms

Quick Note: I’ll be touching on Timing only briefly in this tutorial, but if you do want to read a more thorough overview of both Spring, and Classic timing then the Flinto documentation here is worth a read.

Finally, from the Toolbar, enter a name for our new Transition. Something simple like ‘Loading’ would work well. Then click Save & Exit.

Home

Ok, firstly we need to place the Tab Bar inside of the viewport, so select the Tab Bar group, and then on the Canvas drag it up until it snaps inside of the guides. If you’re unsure if the element is sat in the correct position, just check the Y position in the Properties panel (it should be sat at 607).

Now select the the Latest Videos group, then click Scroll Group in the Toolbar, or use the shortcut (Option + Cmd + G).

We’ll be wanting our elements to scroll up, and under the Status Bar, so grab the sizing handles at the top of the group, and pull them up until they snap to the bottom of the Status Bar.

Time to put the new Behaviour Designer feature of Flinto to good use with this screen I think.

Select both the Tab Bar group, and the Content group in the Layers Panel, and then click Behaviour in the Toolbar, or simply use (Cmd + B).

In the Behaviour Designer, you will see the groups that we just selected in the panel on the left, and along the top you will see the Initial state for our screen. If you click on any of the elements on the screen you will see that they’re not currently editable, which is correct, and why we need to go ahead and add a new State to our screen to bring in some movement.

Click the plus (+) icon next to the Initial State, and rename it.

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

From the Timing panel, enter the following settings…

Spring (UIKit)
Damping: 1
Velocity: 0
Duration: 700ms

Still on the new State, select the Text Layer from the Content group, and pull it up, and out of the Viewport. Grab the sizing handles (holding Shift to constrain proportions), and reduce it’s Width down to around 180, and reduce the Opacity down to 10%.

Enter the same Timing settings as the Tab Bar.

Finally, select the Banner layer…

…and from the Inspector Panel, adjust its Rotation to 100 on the Y Axis, and its Opacity down to 0%.

Again, and just to keep things simple for this tutorial, stick with the same Timing settings as the other elements.

Now hitting (Space) you will be able to see your animations in full flow. Looking good!

But before you go hitting that trusty Save & Exit button at the top, we have to remember that currently there’s no way of initiating those animations inside of our prototype. We need to make those elements animate based on the scroll position.

Let’s fix that up.

With the Initial State selected, select the Scroll Group in the Layers Panel, and use the shortcut (F) to create a link.

Drag the Link Line from the scroll group to the new State we created…

…and from the popup, choose the Scroll Gesture, and click Done.

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

With the scroll group still selected, you will see the purple arrow, which highlights the current range.

Drag that down (or change the End setting in the Gestures panel) to around 135.

Fire up the Preview window (Cmd + P) to see those Behaviours in action. Looking good right?

Choose a suitable name for this Behaviour, and click Save & Exit.

In the 2nd part (which you can find here) we’ll dive even deeper into Behaviours inside of Flinto, and finish up the final two screens of our app.

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 1 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 1

Cool stuff, every week

More Articles