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

What is Framer? Join the Community
Return to index
Sarah Doody
Posted May 20 - Read on Facebook

Hi everyone!! Really excited to try and incorporate Framer into my UX design process.

H-E-L-P!!!!! Really basic question here, but I have no JS experience so I'm following along with this video ( trying to do what he says to do :)

At 18:20 he shows how to identify a specific object in Photoshop and set it to visible / invisible through this in JS:

PSD["yourLayerGroupName"].visible = false

The goal is that this will then hide a specific layer group in your PSD.

BUT, when I do this I get this error, any idea WHY I'm getting this error?


Sarah Doody

Update: I tried to do this code instead, and it's still not working and I'm getting the same error:

myLayers["Content"].visible = false

Any ideas?

Marcelo Eduardo Oliveira

Hi Sarah, are you able to upload your code to codepen or something similar? We could take a look and help you :)

Or - can you open the Js console and see what the error is?

Victor Loux

You need to open the console. Go to Safari > Preferences > Advanced, then check "Show Develop menu in menu bar".

You'll have a new menu bar appearing called Develop, from there you can open the error console and it will give you an error message that should be more helpful. If you can't figure out what it means post it here!

Sarah Doody

Hi Marcelo and Victor ok I got the developer console working. Looks like the error is "Syntax Error: Unexpected EOF". See attached screenshot.

Victor Loux

Did you copy and paste that code? There might be a bogus invisible character somewhere that got copied with it. Try deleting everything in your JS file (using Cmd+A and Del, not just deleting characters one by one) and manually type your code again

Sarah Doody

Ok now it is saying "ReferenceError: Can't find variable PSD".

Note: I went back to using this code in my app.js

PSD["Content"].visible = false

Kind of confusing because in the demo video on Video they don't define variables anywhere :(

Victor Loux

You shouldn't have to define the PSD variable yourself no. Try to re-export your PSD with the Framer tool?
Also are you using Framer 2 or Framer 3?

Sarah Doody

Thanks Victor, I'm using version 3 (just got it on the weekend).

Just re-exported with the Generator tool and it still has the same error.

I also tried in Chrome, and same issue.

For what it's worth, I was wondering if perhaps I have my document structure set up wrong. I have a main folder on my desktop. In that folder, I have these files, see screenshot.

Victor Loux

This looks about right Sarah, there's definitely something wrong somewhere else. Could you post a zip file of your folder on Dropbox or elsewhere so I can have a look?

Victor Loux

Sarah the file you sent does not have the same contents as on your screenshot, there is no index.html or app.js — only subfolders? If I re-export caption.psd it works fine for me

Sarah Doody

Yes, I deleted my original project and decided to start back from scratch. I guess another way to ask my question is this:

When I downloaded Framer and unzipped it, this is what I get (see screenshot).

I am unclear where to put the PSD. Do I have to create another folder for my project (eg. "caption"). Or, by running Generate will it create the folders I need?

So, do I just put the PSD in the root of the Framer folder (where Generate and Project folder live)?

Victor Loux

You can put your PSD files anywhere you want on your computer, just run Generator and it will create a folder with all the files and folders in the same folder as your PSD.
The Project folder in the Framer download is actually just an example but you shouldn't put your own files there (actually that is what may have caused the errors, if you mixed up two projects).

Sarah Doody

Hi Victor thanks for the clarification. I started from scratch again and put the PSD on my desktop. Then I ran Generator and tried to do what i was doing before PSD["Content"].visible = false and unfortunately I am still getting the "Can't find PSD variable" error!

So confusing!! I've Googled a ton of times and I can't find anyone having this problem :(

Sarah Doody

Nevermind, for some reason I needed to have this code at the top of the JS file:

myLayers = Framer.Importer.load("imported/caption")
myLayers["Content"].visble = false

Koen Bok

Yes. You can rename myLayers to PSD if you want.

PSD = Framer.Importer.load("imported/caption")

Victor Loux

My bad then… is this new to Framer 3 Koen? I can't recall having to define that in Framer 2

Koen Bok

Yes it's new. It gives you a way to name "PSD" anything you want, and import multiple document files into one Framer project.

Victor Loux

Interesting, thanks. Haven't noticed that in the docs/changelog, but then I've not yet tried any projects with Framer 3.

Read the entire post on Facebook