Distribute-layers NPM

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)

@infinitebrahmanuniverse/nolb-dist @everything-registry/sub-chunk-1488

0.0.1

8 years ago