Have you considered using boolean Substract selection and then if you want to further clean the object try Flatten Selection.

Yeah I’ve tried flattening and subtracting the vector. It doesn’t seem to work.

I think you misunderstood me. Let you show you what I mean.

As you can see the multiple vector background extends outside frame (1).

All I want is to crop the extras (Blue square outside the frame) to match the border of the frame (Red square) with keeping the same background style as shown in frame 2.

In conclusion, is there a plugin or a tool to cut/crop the extending background to fit the frame with keeping the same background of the frame?

I hope that makes sense to you. Thanks!

@Ziad1 If you click anywhere on the canvas, you shouldn’t be seeing those vector outline edges, no? Why is it important that you don’t see them when you have them selected?

@Yehia Again, I’m exporting it as a flutter project. It seems fine in Figma, but It doesn’t give me the same background shape and it just glitches out or crashes the app on an android emulator, as the background extends outside the frame which isn’t a thing to do in coding (unless there is a solution which fixes this problem. But I searched and couldn’t find any answers).

So the solution here is to fit the background to the border of the frame to give me the shape I want in the emulator.

For example :

When turning this into a code, it works fine and gives me the exact same background since all the vectors are inside the frame and not extending outside… All I need is to crop the vector borders to fit the frame border.

Hope this gives enough hint about what I need to achieve here.

@Ziad1 The way i see your shape is still extending outside the frame which means you have not cut it with the booelean selection tools.

Here’s what I mean:

1. Create three green rectangles and substract them from Shape A, Shape B, and Shape C.


2. Flatten Shape A, then flatten Shape B, and then flatten Shape C - all individually.


3. Create purple rectangle and substract it from shape C.


4. Flatten Shape C


5. Create red rectangle and substract it from shape C.


6. Flatten Shape C


7. Create blue rectangle and substract it from shape A.


8. Flatten Shape A

At the end of this exercise you should have all the extending outside the frame cut off from the vectors.

@Yehia Hmm, well that’s a lot of steps but it seems that’s what I am trying to achieve.

I will try it and tell you about the result.

Thanks though!

@Yehia I would like to thank you so much for your help. That’s exactly what I was trying to achieve. Here’s the result :

It was surely a lot of steps but I was never going to figure out how to crop vectors without your help, as there isn’t a clear tutorial about doing this at the help page I guess. There should be a tool in the future in Figma which eases this cropping procedure though.

Anyways Thanks again for your help! 😀

@Ziad1 you’re welcome 🙂

Figma isn’t really a vector editing tool, and while it has some features for vector editing, it cannot beat a tool like Illustrator. Perhaps an easier way for you was to create these vectors in the right size first in Ai then simply copy/paste them into Figma.

That’s more steps than the ones you just gave me to finish my work 😂

But it’s okay, we all learn new things that we add to our experiences and I’ve learnt a pretty useful trick in Figma to help me in my future work.

So yeah thanks! @Yehia