Shortcuts for Framer 3

A collection of useful functions to make mobile prototyping with Framer easier. For full reference, check our annotated source code in library.coffee.

How to use with Framer Studio

• Save your project and open the project folder
• Download library.js into the framer folder inside of your project folder
• Open index.html from your project folder with a text editor and right after the line <script src="framer/init.js"></script>, add the following line:

<script src="framer/library.js"></script>

General

• After importing your PSD/Sketch layers, call initialize to create global Javascript variables for every layer for quick access:

myLayers = Framer.Importer.load "..."
Framer.Shortcuts.initialize(myLayers)

• This will let you access PSD["My Layer"] as simply My_Layer
• Note that some Javascript variable names are reserved and using them as layer names can cause problems.
• layer.originalFrame stores the initial position and size of each exported layer, so you can easily revert back to them later

Animation

• layer.animateTo({x: 100}, [time], [curve], [callback]) is a shorthand that mirrors jQuery's animation syntax. You can specify a duration, curve and callback in order, and omit the ones you'd like. Note that in Framer 3, time is now specified in seconds.
• layer.slideFromLeft() layer.slideToLeft() (and similarly Right, Bottom, Top) are quick animation functions to animate full screen layers in and out of the viewport. Very useful for prototyping mobile flows.
• layer.show() layer.hide() shows and hides layers.
• layer.fadeIn() layer.fadeOut() fades in/out layers with an animation. You can use a custom duration too: layer.fadeIn(0.5)
• show, hide, fadeIn and fadeOut can take layers or arrays containing layers.

Events

• Free hover and tap/click states: append touchable to a group's name, and include children that have hover and down in their name. Events will be automatically bound to show these hover and tap/click states.
• Shortcut: instead of layer.on('touchup', function() {}) use layer.tap(function() {}). This also works with mouse events.
• Shortcut: instead of layer.on('mouseover', function() {}); layer.on('mouseout', function() {}); use layer.hover(function() {}, function() {})

Display in Device

• Has been removed since this functionality got added Framer core

Others

• layer.getChild('name') and layer.getChildren('name') retrieve the children of a layer by name. Useful when traversing the layer hierarchy.
• Framer.utils.convertRange is deprecated in favor of the native Utils.modulate. Check Framer docs on how to use modulate.

Customization

All the animation functions use curves and times that can be customized. Check the very top of library.js to see all the options.

Questions

Feel free to contact the project's maintainer, Cemre Gungor, on gem-at-fb-dot-com or @gem_ray on Twitter.