Creating static images of an interface is only a small portion of the battle nowadays. With the amount of tools for creating mockups of design interfaces available, screenshots are seeming more and more outdated.
I’ll be demonstrating the workflow I used for my first prototype using Framer, a tool for creating animated/interactive prototypes quickly and effectively made by and for product designers. My programming knowledge is nowhere near extensive, but Framer’s CoffeeScript is quite easy to pick up and syntax-wise is very similar to CSS (If you’re well versed in JavaScript, Framer will be a breeze to work with). I had looked into other prototyping software, such as Pixate (which has just recently said goodbye), but Framer appears to have much more versatility than many of its competitors (granted, it does also require a bit more coding than the “easier-to-pickup” alternatives).
Framer can be found here: http://framerjs.com/
Sketch, which is only for Mac, can be found here: https://www.sketchapp.com/
The End Result
Here we have a map application with a working prototype of a hamburger menu with two click-able tabs in the left panel. While it may not be the most beautiful interface / animation ever, we’re here to acquaint ourselves with Framer by creating a quick and functioning app prototype.
Starting in Sketch
Let’s get into it. I won’t be going over too much pertaining to Sketch in this tutorial, but we’ll be starting off by looking at my Sketch file and the folder structure I have. You can easily use Photoshop as a replacement or make something in Framer itself, but I had been using Sketch before picking up Framer and the compatibility is one of the reasons I did end up using it.
To keep things simple, the only interactive piece of this demonstration will be the left panel. As you can see, everything is grouped. Once imported into Framer, Framer will read the groups as layers and sub-layers that we can then manipulate. The importance of grouping and naming conventions cannot be understated here. The overlap seen in the image is due to the “Apps” and “Layers” tabs’ content being visible at the same time (I didn’t bother hiding them because that’s one more variable to deal with upon importing).
Importing into Framer
Hooray for super-simple importing options. Framer’s importer is awesome, just have your document open and Sketch should appear as an active option with the name of your file listed right underneath.
Setting up our Framer Device
Now, it should be mentioned here that the device I’m trying to emulate is a bit different in that I want a screen at 1280 x 850 pixels. Changing your code and defining the device as shown in the green box should fix the problem. Notice too that I’ve changed the default sketch = Framer.Importer… to map = Framer.Importer…, I’ve found this helps keep things a little less confusing as by default Sketch names your document “sketch.” Additionally, I’ve put the command Utils.globalLayers(file). This command allows you to access all of your layers without prefixing them with the document’s / containing layer’s name every time (helps a lot in my example).
Initial Values and Hiding Layers
My first block of code simply goes through and defines a bunch of layers and their visibility. Essentially, I want the left panel to be sitting right up against the “artboard,” if you will, so we can slide into the frame neatly when the time comes. I’ve added some text to explain the method I took to change the tabs color onClick (I have 3 separate pieces for each tab, there are probably better ways of doing this)! At the end of this defining stage, my frame looks a lot cleaner as seen on the right.
Framer has a built in “default” state that cannot be overwritten, so I chose to name everything initial to try and keep myself less confused.
States and Animation Options
At a glance this looks like a lot, but it’s really just super repetitive. I’ve placed these two blocks next to each other because there isn’t too much to learn content wise, especially when the right side is just animationOptions being defined over and over again.
To the left we have our states. I’ve gone about adding states to each layer by using the .states.add function (which — warning — may be outdated but still works fine so it should be alright). In these two sections I didn’t use my same commenting separators but the indentations help keep everything legible. Additionally, I’ve been defining my layers in the same order to help keep things organized. As seen here, all I’ve done is create states for when each layer is either inactive or active with the exception of the apps_tab and layers_tab layers, which are invisible and just need to “hold a pose” in order to be clickable.
On the right side (once again, there is definitely a better way to do this out there) I’m defining the basic animation option of time for how long the animation takes. The values are overwhelmingly 0.6, with only a few variations to make the animation look smoother in specific areas.
Wrapping up with onClick Events
Let’s return to a full-frame screenshot. My final bits of code are onClick events on three separate areas. After all the tedious and repetitive work of defining active and inactive states, let’s now have fun and make something switch those up. In my example I have the hamburger menu and the two tabs — Apps and Layers — animating content on the screen. This is all using the stateCycle command so I can specify exactly which state I want (and if I want to toggle them, as seen under the hamburger one, simply separating the states with commas works like a charm).
Hooray!
We’ve made it out alive. I hope you enjoyed this introduction to working with a Sketch file in Framer. There are some irrelevant layers in this demo which hopefully didn’t confuse you too much (the top and bottom bars, the x for the hamburger menu, the icon on the map, etc). This was in a sense a documentation of my own first time in Framer, and those are things I hope to animate soon as well. I’d definitely recommend looking into the program, and if you’re an individual with more coding knowledge than I have the code will be much more efficient, more than likely.
Thanks for reading! Here are some resources:
Framer Documentation: https://framerjs.com/docs/
