UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

Create UI flows using Sketch and Framer

Andreas
UX Collective
Published in
4 min readMay 2, 2016

“Slide in right” is one of the pre-made transitions you can use to kickstart your Framer project

Framer is a prototyping tool known for its great capabilities when it comes to designing micro-interactions. You can easily prototype gestures, animations and logic in ways that are hard to achieve in other tools. However, putting these micro-interactions into context is often harder than it should be. Creating larger UI flows is possible but will take you a lot of time. Tools like InVision, Marvel or Flinto makes this happen in just a few clicks but lacks the flexibility Framer brings when it comes to getting the details and interaction right.

The new ViewController module for Framer is an attempt to bring you the best of both worlds.

Try the demo prototype here

What does it do?

When you use Sketch to import layers they usually end up all over the place. Switching between them and toggling visibility can be a bit cumbersome. The ViewController not only helps you with this but also animates them into view using one of the 18 pre-made transitions.

A “push in right” transition

Linking to another layer can either be done in code, like this:

layerA.onClick -> Views.pushInRight(layerB)

Or using the Sketch plugin, like this:

Here’s how to get started

Step 1 / Start off by downloading the ViewController project here. It includes two files: a framer module (ViewController.coffee) and the optional Sketch plugin (ViewController.sketchplugin).

Step 2 / Open a Framer project and drag-n-drop the ViewController.coffee file onto the code area. This will copy the file to your project’s /modules folder and automatically insert the following code at the top:

ViewController = require ‘ViewController’

Step 3 / The module is now imported. The only thing left is to create a new ViewController. Add the following code below the previous line:

Views = new ViewController
initialView: layerA

This does two things: It creates a new ViewController and it also defines which layer it should start showing when you load the prototype.

Step 4 / Now, you can start to create links using one of the transition methods. Here’s the same example from above, again:

layerA.onClick -> Views.pushInRight(layerB)

To choose another animation, just switch the name of the method to one of the supported transitions.

Views.fadeIn(layerB)
Views.slideInUp(layerB)
Views.moveInRight(layerB)

For a full overview of available transitions, see the Github page.

If you want to user to be able to go back in history, just use:

layerB.onClick -> Views.back()

The ViewController will then reverse the transition and navigate back to the previous screen.

Using the Sketch plugin

As previously mentioned, the ViewController project also comes with a Sketch plugin. This allows you to generate a full clickthrough prototype without ever leaving Sketch. This time, we won’t be needing code to generate our links.

An example of how you create a link using the Sketch plugin

Step 1 / Double click the ViewController.sketchplugin file to install the plugin.

Step 2 / Select two layers inside your Sketch project: one layer which you want to user to click and one layer which you want to animate in.

Step 3 / Run the plugin from Plugins > ViewController > Create a link

Step 4 / Choose one of the available transitions and import the changes to your Framer project.

Step 5 / Follow step 1–3 from the section “Getting started” to set up a ViewController.

Next steps

Now that you’re starting to get familiar with the module head over to the Github page and skim through the full documentation. You’ll find more examples, more features and more transitions to play around with.

Quick links

Thanks

Thanks to Chris for the original inspiration and to Stephen, Jordan, Jason, Koen, Fran & Marc for early feedback. Also thanks to the team at InVision for the DO UI Kit, which is used in the example projects and screenshots.

Thanks for reading!

Responses (13)

Write a response