Posts

Archives for April 2014

April 28, 2014

Hello Framer: Getting started with Framer.js

Welp, this tutorial is (already) outdated since Framer’s 3.0 release on May 13, 2014. I might revise it someday, but for now, the Framer.js website just got a great facelift and a ton of brand-new examples that practically teach themselves.

Why Framer?

Framer is a balanced prototyping framework, created by Koen Bok. It’s Javascript-based but accessible to designers who want to create minimally real prototypes with real-feeling interactions. It’s awesome, and fun, to experiment with and dial in animations using Framer. It’s invaluable when sharing interaction designs with a team. If you’re stringing together static screens into clickable paths use Keynote or InVision, but if you want finer control over gestural interactions and motion, Framer is the way to go.

If you know Javascript, you know Framer. So, nice work there.

If you don’t know Javascript: admittedly you’ll have to ramp up and spend a little time on CodeAcademy or something. You need a grasp of basic syntax and principles. But Javascript isn’t specific to Framer, and you’re learning the language of the modern web. The ROI of that time’s going to be greater than investing in a deprecated motion graphics tool or one of many proprietary prototyping GUIs.

This tutorial will teach the basics of how Framer.js works with Photoshop, how to set up a mobile prototype and build a super basic slide-out navigation. It assumes some super super super basic Javascript knowledge but is targeted at beginners. It is also pretty damn long. By the end you’ll have wired up a slide-out menu interaction and with any luck will feel empowered to get real dirty with Framer on your own.

Follow along by downloading the sample files, in which we’ll be prototyping an iOS Tinder clone that we shall call The Hollerator.

Screen Shot 2014-04-26 at 6.07.09 PM

Let me holler atcha

What Framer does

My Framer workflow looks kinda like this:

  1. Build mockup in Photoshop
  2. Export from the .psd to Framer views using Framer.app
  3. Work in app.js to create interactions and manipulate views
  4. Iterate as necessary, bouncing between Photoshop, re-exporting, and tweaking code

First things first: download the app from the Framer website. It integrates with Photoshop out of the box (and Sketch with a plugin if that’s more your thing).

Screen Shot 2014-04-27 at 1.34.41 PM

Open up Framer.app and you’ll see a single modal window with a “Run” button. When you click that “Run” button Framer chugs through the currently-open Photoshop file and generates .png files from each layer set. If it’s your first time running it, a directory will be created with the same name as your Photoshop file. All of the generated images will end up in the /images directory contained within.

Screen Shot 2014-04-27 at 1.39.34 PM

You’ll notice that if you re-run Framer as you continue building out your Photoshop file, it’s smart enough to overwrite any existing images, and add new ones. It won’t remove unused images, but won’t create views from them either.

Framer project files

Framer generates a bunch of other files, too, all of which are necessary to create and view your prototype.

/framer is a directory that contains the framer.js core Javascript along with the information that turns your exported images into Framer views and positions them. There’s seriously no reason to touch anything in this directory.

index.html is the file that you’ll open in a browser to view and eventually interact with your prototype. Framer will generate this once and won’t overwrite it, so any changes you make will persist.

app.js is where you’ll put the Javascript that manipulates views and adds interactivity to the prototype. This also won’t be overwritten.

Extras

If you downloaded the sample files, you’ll notice a few extras: I find that they help my workflow and I copy them into new Framer projects right away.

/desktop was jacked from the Google Now example on Framer’s own site (the version with this is no longer linked, so I’m glad I did this). The contents within will shrink the prototype down and view it in an iPhone frame if you’re running it on a desktop browser. I find this helpful when I’m prototyping a mobile app. You might not, which I respect but won’t pretend to understand.

Screen Shot 2014-04-26 at 6.35.28 PM

style.css contains a few CSS rules required for the mobile preview mode. Again, if you aren’t into that, you can get rid of these.

framer-toolbelt.js contains a bunch of convenience and helper methods to work with Framer. This post from Cemre Gungor is where pretty much everything in this file came from.

The Guardfile is necessary because I use guard-livereload to refresh the browser automatically whenever I update code. I use Guard out of habit but if you prefer something with a GUI either CodeKit or Cactus (also created by Koen Bok!) both look great.

Getting started with Photoshop

Key premise: for every layer set in your Photoshop file, Framer will create a “view” that you can manipulate. That means it’s really really really important to keep your game tight when it comes to organizing and naming layer sets.

Framer allows us to manipulate these views using Javascript using the name of the layer set. I use initial caps and camel case for layer sets I want to export, which helps me identify these as view objects in the code as well as in the Photoshop file.

Take a look at the .psd from the example files. There are two layer sets on the base level: Main contains content for app views, and Menu is the content for the navigation. Organizing them like this will let you slide the Main view aside and reveal the navigation with some simple Javascript in the next step.

Screen Shot 2014-04-27 at 10.57.26 PM

Inside the Main layer set is the Topbar and the prototype’s single view, Match. If you want to build a more complex prototype, this setup allows you to add multiple views for different screens at the same depth as the Match layer set and turn their visibility on and off with code. Within the Topbar there’s a child layer set, BtnMenu, for the hamburger button in the upper left.

The last thing to note is that within the Match view I’ve separated the Content from the Background, and within the Content view created named layer sets for each of three cards as well as the add and dismiss buttons.

Protip: if a layer set’s visibility is off in Photoshop, it won’t export. This is both helpful in only exporting what you really want, and painful when you forget to make a layer set visible and then spend 15 minutes wondering why in the actual fuck you don’t see it in the prototype.

Another protip: if you have multiple layer sets with the same name, Framer will append “-2″, “-3″ and so on to them when it exports them to views. And it won’t make an exception if it was an accident, so, remember, keep that organization game tight. TIGHT.

