Prototype user flows in Framer Studio

Update 4/4: Follow-up article: Use Sketch to generate UI flows in Framer.

Framer is great for micro interactions — but what about larger user flows? This tutorial will show you how to combine the best of two worlds with minimal coding required. See final project here: http://share.framerjs.com/jiz7grxvlipy/

Step 1 — Add some modules

For this tutorial we’ll use an example Sketch file. You can download it here, or just follow along using your own Sketch project.

Start off by creating a new Framer Studio project and download the Find module as well as the ViewController module and put them inside your project’s /modules folder. Include them at the top of your project like this:

Use option+f to type the florin sign: ƒ. Make sure you get the curly brackets right.

Step 2 — The View Controller

Let’s add some basic interactions.

The first thing we need to do is to add a ViewController to our project. The module is imported, but we haven’t added an actual controller yet. Let’s create one called Views and add a start screen (initialView):

Views = new ViewController
initialView: sketch.menu

This will create a ViewController with the same size as your viewer. Switch to an iPhone 6 inside Framer Studio if you’re using the example file to make sure everything looks right.

The ViewController includes about 20 built-in animations. You can access them by using Views.animationName(layer). Visit the GitHub page for a full overview. Let’s add a pushIn animation to each button on the start page.

sketch.btn_profile.onClick -> Views.pushIn(sketch.profile)
sketch.btn_friends.onClick -> Views.pushIn(sketch.friends)
sketch.btn_settings.onClick -> Views.pushIn(sketch.settings)

You should now be able to click on the buttons and have them animate to a new view. That’s the basics. Now you’ll need to do this for all views and all buttons in your project. That’s a lot of work, though. Especially if you have 20+ views. What if you could manage your links inside Sketch by just using layer names?

Step 3 — Automatic links based on layer names

Let’s add automatic links using the Find module. The Find module includes two functions: ƒ() and ƒƒ(). Each function takes a selector, similar to CSS, and searches through your layers’ names for matches. ƒ() will return the first match, whereas ƒƒ() will return all layers in an array.

Let’s try finding all the buttons in our project:

print ƒƒ('btn_*')

This should print an array of all layers in your projects starting with “btn_”.

Now we can use this to loop through all the buttons and make each link to the corresponding view. Replace your previous code from step 2 with the following:

Views = new ViewController
initialView: sketch.menu
for btn in ƒƒ(‘btn_*’)
btn.onClick ->
link = @name.replace(‘btn_’,’’)
Views.pushIn ƒ(link)

Let’s walk through the code. First, we set up the ViewController. Nothing different from step 2. Next, we loop through all layers starting with ‘btn_’. Each button gets a click event, where we save the name of the clicked layer but remove the ‘btn_’ part. The remaining string should be the name of the view we want. Lastly, we use ƒ() to find a layer with that name and animates it using Views.pushIn().

Try clicking the settings button — you should know be able to walk through the whole flow.

You can now go back to Sketch and rename the btn_ layers to adjust the links. Why not add a new artboard while you’re at it? Just re-import the changes to Framer when you’re done and all the links should work automatically. No extra code required!

As bonus, we can activate the back buttons in the top left corner of each screen using the following code:

for backBtn in ƒƒ(‘back’)
backBtn.onClick -> Views.back()

See final project here: http://share.framerjs.com/jiz7grxvlipy/

That’s all! Hope you found it useful and thanks for reading!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.