Mask a frame with a shape


I’m trying to mask a frame with a vector shape (the shape of an iphone).

I put the shape on top of my frame, then select both layers and click on mask icon on top nav.

The result is the shape, becomes a fill on top of my frame, where I want the shape to be subtracted from my frame!

I’m very frustrated and don’t know what to do. Please help.

Hey there Bahador.

Unfortunately, the mask option only works for these:

  1. shapes (like circles and rectangles, which are basically “vectors”)
  2. texts
  3. a group (which only works if the element inside of it is also one of these types)

If you want to mock up the shape of the phone, you need to create the phone cover and subtract the green screen from it. Put this shape inside your frame and set it as “absolute position” and also make it “sticky” (You need the phone-frame to be always on your screen even if you scroll it)

There is one other way, to use a prototype setting and use a pre-build phone-frame for your prototype. If it’s the case.

Hope this helps. :smiley:

By creating a phone-frame with vectors, I mean something like this:

It’s not exactly what you want, but it will cover the places that you need to be covered.

Prototyping is still my preferred solution

Hi @Armin_Rouhanian, thanks for your prompt reply.

It’s really frustrating. I even looked it up online to see how I can make a mockup for my personal use and then inject my prototypes inside that mockup, but couldn’t find any useful content.

It’s sad. Thank you so much for your help though.

1 Like

You’re welcome.

If you need the cut to be seen in your figma file, I don’t find any better way.

But if the final goal is to show it to a client as a prototype, read this article:

The phone frame in the top in this link, seems to be exactly what you needed. I hope this helps

1 Like