Shortcuts for Framer
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
Include library.js
right before app.js
in your Framer index.html
file.
What is in Framer Library
Customization
- Check the very top of
library.js
to see everything you can customize. All the animation functions use curves and times that can be customized. In addition, the Display in Device functionality can be changed to enable different devices, to add a holding hand image, or a background.
General
PSD["My View"]
becomesMy_View
- create global Javascript variables for every view exported using the Photoshop or Sketch pluginsview.originalFrame
stores the initial position and size of each exported view, so you can easily revert back to them later.
Animation
view.animateTo(properties, [time], [curve], [callback])
is a shorthand that mirrors jQuery's animation syntax. Optional parameters can be omitted, for example:view.animateTo({ x: 100 }, function() { view.hide() } )
view.slideFromLeft()
view.slideToLeft()
(and similarly Left, Bottom, Top) are quick animation functions to animate full screen views in and out of the viewport. Very useful for prototyping mobile flows.view.show()
view.hide()
shows and hides views.view.fadeIn()
view.fadeOut()
fades in/out views with an animation. You can use a custom duration too:view.fadeIn(500)
Events
- Free hover and tap/click states: append
touchable
to a group's name, and include children that havehover
anddown
in their name. Events will be automatically bound to show these hover and tap/click states. - Shortcut: instead of
view.on('touchup', function() {})
useview.tap(function() {})
. This also works with mouse events. - Shortcut: instead of
view.on('mouseover', function() {}); view.on('mouseout', function() {});
useview.hover(function() {}, function() {})
Display in Device
- If your prototype has a parent
Phone
group, we automatically add a phone image around your prototype and resize to fit in a browser screen. Great for presenting! - By default, the parent group is called
Phone
and the device is an iPhone in a 640x1136 canvas. Check theDisplay In Device
section in the source code to see how you can configure for different devices. - Press the space bar key to toggle this on and off.
Others
view.getChild('name')
andview.getChildren('name')
retrieve the children of a view by name. Useful when traversing the layer hierarchy.Framer.utils.convertRange(OldMin, OldMax, OldValue, NewMin, NewMax, [capped])
converts a numberoldValue
from one range(oldMin, oldMax)
to another(newMin, newMax)
. If you'd like to cap the output to NewMin and NewMax, enablecapped
.
Questions
Feel free to contact the project's maintainer, Cemre Gungor, on gem-at-fb-dot-com or @gem_ray on Twitter.