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

What is Framer? Join the Community
Return to index
Jai Mitchell
Posted Sep 09 - Read on Facebook

I've always seen people talk about "Utils.globalLayers(sketch)" being the default way to make Sketch layers global – but Koen Bok says here that `{button, navbar, profile} = sketch` is "better" way to do it…

Is anyone able to direct me to more info around how this works or why it's better? I assumed I'm meant to replace the "button, navbar, profile" part with my layer names, but either way I can't seem to get it to work :-/

1 Comments

Tisho Georgiev

This is called "destructuring assignment" and you can read more about it here: http://coffeescript.org/#destructuring or here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment. It's an elegant way to extract values from objects or arrays and put them into separate variables. In the sketch example, it's shorthand for writing:

button = sketch.button
navbar = sketch.navbar
profile = sketch.profile

As to why it's "better", one answer is: it's safer. Utils.globalLayers() is sort of a blunt instrument, since it loops through every exported layer and tries to assign it to a global. It's not guaranteed to always make layers global, though, because it will first check if a variable with the layer name already exists. So if you have a variable called overlay defined somewhere before the Utils.globalLayers() call and have a sketch layer named "overlay", the call to globalLayers() will give you an error. If you have a complex sketch file, it's easy to get into a situation where you have naming conflicts all over the place because of that.

Using destructuring assignment also makes it clear exactly which layers imported from sketch you intend to use (because you're listing them all), which can be helpful when collaborating on a prototype with someone else.

Read the entire post on Facebook