Here at Humaan we find prototyping to be a valuable asset to our everyday skill set, particularly in projects where concepts need validating or to better explain design choices to our clients. It can provide something tangible for the client to interact with while they consider design concepts, delivering a more complete understanding of the intention. It’s also useful for immediate user testing and gathering feedback before a client commits to a large development project.
Prototyping has gained momentum in recent years and this has led to the arrival of quite a large selection of prototyping tools, with the tool selection itself posing its own set of challenges.
On a recent project we were tasked with designing and producing a prototype for an app that would engage users through video content. Fortunately for us, the decision on which tool to use was made easier by the unique requirements of the project: we needed a prototyping tool that could support video, so Framer was the natural fit.
A background on Framer
What we’ll be creating
Our focus for today will be to create a simple prototype with a button that when tapped, will animate another layer between three different states, with the final state being the same as the starting point (allowing us to loop through those actions). Below you’ll find a demo of the outcome which you can test by clicking on the orange circle.
Before we get stuck into recreating this demo though, we wanted to give you a quick primer on the Framer interface, working with layers and the available options.
Setting up your prototype
When starting a new prototype in Framer, there are a few key things you’ll need. Firstly, you’ll need to decide the device you’ll be developing the prototype for, such as an iPhone 6. While it is absolutely possible to develop the prototype for multiple devices and screen sizes, it can quickly become more complicated working with layer sizing properties. For the purpose of this article, we’ll assume we’re working with an iPhone 6.
Secondly, when you first open the application, you’re presented with the option to subscribe (or skip) before being taken to the main welcome screen. From here you can start a fresh new project, or start a new project based on one of their key interactions in Animate, Drag, Scroll or Page as seen in the screenshot below.
Creating our layers
Okay, now we get into the fun stuff. Framer prototypes are made up of layers. Layers themselves can be likened to <div> elements in HTML. And just like HTML, you can choose to create child layers that inherit properties, and base x/y coordinates of the parent element, much like an absolutely positioned <div> may sit within a relative parent.
One of the great things about Framer is it gives you the ability to speed up your layer creation process by importing assets directly from Photoshop or Sketch. To do so, click the Import option in the toolbar to reveal a panel with the relevant application prompts. Before doing that, it’s important to note that there are some file setup tips that can make the process a little less painful. Our recommendation would be to download and view the example import templates provided by the Framer team and try to apply similar PSD or Sketch layering techniques to your own files.
If you’d prefer not to import your design, or it doesn’t seem to be working as you’d hoped, you can always create your layers by hand. In our demonstration we’ll create our new layers by hand. The first step will be for us to create two new layers. Our button, and the layer that we’ll be animating, like so:
Breaking down the above code we can see that both myLayer and myButtonLayer are defined the same as new Layer().myLayer is 200 pixels wide by 200 pixels tall. Because this layer isn’t a child of another layer, its position is 270 pixels from the left edge and 300 pixels from the top edge of the screen. If it was created as child layer (by adding superLayer: parentLayerName) its x and y positions would be based on its parents x and y positions. For example: If the parent was positioned x:20 and y:20, then the child would be position an additional x:270 and y:300, leaving its position relative to the screen edges at x:290 and y:320. As for the other properties, hopefully they are relatively self explanatory but for further extensions on layers there are many options available.
Defining our animation states
When animating with Framer, a single animation can be defined by extending the layer using .animate() and assigning the relevant properties or by defining multiple ‘states’ that can be animated to. Before we define the animations from our demo, please see below for an example of a single animation.
Under ‘properties’ we can see the same presentations options we have when creating a layer. These values are what its final form will be, and the application will handle the transition between its current values, and these new ones. In addition, this approach allows you to also define time as the duration, as well as a curve for easing related properties.
Now, looking at our demonstration we were required to create three different stages of transition that our layer will go through. To do that we need to extend the layer we want to animate (myLayer) by adding states as we need them, like so:
In the above example we’ve used the state names of step1, step2 and step3, however these can be named whatever you like provided they don’t break any naming conventions. Then, much like a single animation, within each state we must define the properties we want to transition, like so:
The piece of the puzzle missing from the single animation example were its transition properties. These are defined by extending the layer and its subsequent ‘states’ further like so:
To switch between animation states it’s possible to jump to any state by calling myLayer.states.switch(‘myStateName’) and replacing myStateName with the state you’d like to animate to, such as step1. Using the above example, each time an animation state switch is called, the animation will run over the duration of 1 seconds with an ease-in-out curve. Full animation properties can be found here.
Making it move
Now that we’ve defined our two layers and the animation states, let’s connect it all together using a click event on our button, like so:
Looking at the above code, the first new thing is our defined event, in this instance we’ve used the standard Click event (there are more available) that is triggering a multiple state switch that will jump in order between step1, step2 and step3. It’s probably worth noting that you could order these however you like, the .next() declaration will cycle left to right and repeat once it reaches the end.
Testing your prototype
If you’ve been following along and working inside Framer as you’ve been reading this, you’ve probably been noticing the display on the right hand side of the application refreshing as you make changes to your code. This is a nifty little thing and a really easy way to test as you go. However, if you want to take your testing a step further and run it on your phone, this is possible using Framer’s built in Mirror feature. Note: you’ll need both machine and phone to be connected to the same network.
Within the application interface, locate the Mirror option around the top right hand side of the window. Once you’ve clicked that, a little popup with options will appear. From those options clicking ‘Open in Browser’ will launch your default browser and open a new window pointing to a new URL that looks something similar to this http://10.1.1.24:8000/9HQA5N/Demo.framer/. From there if you type the same URL into your phone browser it should return your development file.
When mirroring from the app to your phone, any changes you make will only roll out to your phone when you Save your project, not with all small changes you make.
Share it with your mates
So you’ve created your prototype and now want to share it with others and show them what you’ve produced. Framer have made this process quite simple through the share button (found next to Mirror). Clicking this button will upload your project to the Framer website with a web address that looks like this http://share.framerjs.com/09w7fnf7gxup/. However, if you would prefer not to upload the example to the Framer share website you can instead upload the files Framer creates to your own hosting environment and visit the url to test or share.
We’ve only very briefly scratched the surface of what Framer is truly capable of in this article but hopefully we’ve been able to shed some light on prototyping itself and how to work with Framer to produce a prototype of your own.
To help you dive deeper into Framer, please see below for a few more resources that we found helpful during this project.
These can be downloaded so you can explore and play with the source code. This was invaluable to our process of learning framer and applying that into our project work.
- Full documentation
The team behind Framer have provided some really comprehensive documentation on their application. Worth keeping open as you work with the application.
- Presentation and articles
At the bottom of this page are a list of presentations and articles from others who have worked with Framer before.