Prototyping just went to the next level with Framer

Published in

Design + Sketch

12 min readApr 14, 2016

The latest version of Framer really brings closure (well my personal opinion anyway) to the ‘should designers code’ argument. Never has there been a greater opportunity, as a visual designer, to get your hands dirty with code. With this version, the awesome folks behind Framer have married the relationship between design and code perfectly. If you’re a seasoned user and want to stick to the original format of Framer, and hand-code all your interactions? Go for it. If you’re coming from a more design-orientated background and prefer to come at the application from a more visual standpoint? Do it that way. Want to walk a line between the two? Framer is going to make you very happy indeed.

With this brief tutorial, I’ll be showing you how to take a couple of screens from Sketch, and then importing these into the latest version of Framer. With some handy little tips along the way. A perfect introduction to Framer for all newcomers present.

Hopefully you’ll come out the other end of this tutorial with more of a “This Framer tool ain’t that scary no more” attitude. Well that’s the plan anyway.

Let’s get to it…

Go ahead and download all 3 of these beauties…

Sketch
Framer
Sketch file (you’ll need this for importing into Framer)

All cool? Installed? Sweet!

Fire up Sketch, and open up the design file you just downloaded. You need this file open so Framer can locate it when it’s ready to import.

Take a peek at the screens in Sketch

If you take a look at the Sketch file you will see 2 simple screens. One for the Checkout, and the other for the Confirmation screen that fires once the ‘Buy Now’ button has been pressed. Dead simple, but will allow you to not get over-faced if this is you first journey into the magical world of Framer (cue some dramatic music, Hans Zimmer style).

Quick Note: Let me jump in and advise on some good practices to use when creating your Sketch files…

Group each layer that you want to import into Framer, otherwise they will be ignored. Yup, even if you have a single image layer that you would like to animate in Framer, you still need to group it Cmd + G
Use CamelCase for your group names (ie; thisIsMyGroup). This is consistent with the naming conventions used in CoffeeScript which is the programming language that powers Framer. Remember that your group names in Sketch will become variables in Framer, so start as you mean to go on
If you have a layer group in Sketch that you don’t intend on adding any interaction/animation to in Framer, then you can flatten this simply by adding an asterisk (*) to the end of the group name (ie; thisIsMyGroup*)
Try to give each of your groups a unique name. This just means they will be easier to reference inside of Framer, and also avoids Framer using names such as myGroup, myGroup1, myGroup2 etc… when it’s done its import magic. Now, this may not always be practical, and if you’re using Symbols in Sketch there will be times when Framer’s naming conventions will have to come into play, whether you like it not

Let’s jump on over to Framer

Over to Framer now for the really cool stuff.

When you open the application you’ll be presented with 4 main areas.

The Toolbar across the top (clean, uncluttered, and fat-free) contains just the minimum of buttons, and for this tutorial we’ll only need to be using a handful of those. Namely…

Insert (Where all the Auto-Code awesomeness lives!)
Import (Or use the shortcut Cmd + I, and Shift + Cmd + I to import again)
Reload (Or use the shortcut Cmd + R)

On the left-hand side you have the code editor, where in this short tutorial, we’ll be doing a mixture of hand-coding, and also putting the awesome new feature: Auto-Code to good use.

In the centre column you have a section that has 2 functions. The majority of the time it will display the screens, and layers you have imported from Sketch, and on occasion, when using Auto-Code it will display the properties for the layer you are working on, so you can tweak to your hearts content.

On the right-hand side is the preview area, where you can see your prototype brought to life inside of a varied assortment of device mocks. If you’re a fan of the iPhone 6s in Rose Gold, go for it!

Quick Note: The design that was created in Sketch was for the iPhone 6s, so you can leave the device as the default for now.

Importing in our Sketch file

Ok, so click on the Import button in the Toolbar, or use the shortcut Cmd + I to bring up the Import window.

You will see that Framer has taken note of the Sketch file we currently have open. Now, just go ahead and select 2x from the select menu, as the Sketch files we are using was created at 1x, then go ahead and click Import.

You’ll now see our 2 screens imported into Framer, with the layer hierarchy preserved from our Sketch file. Framer will of course show the first screen (Checkout) with it’s x and y properties set to 0,0. The second screen (Confirmation) is positioned relative to this, out of the view of the device screen.

In the code editor you will see the following…

Order_ConfirmationA = Framer.Importer.load("imported/Order Confirmation@2x")

Change the variable to…

sketch = Framer.Importer.load("imported/Order Confirmation@2x")

Which just allows for much easier reference in your Framer project.

I also like to set a global variable at the top of my Framer files. So I can keep the code a little more manageable, and means less typing (always a good thing right).

Go ahead and pop this into the Framer file…

