Awesome
framer-moreutils
Super handy helper functions for your Framer projects.
Pin Fix a layer's position relative to another layer
Unpin: Remove a layer's pin relationship
PinOrigin: Set a layer's relative position to another layer, based on its originX and originY properties.
Constrain: Set a layer's constraints, relative to its parent
Align: Set all layers in an array to the same property value
Distribute: Evenly distribute properties to layers in an array
Fit: Set a layer's property to the max property among a group of layers
Contain: Set a layer's spatial properties to contain its children.
Grid: Set layers into a grid of rows and columns
MakeGrid: Create a grid of copies from a layer
ChainAnimations: Set an array of Animations to each start when the previous ends
PointInPolygon: Check whether a point is within any straight-sided polygon
LayerAtPoint: Get the top-most layer at a given point
LayersAtPoint: Get all layers at a given point
GetLayerFromElement: Get which (if any) Layer owns a given element
Bind: Bind a function to a target
Define: Create a new layer property that emits an event when it changes
DefineValid: Create a new layer property with validation
SetAttributes: Set the attributes of an DOM element
toMarkdown: Set styles in a TextLayer, using (limited) Markdown syntax
CORSproxy: Convert a URL into one that won't throw a cross-origin error
copyTextToClipboard: Copy a string into the user's clipboard
timer: Create a timer instance with a simple start/pause/resume/reset/restart methods
linkProperties: When the specified property on one layer' changes, the second Layer will match it
px: Get the correct pixel string for the given context scale
getOrdinal: Will return the correct ordinal ('st', 'nd', 'rd', 'th) for a number
fetch: Make an asynchronous call to a URL and return a Response
fetchJSON: Make an asynchronous call to a URL and return data as a JSON object
randomText: Get lorem text at the specified length, optionally in sentences
Installation
Manual Install
- Download this repository
- With your project open in Framer, drag the 'moreutils.coffee' file the code editor
Install via Framer Modules.
Usage
Framer uses an object called Utils to store common utility functions, such as Utils.delay. When this module is installed, it adds several new methods to this Utils object, such as Utils.align.
Once the module has been installed, you can use these methods in your code the same way you would a standard Utils method. For example, Utils.align(myLayers, 'x', '100').
Each method is documented in the section below.
Methods
In the documentation below, arguments between brackets are optional. For example, Utils.chainAnimations takes two arguments: an array of layers and a boolean (true or false) for whether or not the chain should loop. The second argument is set to true by default, so your calls to only have to provide this element when you want to the chain not to loop — or if you're feeling verbose. Either way, because the method will work without the second argument, we document it as Utils.chainAnimations(layers, [animate]), with brackets to show that the animate argument is optional.
Utils.pin(layerA, layerB, directions...)
Fixes layerA's position relative to layerB. If layerB ever moves or changes, layerA will move with it in order to preserve this position. For the directions argument, you may use one or more directions: 'left', 'right', 'top' or 'bottom').
If multiple pins conflict, such as a pin to the 'top', 'bottom', only the last pin will get used. This method accepts up to two directions arguments.
Utils.pin(layerA, layerB, 'left')
Utils.pin(layerA, layerB, 'left', 'top')
Utils.unpin(layerA, [layerB, direction])
Removes layerA's pin relationships. If the optional argument with layerB is provided, only those relationships with layerB will be removed; likewise, if layerA has multiple pins to layerB, the directions argument can be used to remove specific pins.
Utils.pin(layerA, layerB, 'left', 'top')
Utils.pin(layerA, layerC, 'left')
Utils.unpin(layerA)
# removes all of layerA's pins, both to layerB and layerC
Utils.unpin(layerA, layerB)
# removes only layerA's pins to layerB
# layerA is still pinned to layerC
Utils.unpin(layerA, layerB, 'left')
# removes only layerA's left pin to layerB
# layerA is still pinned to layerB's top
Utils.constrain(layer, constraints...)
Set a layer's constraints, relative to its parent. This works the same as setting constraints in Design mode, where a layer may be constrained by one or more constraints. These are its parent's edges (left, top, right, bottom) or its parent's dimensions (height, width) and it may be set to preserve its aspectRatio as well. This method accepts as many constraints arguments as needed.
When the parent layer changes its dimensions, the constrained layer may also transform, depending on the constraints set. Need a visual? Check out this interactive example.
Utils.constrain(layerA, 'height')
Utils.constrain(layerA, 'height', 'left', 'aspectRatio')
Utils.pinOrigin(layerA, layerB, [undo])
Utils.align([layers], property, target, animate)
Utils.distribute(layers, property, start, end, animate)
Utils.grid(layers, [cols, rowMargin, colMargin])
Utils.makeGrid(layer, cols, [rows, rowMargin, colMargin])
Utils.fit(layer, layers, property, [padding])
Utils.contain(layer, fit, paddingRight, paddingBottom)
Note: Utils.contain must be called after the children layer(s) size changes, any changes to children(s) sizes after calling contain won't be reflected.