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

What is Framer? Join the Community
Return to index
Chris Alvarez
Posted Jun 18 - Read on Facebook

Is it possible to use Sketch to build "templates" for a framer project? I have a simple group structure and would like to generate N copies of it with the ability to target (add animation states) to sublayers.

I can set up states for each copied layer group, but when I try to target child layers, I get "undefined". Thoughts?

sketchLayers = Framer.Importer.load "imported/assets"

templates = {
basic : sketchLayers.plainTextTemplate
}

allLayers = []

# Create list of 20 items
for i in [0..20]
newLayer = templates.basic.copy()
newLayer.superLayer = tweetContainer
newLayer.y = newLayer.height * i

# Add states
newLayer.states.add
responding: {scale:0.70}
default: {scale:1.0}

newLayer["userFullName"].states.add
responding: {scale:0.70}
default: {scale:1.0}

# Animation Options
newLayer.states.animationOptions = curve: "spring(600,30,0)", time:0.75

# Push to global array
allLayers.push(newLayer)

13 Comments

Nam Dang

Chris Alvarez Koen Bok Do you have any success at doing this? Can you also send me a copy ?

Christian Poschmann

Would love to see an example of this as well.

Felix Haus

The thing here is that childrenWithName(searchString) / subLayersByName(searchString) (Note that both functions do the same thing, see: https://framer.com/docs/#layer.childrenWithName) does not return a single layer with the exact name match but an array with all layers which match the searchString.

So you have to write
newLayer.subLayersByName("userFullName")[0].states.add
-- Instead of --
newLayer.subLayersByName("userFullName").states.add

To address the first match with [0] in the array returned by subLayersByName.

However I think there is a faster solution to store all copied layers in an object and access them directly with myLayers["myLayerName"], because subLayersByName() does a loop over all sublayers and does a string comparison for the LayerName. (This should not affect you if your sublayers are below < 1000)

I made a quick example with both solutions: https://framer.cloud/anBGQ/

Koen Bok

Yup. Just copy the root layer as many times as you like with http://framerjs.com/docs/#layer.copy

Koen Bok

And then, instead of direct references use: http://framerjs.com/docs/#layer.subLayersByName

Chris Alvarez

Sounds right, and I copied my template using newLayer = templates.basic.copy() however, when I change

newLayer["userFullName"].states.add
- to -
newLayer.subLayersByName("userFullName").states.add

I still get "undefined"

Chris Alvarez

So Koen Bok, am I not able to do this because the names are the same across all the copies? If I print newLayer.subLayers I see this:

» <Layer id:11 name:otherStuff (0,0) 640x317>,<Layer id:12 name:userFullName (136,28) 210x22>
» <Layer id:14 name:otherStuff (0,0) 640x317>,<Layer id:15 name:userFullName (136,28) 210x22>
...

Koen Bok

Yes exactly, that is why you could 1) loop through all the layers and give them unique names or 2) use the http://framerjs.com/docs/#layer.subLayersByName function to target a specific one.

Chris Alvarez

I tried that and while I can dump the object to the console, I can't interact with it i.e. set properties such as opacity or states.

Koen Bok

If you send me your project at [email protected] I'll make you an example (tomorrow) :-)

Chris Alvarez

Awesome! Just sent you an email...

Comést Savatino

Hey Koen, I've been trying to do something similar. I also cannot seem to target it (opacity, size, etc) using the .sublayersByName technique.

David Townsend

Chris did you ever figure out how to copy your templates? If so could I see how you did it?

Read the entire post on Facebook