Prototyping an Interactive iOS Product Tour With Framer.js

Framer.js and its accompanying ecosystem Framer Studio are great tools for composing, presenting and iterating upon interaction design. In this post, I'll walk you through constructing an interactive prototype for a fictional iOS App’s Product Tour using Adobe Photoshop CC 2014 and Framer Studio 1.9.29. We’ll assume that we are creating a news feed app, in which updates from the user’s network are displayed in a timeline, while settings and additional options are displayed in a sidebar.

Play with the prototype on the demo page (webkit-based browsers—Chrome, Safari, etc—are supported).

1. Initial Setup

Create Assets in Photoshop

First, create your assets in Photoshop. The Product Tour will consist of four steps:

1. Introduction to the App
2. Introduction to the News Feed
3. Introduction to the Sidebar
4. Login Screen

When working with Framer, it is important to note that only grouped, visible Photoshop layers will be imported into Framer Studio. Group your layers by interaction (i.e. things that have the same interaction should be grouped together), as you'll access things by their group name when you're working in Framer. For this product tour, I have grouped my layers by their function:

These layers will be accessible in the code later via myLayers.doneButton, myLayers.dots, etc. 

Import Into Framer Studio

Next, import your assets from Photoshop into Framer Studio. Your Photoshop document must be open and saved when performing an import. Click the Import button, and you will see a dialog which looks something like this:

Framer will flatten your groups into images when importing, and your assets will be accessible in Framer after the import is complete.

Use Variables to Easily Manipulate Later

It is best practice to turn your imported grouped objects into variables once you have imported into Framer, as it will make it easier for you to manipulate the prototype later if you need. 

For example, at a later date, you may want to use a different Photoshop file with differently named groups, but with the same interactions you've already created. This will be much easier if you structure your interactions around variable names, as you can simply switch the variable’s reference on one line and have it reflected throughout the rest of the document:

1

# This imports all the layers for "tour" into tourLayers

2

ly = Framer.Importer.load "imported/tour"

3

4

## ------------------- VARIABLES ---------------------

5

welcome = ly.welcome

6

dots = ly.dots

7

moveDot = ly.movingDot

8

done = ly.doneButton

9

login = ly.login

10

logo = ly.logo

11

news = ly.newsFeed

12

siderbar = ly.siderbar

13

gradient = ly.gradient

14

background = ly.background

15

feedDescription. ly.feedDescription

Now that we have some assets to work with, you can begin creating the interactions that will bring your prototype to life. 

Use States

If you have assets that will have different interactions within your composition, states are a powerful way to structure your code. In this prototype, the four steps of the tour will each use different assets in different ways. States will allow us the flexibility to define each piece of the composition independently, increasing the modularity and readability of the code. 

For example, our news feed screen will have four states: 

1. Original (right side of the screen, not visible)
2. Shown (center of the screen)
3. Sidebar (far right side of screen)
4. Hidden (left side of the screen, not visible)

Our states will reflect these positions by setting different x values based on where the news feed should be in a given part of the tour:

1

news.states.add

2

    origin: { x: 750 }

3

    shown: { x: news.originX }

4

    sidebar: { x: 655 }

5

    hidden: { x; -750 }

2. Structure Interactions in Framer

Enable Dragging on Layers

For the product tour, we want to illustrate different areas of the app after a user has swiped left to get to the next part of the product tour. To do this, first enable dragging on the layers where you'd like to allow it.

Create an array:

1

dragLayers = [welcome, gradient, gradient2]

Then create a for loop to iterate through this array, adding draggable properties to these layers:

1

for drag in dragLayers

2

    # Enable dragging

3

    drag.draggable.enabled = true

4

    drag.draggable.speedY = 0

5

    # Prevent dragging left to right

6

    drag.draggable.maxDragFrame = drag.frame

7

    drag.draggable.maxDragFrame.width *= 2

8

    drag.draggable.maxDragFrame.x = drag.x-drag.width

• enabled = true allows the layer to be dragged
• speedY = 0 disables dragging along the Y axis
  
• maxDragFrame = drag.frame sets the frame within which one can drag to stay within the layer itself
  
• maxDragFrame.x = drag.x-drag.width allows the frame to be dragged along the x axis negatively (i.e. right-to-left)

Change States When Dragged Beyond a Certain Point

After enabling dragging on the layers that you wish, target the layers and change your assets’ states when they are dragged a certain degree.

1

welcome.on Events.DragEnd, ->

2

    if welcome.screenFrame.x < -150

When the user has finished dragging the welcome layer, if they have dragged it beyond 150 pixels to the left (screenFrame.x < -150), then change the states of the prototype to the news feed state:

1

welcome.on EventsDragEnd, ->

2

    if welcome.screenframe.x < -150

3

		welcome.states.switch "hidden"

4

		news.states.switch "shown"

5

		moveDot.states.switch "second"

6

		gradient.states.switch "shown"

The states of other elements will need to change accordingly (hide the welcome state, move the dot at the bottom to reflect step 2 of the tour, etc.). Then we repeat for the other draggable layers (gradient, gradient2) and change the states accordingly. Continuing in this fashion, we can create a fully fleshed-out prototype for our product tour. 

Animate Layers in an Array Individually, Adding a Slight Delay

Animating the individual status updates in the News Feed rather than the entire group will give the prototype a sleeker feel, as demonstrated in the (very small) animated gif below:

First, create an array of the layers you want to animate:

1

newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]

Then, create a function to animate each layer to the desired x location, adding a delay of 0.1 between each animation:

1

newsCurve = 'spring(50, 30, 30)'

2

newsAnimation = ->

3

    for i in [0 .. newsLayers.length-1]

4

		newsLayers[i].animate

5

			delay: i * 0.1

6

			properties:

7

				x: 0

8

			curve: newsCurve

Pro Tip: Create Functions for Your Interactions

If you are going to be re-using certain interactions at various places throughout your prototype, consider creating functions so that you can re-use them later on. So rather than writing your animation multiple times, write it once and re-use it where necessary. Create an animation that can be re-used using a method such as:

1

Layer::fadeOut = ->

2

    this.animate

3

	    properties: 

4

			opacity: 0

5

		curve: 'ease-in-out'

6

		time: 0.5

Then, afterwards, you can "fadeOut" any layer by calling: myLayer.fadeOut() 

Conclusion

Framer is a great tool for creating modern, silky, highly-interactive prototypes rapidly. Incorporating it into your workflow—creating your layouts in Photoshop (or Sketch), then manipulating via Framer—will allow you to create robust prototypes much more quickly. 

You will also be able to modify your designs in your visual layout tool and then import directly into Framer, allowing for more efficient iteration as development progresses. If you have properly set up your document with variables, then your interactions will apply to the newly imported assets, allowing for rapid iteration upon interaction and visual design ideas. If you were to deliver static interaction design, you would need to update multiple static comps with new visual elements. Using this workflow, however, you just make a change in a single parent document, re-import to Framer, and voila!

Stay tuned for more tutorials on prototyping. Also, feel free to comment below, and I will get back to you as soon as possible. Happy prototyping!