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

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

Is there an easy way to draw things on top of the device frame without creating a custom frame? I know how to if I edit the files outside of studio, but wondering if there's something similar to BringToFront that works on top of the entire device frame?


Juan Sanchez

Kind of got it to work messing with the layers in DefaultContext:

aboveAll = Framer.DefaultContext._layerList[1]

square = new Layer
superLayer: aboveAll, backgroundColor: '#F00', width:200, height:200

Marcelo Eduardo Oliveira

I use this trick :

I remove the clipping on the phone Layer of the DeviceView ;)

Marcelo Eduardo Oliveira

Juan Sanchez your approach seems to draw on top of every layer (including the phone) , but if you use negative values ( like the corner of the screen, not the device) it will only on fullscreen (not with a device)

Anyways, I don't know what Noah needs :) both solutions work to draw on top of the device area.

George Kedenburg III

I swear I thought there was a less hacky way to do this, but this gets the job done. Basically at the end of your prototype, just make a new context and set that as the current context and everything after that will render outside the device. (cc Koen to tell me if this is a really bad idea or not)

Koen Bok

It's better to use the device context to draw things in. Let me make an example.

Koen Bok

That said, I also like Marcelos idea to keep it in the device context.

Juan Sanchez

This is great. I was drawing on top of the frame to add interactivity to the digital crown and button on the Apple Watch frame.

Read the entire post on Facebook