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

What is Framer? Join the Community
Return to index
Adela Mrazova
Posted Jan 27 - Read on Facebook

Hello, I am a Sketch3 Designer, but I cannot code.

I am trying to use Framer and it is really impressive :)

I am stuck just in the beginning - could you please help me?

I am importing a Sketch file to Framer. The Sketch layers are in groups.

After import, the sketch file (mockup.sketch) appears in the viewer and there is following sentence in the code:

# This imports all the layers for "fr1" into fr1Layers
Sketch = Framer.Importer.load "imported/mockup"

I want to target the different layers, but I dont know how -

On framerjs.com there is : This allows you to target all of the imported layers within Framer.
All of your imported layers are placed within an /imported folder, which are then included in your prototype.

Could you please help me, how to do it? What should I specifically write?

Thank you very much :)

10 Comments

Stephen Crowley

Hey Adéla, welcome! Where Sketch = Framer.Importer.load "imported/mockup" you are then given access to all your groups by Sketch["group_name"] ... now, you can rename it to whatever you want instead of Sketch.. myLayers, or simply Layers- doesn't matter. There are scripts available where you can get global access to your layers as well- let me find the link and attach.

Erik Edhagen

Basically, everything in Framer is done with Javascript. So if you don't know any Javascript you should start with the basics: http://www.codecademy.com/en/tracks/javascript.
Hopefully that will give you a better starting point with Framer :)

Stephen Crowley

Here Cemre has been maintaining some nice shortcuts for your Framer projects: https://github.com/facebook/shortcuts-for-framer

Adela Mrazova

Thank you very much Stephen Crowley! My Sketch file contains 3 Groups (upper menu bar, content and tab bar - classical mobile app). I understand that this line (Sketch = Framer.Importer.load "imported/mockup") means, that the access to all layers is given. I just dont know how to select the content group ( I want to target the content group, and work with it) and set an animation, state, whatever... I dont know, what to write to work with the certain layer :)

Stephen Crowley

Ok, well, if you want to do something with objects you created in sketch that are contained in your content group, you want to group them as well. So let's say you have three buttons in your content group you should have a group for button1, a group for button2 etc. Then you can say Sketch["button1"] and begin animating or whatever you'd like. Does this make sense?

Erik Edhagen

Adéla Mrázová - in your case, you can target a layer group with Sketch["name of layer group"]. For example Sketch["tab-bar"].animate

Stephen Crowley

This saves me from uploading a crappy screen cap I just made, haha- thanks Andreas :)

Andreas Wahlström

Stephen crappy screen caps ftw, though!

Peter Hilgersom

thanks to Adéla Mrázová (I wouldnt know how to pronounce it!) for the great article. Got my first project going! (Y)

Read the entire post on Facebook