Prototyping Just Went to the Next Level With Framer


By
UI Design

The latest version of Framer brings closure (well, that’s my 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 use 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.

In this tutorial, I’ll show you how to take a couple of screens from Sketch, and then import them into the latest version of Framer, with some handy little tips along the way. This is a perfect introduction to Framer for all newcomers. 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.

First of all, go ahead and download all three of these essential apps and files:

All cool? Installed? Sweet! Let’s get to it!

Fire up Sketch, and open up the design ZIP file you just downloaded. You need this file opened so that 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 two simple screens. One for the Checkout, and the other for the Confirmation screen that fires once the Buy Now button has been pressed. Simple, but will allow you not to get over-faced if this is your 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 (example, 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 (example, 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 properly, it’s 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 four 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 two 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 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 two screens imported into Framer, with the layer hierarchy preserved from our Sketch file. Framer will 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")

This just makes it much easier to 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

That 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 the prototype to demonstrate what we’re wanting to achieve in this tutorial here.

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 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.

Use 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 an overview of what’s going on (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 the value of 0.

‘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 its Auto-Complete, and insanely detailed documentation is still much easier to pick up than you might think. I’m sure that in future updates, Auto-Code will become even more feature-rich 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 appears 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 the 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 won’t work.

And to quickly bring the animation to life on our item (t-shirt) layer, drop in the following code 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
########### Events
buyNowBar.onClick (event, layer) ->
    Confirmation.states.next()
    backgroundImage.states.next()
    successBadge.states.next()
    message.states.next()

Finished!

So hopefully this little teaser tutorial to Sketch and Framer has got your prototyping juices flowing a little. Dive on in with your next project. Framer, more than ever, will leave you pleasantly surprised!

Related Topics


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.