This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jono Hunt
Posted Jun 05 - Read on Facebook

I tend to duplicate the same elements (buttons, animations etc.) often, and have managed to find out how to reuse the text style and animation for different layers (see the 1st screenshot).

I've been trying to do the same with layer properties, but haven't been successful. If I could make them as a variable I could edit them once, and (for example) all the buttons I've created would update and look the same. You can see what I've tried in the 2nd screenshot.

Any ideas on how I can write a layer's properties as a variable and then just use the variable for different layers? I guess I could set each property as a variable:

myX = 100
myY = 200
myOpacity = 0.5

layerA = new Layer x: myX, y: myY, opacity: myOpacity
layerB = new Layer x: myX, y: myY, opacity: myOpacity etc…

Just wondering if I can do it the way I tried in the screenshot?


Benjamin Den Boer

Hey Jono! There are actually a couple of ways to go about this:

1. Copy the entire layer and its properties:
layerB = layerA.copy()

2. Manually get and set the properties of a layer (keyword "props"):
layerB = new Layer
layerB.props = layerA.props

3. Store the properties within a separate, reusable object (think this is what you're looking for) :) →
buttonProperties = {
width: 400
height: 100
borderRadius: 6

layerB.props = buttonProperties

Jesper Wøldiche

Or use _.assign() if you want to inherit certain props without overwriting others.

Benjamin Den Boer

The same thing goes for declaring style properties, by the way. You don't necessarily have to use a function for it. You can store the style declarations within an object too, and reference the variable name of the object later on.

Jono Hunt

Perfect. This is exactly what I wanted, thanks! :D

Read the entire post on Facebook