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

What is Framer? Join the Community
Return to index
Adam Trabold
Posted Mar 24 - Read on Facebook

Is there a way to have Framer import PS layers in relation to the width of the layer group instead of canvas size?

For example, I have a horizontally-scrolling section on a page that I can't seem to get to import at full width (it gets cut off at the canvas edge).

I've seen examples that have used Sketch where this works, but I'm not sure about PS.

8 Comments

Cemre Güngör

Just make your whole canvas bigger :) Framer should only use the top left portion

Balraj Chana

If I understand you correctly, Framer doesn't import canvases, that's why you have to set a custom device to match your canvas in PS or Sketch. You can easily make the horizontal layer scrollable by wrapping the layer in a scroll component and setting scrollVertical to false: http://framerjs.com/docs/#scroll.wrap

Adam Trabold

@Bairaj, I'm only speaking about the size of images imported into Framer. My PS file is the appropriate size to match the device, but I have a horizontally-scrollable section that extends past the size of the "canvas" in PS.

I noticed on the Weather-app example on the Framer site (which has similar functionality and was originally designed in Sketch), it imports the entire layer regardless of its relation to design-file canvas size. I was curious if it is possible to do the same with a mockup done in PS.

Balraj Chana

Adam - I've had a dig through and it boils down to how canvases work differently in PS and Sketch. Framer can import the correct dimensions for Sketch layers which are off-canvas because the canvas is infinite. Have a look at the scrollable feed example here: http://framerjs.com/learn/import/templates/. If you were to apply an artboard to the screen, then the layers would be cut off, just like in PS. I'm guessing that's why there's no PS examples of scrollable, off-canvas layers.

If you have to use Photoshop, then the only workaround I see is by extending the canvas so that all layers are visible (and non are off-canvas). It no biggie, just press C and drag out. The screen in Framer will hide the extra whitespace.

Here's an example: http://share.framerjs.com/pu2bk1inypff/
Have a look at the photo for the PS setup

Adam Trabold

Thanks a ton! That all makes sense. I will do that!

Liu Zhou

so, if I want to make content scroll, I should not use artboard in sketch?

Balraj Chana

Hey Liu, that's right! You should just use groups to organise your screens with a background mask. You can see how it works in these templates: http://framerjs.com/learn/import/templates/

Read the entire post on Facebook