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

What is Framer? Join the Community
Return to index
Jon Madison
Posted Aug 03 - Read on Facebook

re: Import from Sketch to Framer -- the naming is kind of frustrating, i.e. we can't set things up hierarchically, meaning. I can't have two groups with the same name because Framer wants to append a(n incremented) number at the end, instead of respecting the hierarchy.

it'd be far more useful, for example, if i had artboard A with a group named "group" and artboard B with a group named "group", and, after importing i could simply reference as and Am i missing something? or is this a future opportunity for Framer?


Jordan Robert Dobson

That makes a lot of sense.

Trevor Phillippi

I made these methods to help with selection to solve this problem when I started having it myself, after changes to the importer

Niels van Hoorn

The problem is that we can't add sublayers as named properties to a layer. What if you name a layer 'x'. and add it as a child of layerA. Would 'layerA.x' refer to the positioning property or the sublayer?

This is why, when importing, we add everything to the imported object at the top-level scope. All layers are accessible through sketch.layerA and sketch.x, regardless of their position in the layer hierarchy. To have all exported layers be available, they need to have a different name. That is why we add the numbers to similarly named layers.

I understand that this can be frustrating, and we're open for suggestions for improvements. We could even add a flag to the Sketch.Importer.load to support multiple ways of handling this.

Currently, I don't see a simple and better solution, but I hope now that you understand the problem, you can help us find one :)

Mike Johnson

I wrote a module for this a while back. Basically just loops through all sketch layers and appends a named property to each with the name of the layer. I just updated to check for any layers that end with numbers ( avatar1, avatar2) etc to remove the number from the named property, so now sketch.header.avatar will work even if there's a sketch.footer.avatar.

Read the entire post on Facebook