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

What is Framer? Join the Community
Return to index
Mark Johnston
Posted Aug 02 - Read on Facebook

Playing around with Framer Studio and importing from Sketch, something doesn't make sense to me. The structure that is built into my Sketch file of nested layers seems to be lost when it is in Studio with al of the layers accessible from the root. Wouldn't it be advantageous to keep the hierarchy?

As in this simple Sketchapp hierarchy example:

- Layer1Child

In Framer Studio I would access the layers as:

Layer1Variable = filenameLayers.Layer1
Layer1ChildVariable = filenameLayers.Layer1.Layer1Child

As opposed to:

Layer1Variable = filenameLayers.Layer1
Layer1ChildVariable = filenameLayers.Layer1Child


Joshua Tucker

Koen is definitely your man to explain this, but I would recommend using Shortcuts for Framer to make this easier in general - It's jammed with a ton of neat stuff, one of them being that you can create global variables for all your layers. To use your example, you could have:

- Layer1Child

Once you've loaded library.js and initialize (see documentation under "General" from that page I linked), you can call the layers by just their name.

Layer1.whatever = whatever
Layer1Child.whatever = whatever

Ale Muñoz

Hmmm... we definitely export the hierarchy to JSON from Sketch, so it's probably something to do with Framer.Importer? Koen Bok?

Koen Bok

So there are two common things I hear here.

1) Why is the fileNameLayers a flat object instead of structured like my document.

The answer is that it's better. With a flat namespace you can re-structure your Sketch/PSD and your code will continue to work exactly as planned. You can also change the structure after import in code, and then a the nesting would either have to change with it or make no sense at all. Lastly, it's just easier to remember a name than a name plus it's place in the hierarchy. The biggest downside here is that all layers need to be uniquely named.

2) Why are the layers not just globals.

It's very easy to mess up javascript with globals. For example, if you would name a layer "document" or "window" it would replace them with layers and horribly break everything. Another reason is that we can have multiple PSD/Sketch documents (or even both) this way.

Koen Bok

Benjamin let's put the above somewhere in the generator docs too.

Mark Johnston

I guess that mens that you will have to be careful that layers in Sketch are uniquely named?

Koen Bok


Mark Johnston

Would it make sense to make this an generator option?

Read the entire post on Facebook