/distribute-layers

Distribute an array of layers in Framer.js

Primary LanguageCoffeeScriptMIT LicenseMIT

Distribute Layers for Framer

Installation • Code Examples • Full documentation

This package helps you position multiple Framer layers with ease.

It's a bit like the Distribute Elements buttons in Sketch, but for Framer

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"

Screenshot from Framer Studio with code example from Distribute Layers

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)