{item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch

This references all of the Sketch layers that we’ll be creating some kind of interaction, or event for inside of Framer.

Now, instead of typing something like…

sketch.buyNowBar.onClick (event, layer) ->
    sketch.Confirmation.states.switch("fadeIn")

…we can simply use…

buyNowBar.onClick (event, layer) ->
    Confirmation.states.switch("fadeIn")

Ok. Let me show you a video demo of what we’re wanting to achieve in this short tutorial…

Video examples not really your bag? No problem. Have a play with the prototype here http://share.framerjs.com/le526ymo5hsk

Just a couple of animations on the ‘Checkout’ screen, and then a few more that are fired on the ‘Confirmation’ screen after a click event. Boom!

Set some defaults

From viewing the example video you will see that there a few elements that are set ‘off-canvas’ to begin with, and then animated into view, as well as their being a transition from one screen to the other. So we need to make some adjustments to how those layers are set initially, so we can create the animations you see in the example video.

Let’s go ahead and do that.

Pop in these (default) layer settings for each of the layers that we’ll be working with…

# Item
item.scale = 0
item.opacity = 0# Buy Now Bar
buyNowBar.y = 1334
buyNowBar.opacity = 0# Confirmation Screen
Confirmation.x = 0
Confirmation.opacity = 0# Background Image
backgroundImage.scale = 1.5
backgroundImage.blur = 20# Success Badge
successBadge.y = -900
successBadge.opacity = 0# Message
message.scale = 0
message.opacity = 0

To give you a quick overview of what’s going on there (for example with the ‘item’ layer). You can see that we’ve assigned the variable name…

item

..and then added the dot notation, which is a connector to the property that we want to use…

scale

…and then assigned this a value…

“But I can’t see my t-shirt image now?” Yup. And that’s where the awesome new feature of ‘Auto-Code’ comes into play…

Setting States with Auto-Code

Before we move on, let me mention that as awesome as the new Auto-Code feature is, there is still a bit of hand-coding that is required on occasion. Much less than there was in previous versions of Framer, but still enough to keep you on your toes. Believe me, even if you just went in all code-blazing, Framer with it’s Auto-Complete, and insanely detailed documentation is still much easier to pick up than you might realise. I’m sure in future updates that Auto-Code will become even more feature-packed than it is now, so bear that in mind.

Item States

Ok. Let’s set up some states for our ‘item’ layer, and bring it back into the picture.

From the Insert button in the Toolbar, choose State > item.

You will then see a small snippet of code appear in the editor, and the Properties panel appear in the centre column.

And this is where Auto-Code truly comes into play. Bring it on!

So using the Properties panel, make the following adjustments…

Opacity: 1.00
Scale: 1.00

And what do you know! We’ve brought our t-shirt back to life. Well it’s appeared on the device screen again, which is handy.

But wait! Once you’ve made the property adjustments, and then click back to the code editor the layer vanishes into the ether?!

Not a problem. Your layer is still there with the state you just added. Just click on the Edit icon to the left of your code, and boom! You can see the item layer again on the device screen.

Quick Note: Any time you want to manipulate a layer on the device screen, or change its settings via the Properties panel, remember to click on the Edit icon to jump back into edit mode.

You’ll see our state is currently set with a default name (stateA). Let’s change that to something more relevant to the animation that we’re creating.

Change it to the following…

item.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00

Quick Note: Indentation is used to define the structure of the language used in Framer (which is CoffeeScript), so make sure you indent correctly, or your code wont work.

And to quickly bring the animation to life on our item (t-shirt) layer, drop in the following below the states code block…

item.states.next()

And praise be to the prototyping gods, our layer has come to life!

Use Cmd + R to see it in action a few times.

You can use an alternative syntax, like…

item.states.switch("scaleUp")

…but next() keeps things a little cleaner here.

So, you should have the following snippet of code in place…

item.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00
 
item.states.next()

Like I mentioned earlier, the majority of that code is created by the Auto-Code capabilities of Framer (which is a massive timesaver from the previous versions), and a small part is where you have to put your coding digits to work.

Now for the next animation on the screen (take a look at the video for reference if you need), which is the buyNowBar layer appearing from the bottom of the screen.

Like we did for the previous layer, click on the Insert button in the Toolbar, and choose State > buyNowBar.

From the Properties panel, enter the following settings…

Y: 990 (to bring the item back onto the canvas)
Opacity: 1.00 (to create a nice fade in)

Change the state name to something more relevant, and add in the .next() call.

buyNowBar.states.add
    slideUp:
        y: 990
        opacity: 1.00
 
buyNowBar.states.next()

Let’s give our button a little bounce shall we? We’ll put the animation Curves to good use here, specifically the Spring Curve.

Add the following between the states.add, and states.next() blocks of code…

buyNowBar.states.animationOptions =
    curve: "spring(400, 30, 0)"
    delay: .3

This will set an animation specific to our layer state, and override the Framer global defaults.

You should end up with the following…

buyNowBar.states.add
    slideUp:
        y: 990
        opacity: 1.00
 
buyNowBar.states.animationOptions =
    curve: "spring(400, 30, 0)"
    delay: .3
 
buyNowBar.states.next()

Now we need to transition to the 2nd screen (Confirmation), which is a simple case of Insert > State > Confirmation, and then bringing the Opacity back up to 1.00 in the Properties panel.

Confirmation.states.add
    fadeIn:
        opacity: 1.00

Quick Note: Yes, the background image is blurred, and scaled, but we’ll be seeing to that with the next layer state.

Now, we also need to add in a Click Event, where the user clicks on the Buy Now button, and transitions through to the Confirmation screen.

So navigate to Insert > Event > buyNowBar > Click > Click. And you’ll end up with the following in the code editor…

buyNowBar.onClick (event, layer) ->

The we need to add in the next() call, so it will reference the fadeIn state we created earlier.

buyNowBar.onClick (event, layer) ->
    Confirmation.states.next()

Click on the Buy Now button, and you will see it transition through to the Confirmation screen. Awesome!

Now for the backgroundImage layer. Let’s add in a new state for it shall we…

Insert > State > backgroundImage

From the Properties panel, enter the following settings…

Scale: 1.00
Blur: 0

And tweak the state name to something more relevant…

backgroundImage.states.add
    zoomBlur:
        scale: 1.00
        blur: 0

Again, we need to add a Click Event for the Buy Now button, that once clicked, will activate this transition on the Confirmation screen.

So navigate to Insert > Event > buyNowBar > Click > Click.

buyNowBar.onClick (event, layer) ->

And then add in the next() call to reference the zoomBlur state we just created…

buyNowBar.onClick (event, layer) ->
    backgroundImage.states.next()

Click away on the Buy Now button to see the transition in action. Super duper!

To finish up the Confirmation screen, we’ll add a couple more events. One for the successBadge layer, and the other for the message layer.

For the successBadge layer, add a state via the Insert menu. And tweak the properties so you have…

successBadge.states.add
    fadeDown:
        y: 0
        opacity: 1.00

Like we did for the buyNowBar layer, we’ll add a Curve animation to give it a little bounce…

successBadge.states.animationOptions =
    curve: "spring(400, 30, 20)"
    delay: .3

And then we’ll assign a Click Event to the Buy Now button again, via Insert > Event > buyNowBar > Click > Click.

buyNowBar.onClick (event, layer) ->
    successBadge.states.next()

Click on the Buy Now button to see the animation in action.

For the message layer, go ahead and follow similar steps to what I’ve shown you above. Just take the the Scale up to 1.00, and the Opacity to 1.00.

Don’t forget to add a Click Event for the Buy Now button.

Quickly, before we wrap things up, and to tidy up the code a little. Take all the Click Events you inserted before, and group them at the bottom of the code editor like so…

buyNowBar.onClick (event, layer) ->
    Confirmation.states.next()
    backgroundImage.states.next()
    successBadge.states.next()
    message.states.next()

If you’re feeling a little lazy today, here is all the code you should have inside of your Framer project (I’ve popped some comments in there too)…

# Import file "Order Confirmation" (sizes and positions are scaled 1:2)
sketch = Framer.Importer.load("imported/Order Confirmation@2x"){item, buyNowBar, Confirmation, backgroundImage, successBadge, message} = sketch########### Adjust Defaults# Item
item.scale = 0
item.opacity = 0# Buy Now Bar
buyNowBar.y = 1334
buyNowBar.opacity = 0# Confirmation Screen
Confirmation.x = 0
Confirmation.opacity = 0# Background Image
backgroundImage.scale = 1.5
backgroundImage.blur = 20# Success Badge
successBadge.y = -900
successBadge.opacity = 0# Message
message.scale = 0
message.opacity = 0########### States# Item
item.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00
 
item.states.next()# Buy Now Bar
buyNowBar.states.add
    slideUp:
        y: 990
        opacity: 1.00
 
buyNowBar.states.animationOptions =
    curve: "spring(400, 30, 0)"
    delay: .3
 
buyNowBar.states.next()# Confirmation Screen
Confirmation.states.add
    fadeIn:
        opacity: 1.00# Background Image
backgroundImage.states.add
    zoomBlur:
        scale: 1.00
        blur: 0
 
# Success Badge
successBadge.states.add
    fadeDown:
        y: 0
        opacity: 1.00
 
successBadge.states.animationOptions =
    curve: "spring(400, 30, 20)"
    delay: .3# Message
message.states.add
    scaleUp:
        scale: 1.00
        opacity: 1.00########### EventsbuyNowBar.onClick (event, layer) ->
    Confirmation.states.next()
    backgroundImage.states.next()
    successBadge.states.next()
    message.states.next()

So hopefully this little teaser tutorial to Sketch, and Framer has got the prototyping juices flowing a little?

Dive on in with your next project. Framer, more than ever, will leave you pleasantly surprised!

Thanks for reading the article,
Marc

Oh. Before you go, don’t miss out on this amazing offer for Sketch users…

Want to rapidly improve your design workflow?

Meet Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before…

Use the offer code MEDIUM20 to receive 20% OFF Cabana here.