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

What is Framer? Join the Community
Return to index
Stanislav Grinapol
Posted Dec 13 - Read on Facebook

Hi Everyone I am new to Framer JS and I am having trouble with something that should be fairly basic, any Idea what I am doing wrong?

I am trying to understand How I can import and access psd images within framer, I can access the image in the line that I bolded if I export as png or jpg,

But for some reason trying to access the psd image gives me no control their placement in the prototype and they get buried under the layers I created bellow.

Basically how do I access signal icon that is inside of icons.psd rather than importing the signal png directly.

Really confusing.

Thank you in advance

Just in case,

Here is my code

# This imports all the layers for "icons" into iconsLayers4
iconsLayers = Framer.Importer.load "imported/icons"
# Made with Framer
# by Koen Bok
# framer.com

bg = new BackgroundLayer
backgroundColor: "#ffffff"

# Create Layers
TaskBar = new Layer({x:0, y:0, width:1080, height:50, backgroundColor: "red", z:20})
ActionBar = new Layer({x:0, y:50, width:1080, height:112, backgroundColor: "#212121", z:19})
Divider = new Layer({x:0, y:382, width:1080, height:2, backgroundColor: "#333333", opacity:0.12, z:18})
Container = new Layer({x:16, y:192, width:160, height:160, backgroundColor: "#d6dbdd", z:17})
bug = new Layer({x:972, y:236, width:92, height:72, backgroundColor: "#d6dbdd", borderRadius:80, z:16})
signal = new Layer({image:"images/framer-icon.png"})

# Touch Events
Divider.on Events.TouchStart, ->
Divider.animate
properties:
scale: 10
curve: "ease"
time: 0.5
Divider.on Events.TouchEnd, ->
Divider.animate
properties:
scale: 1
curve: "ease"
time: 0.5

2 Comments

Rafael Puyana

Whatever you want to be accessible in Framer has to come from a visible photoshop group. Framer cannot detect isolated psd layers. In your example, you should have one group in Photoshop called ActionBar, Divider etc.. Then, after importing your file to Framer, you can access the layer through: iconsLayers.ActionBar, iconsLayers.Divider and so on. You don't need to set the position of these layers because Framer takes care of that during the import.

Read the entire post on Facebook