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 (http://vimeo.com/74712901) 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?
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
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?
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!
Hi Marcelo and Victor ok I got the developer console working. Looks like the error is "Syntax Error: Unexpected EOF". See attached screenshot.
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
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 :(
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?
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.
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?
Hi Victor try this --> https://www.dropbox.com/sh/6bsgi4jj6hs1jcm/AAAR_s_FDLT9b5uPE1CF2CVva
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
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)?
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).
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 :(
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
Yes. You can rename myLayers to PSD if you want.
PSD = Framer.Importer.load("imported/caption")
My bad then… is this new to Framer 3 Koen? I can't recall having to define that in Framer 2
Yes it's new. It gives you a way to name "PSD" anything you want, and import multiple document files into one Framer project.
Interesting, thanks. Haven't noticed that in the docs/changelog, but then I've not yet tried any projects with Framer 3.