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
responding: {scale:0.70}
default: {scale:1.0}

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


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: 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
-- Instead of --

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:

Koen Bok

Yup. Just copy the root layer as many times as you like with

Koen Bok

And then, instead of direct references use:

Chris Alvarez

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

- to -

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 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