It’s business time

Once I’ve got things reasonably well-set-up in Photoshop, I run the first of many Framer.app exports. Since running Framer.app isn’t destructive, but additive, have no fear of iterating on not just the prototype’s code but the Photoshop file itself.

The first thing I’ll do is add all of the extra stuff (desktop previewing and the framer-toolbelt.js) I mentioned above to the project directory.

Screen Shot 2014-04-27 at 9.44.58 PM

The next thing to do is open index.html and augment the defaults that Framer gives us. I’ll add in a link to style.css:

<link rel="stylesheet" href="style.css" />

And also replace the default <body>

<body>
  <script src="framer/views.framer-tutorial.js"></script>
  <script src="framer/framer.js"></script>
  <script src="framer/framerps.js"></script>
  <script src="app.js"></script>
</body>

with

<body>
  <script src="framer/views.framer-tutorial.js"></script>
  <script src="framer/framer.js"></script>
  <script>
    utils.domLoadScript("framer/framerps.js", function() {
      utils.domLoadScript("framer-toolbelt.js", function() {
        utils.domLoadScript("app.js");
        if (!navigator.userAgent.match(/iPad/i) && !navigator.userAgent.match(/iPhone/i)) {
          utils.domLoadScript("desktop/iphone5.js");
        }
        document.body.addEventListener('touchmove', function(e) { e.preventDefault(); });
      })
    })
  </script>
</body>

This loads the Framer core normally and then sequentially loads other files that have dependencies. It also checks if you’re viewing the prototype on an iOS device, and if not loads up the desktop preview. Finally, it blocks the touchmove event on the body so in mobile browsers the prototype itself doesn’t slide around in the viewport.

Now let’s open app.js. You’ll replace the autogenerated contents of this file with your actual prototype’s Javascript. Just delete everything in here and start fresh.

I add these two lines of Javascript first:

FramerToolbelt.createGlobalsFromPsd();
FramerToolbelt.attachToDemoScreen(Menu, Main);

The first line calls a method from framer-toolbelt.js that creates a global variable for each view exported from your .psd file. (Again, credit to Cemre Gungor for this.) Normally, you’d refer to views as properties of the global PSD object that Framer provides, like PSD['Main']. This method just makes them available as global variables that you can reference directly: PSD['Main'] is now just Main, PSD['Menu'] is Menu, and on and on.

The second line calls a method that sets up the desktop preview mode. Pass in references to all of your top-level views (remember, in the .psd file we’ve just got two layer sets, Main and Menu, at the root).

Now open up index.html in a browser window and feast your eyes on something that should resemble this:

Screen Shot 2014-04-27 at 10.06.28 PM

Ok, but it doesn’t actually do anything yet. Let’s change that by adding an interaction to show and hide our slide-out menu.

We want the user to tap the hamburger button in the upper left, which should then slide the app content over to reveal the menu “behind” it. So let’s write a function to do just that, and call it when you click or tap the hamburger button, which is the view called BtnMenu.

var toggleMenu = function() {
  Main.animate({
    properties: {x: 540}
  });
}
BtnMenu.on('click', toggleMenu);

You can manipulate the position, rotation, opacity, scale—anything documented here—of every Framer view with the animate() method. Framer gives us the ability to listen for events on any view as well. So what we’re doing with the above is first declaring a function that will move the Main view to the right, and calling that function when we click (or tap) the BtnMenu view.

So that’s cool, but Framer uses a default time of 1 second for animations which is way too slow for this. Generally, I find that animations triggered by a user action feel most responsive somewhere between 200 and 300 milliseconds. Just add a time property to the animate() method to speed it up.

Main.animate({
  properties: {x: 540},
  time: 300
});

Now you’ll probably want to close that menu after opening it. That means reversing that animation if the nav is already open. We’ll need to keep track of whether the menu is open or closed and we’ll use a global variable called isNavOpen for this:

var APP = APP || {};
APP.isNavOpen = false;

Declaring the APP object first creates a namespace for this and any other global variables you need for your prototype. And now that you have it, use it in the toggleMenu function:

var toggleMenu = function() {
  if (APP.isNavOpen === false) {
    Main.animate({
      properties: {x: 540},
      time: 300
    });
  } else {
    Main.animate({
      properties: {x: 0},
      time: 300
    });
  }
  APP.isNavOpen = !APP.isNavOpen;
}
BtnMenu.on('click', toggleMenu);
Menu.on('click', toggleMenu);

Now this function’s smart enough to know whether the nav is open or not, trigger the right animation, and then update the state of the navigation. You can also bind it to the Menu view itself so if you tap anywhere on the menu once it’s visible, it’ll close.

More resources

I’m planning on writing up some ongoing Framer tips and building on this beginning tutorial with deep dives into animating and gestural interactions with Framer. This’ll hopefully just add to a great library of documentation, samples and other tutorials released as Framer’s steadily gained popularity. Here are but a few:

The Framer docs themselves are the best place to start, of course, and there are some solid examples of working prototypes on the Framer.js site to dissect and learn from.

Robb Schiller wrote a concise introduction to Framer that helped me ramp up quickly. I also found another introduction to Framer which goes a little more in-depth.

And the Framer.js Hackdesign lesson gathers a lot of resources on Framer into one place. The introductory video is definitely worth watching.

April 21, 2014

UXPA LA Presentation + Updates

A couple weeks ago I snuck my way onto a panel of seasoned UX leaders talking about the peculiarities of UX in our different orgs: startup, agency and enterprise. I talked about how we do UX at Fullscreen; here’s the deck.


In other news I’m unsurprisingly falling off on blog frequency but will soon be dropping a tutorial that shows how to prototype a mobile app using Framer. So, yeah, that’s exciting.