神刀安全网

Prototyping just went to the next level with Framer

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…

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

Prototyping just went to the next level with Framer

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.

Prototyping just went to the next level with Framer

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.

Prototyping just went to the next level with Framer

In the code editor you will see the following…

Order_ConfirmationA = Framer.Importer.load("imported/Order [email protected]

")

Change the variable to…

sketch = Framer.Importer.load("imported/Order [email protected]

")

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, and handy as the new Auto-Code feature is, there is still a little bit of hand-coding that is required on occasion. Much, 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 .

Prototyping just went to the next level with Framer

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

Prototyping just went to the next level with Framer

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.

Prototyping just went to the next level with Framer

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.

Prototyping just went to the next level with Framer

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 [email protected]

")

{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()

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

My awesome guide to improving your workflow with Sketch is now available…

Use the Offer Code DISCOVERMEDIUM to receive 25% OFF any of the Packages.

Take a look here https://themmed.com/discover-sketch-app

Prototyping just went to the next level with Framer

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Prototyping just went to the next level with Framer

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