Figma has a feature called "Clip Content". By enabling "Clip Content" on a frame, each element inside the frame that goes beyond the bounds will be cut off. Usually such elements are shadows or borders.

Here's a practical example of a frame with and without "Clip Content" enabled:

Frame without clip content:

In this frame, clip content is unchecked. This means everything outside the frames boundary should be visible. That’s why we can see the shadow effect on this frame.

Frame with clip content:

The shadow is hidden here because we have enabled clip content.

Note: Clip content is only applied on frames and components. You will not find the checkbox for any other element.

How can "Clip Content" affect my design files?

Anything that can go beyond the bounds of a frame can be shown or hidden. Most of the time, you will notice this with shadows and borders. You can also use this feature to show or hide repeated elements in components. An example would be an image carousel that by default crops of the images outside the carousels active view. Another use-case could be a table component that can be resized to hide table entries that would otherwise overflow the total height.

How can I correct this in my file?

Select the frame and uncheck clip content to make shadows or borders reappear. This will definitely be a tedious task to do for every frame manually. We can help here 🙂. Simply send us the name of your file to support@magicul.io. We will reconvert your file with Clip Content disabled by default and send it back to you.

What can I do in my original file to avoid this?

Sadly, there's not much you can do for now. Figma by default sets Clip Content as enabled for all frame elements.

How can I tell it's not a clip content issue?

If the element for which you are noticing any visual differences is not a frame, then it's most likely a different issue. Feel free to still reach out to us, we are happy to help!

Did this answer your question?