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?

8 Comments

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 : http://share.framerjs.com/05hz5cpup98d/

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. http://share.framerjs.com/xa2jv0p1elly/ (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