Distribute Layers for Framer

Installation • Code Examples • Full documentation

---

This package helps you position multiple Framer layers with ease.

You can position layers in three ways:

sameDistance	sameMargin	spaced
The layers are positioned every nth pixel, regardless of their height.	The layers follow each other with a constant margin between them.	The layers fill upp the space. The spacing between them is equal.

You ➡️ can ➡️ also ➡️ distribute ➡️ layers ➡️ horizontally.

Installation

• Download distributeLayers.coffee.
• Open your project folder (YourProject.framer). Inside it, there is a modules folder. Put distributeLayers.coffee inside it.
• At the top of your main Framer file, require the package using { distributeLayers } = require "distributeLayers"

Code examples

{ distributeLayers } = require "distributeLayers"

layers = []
layers[0] = new Layer
layers[1] = new Layer
layers[2] = new Layer

distributeLayers.sameDistance
	layers: layers
	distance: 250

Full documentation

There are three functions:

• distributeLayers.sameDistance(options)
• distributeLayers.sameMargin(options)
• distributeLayers.spaced(options)

All functions accept one argument: an options object. The functions can be called with the following arguments:

Name	Type	Required	Description
layers	array	yes	An array containing the layers you want to distribute.
direction	string	no	horizontal or vertical. Defaults to vertical.
startOffset	int	no	X/Y starting point for the first layer. X when direction is horizontal, Y when vertical.

➡️ distributeLayers.sameDistance()

In addition to the parameters above, distributeLayers.sameDistance() accepts these additional arguments:

Name	Type	Required	Description
distance	int	no	How much space to add between each arguments. Defaults to 500.

See example project (Click “open” to view code in Framer Studio)

➡️ distributeLayers.sameMargin()

In addition to the parameters above, distributeLayers.sameMargin() accepts these additional parameters:

Name	Type	Required	Description
margin	int	no	Margin between each arguments. Defaults to 10.

See example project (Click “open” to view code in Framer Studio)

➡️ distributeLayers.spaced()

In addition to the parameters above, distributeLayers.spaced() accepts these additional parameters:

Name	Type	Required	Description
max	int	no	The max area within which the layers should be rendered. Defaults to 1000.

See example project (Click “open” to view code in Framer Studio)