Is it possible to clip content on an overlay?

Hi @eline.swennen,

When you’re designing, sometimes you want an overlay to behave like a well-behaved guest at a party—staying within its designated boundaries. Here’s how you can achieve that:

1. Select Your Overlay: First, make sure you’ve got your overlay element ready. It’s like inviting a VIP guest to your design soirée.

2. Clip Content Magic: Now, imagine you’re wielding a magical wand (or just use your mouse). Select the overlay element and head over to the Layer menu. There, you’ll find the enchanting option called “Clip Content.” Click it! ✨

3. Shortcut Alert: If you’re feeling extra wizardly, use the shortcut:

   • Windows: Ctrl+Alt+C
   • Mac: Command+Option+C

4. Voilà!: Your overlay content is now clipped within its container. It’s like fitting Cinderella’s glass slipper—snug and perfect. 🥿

5. Fine-Tuning: Adjust the size and position of your container (the other element) to ensure everything aligns beautifully. Imagine you’re arranging flowers in a vase—just the right fit!

Remember, overlay clipping is like taming a wild unicorn: it takes practice, but once you’ve got it, your designs will sparkle! 🦄✨

And hey, if you ever need more magical design tips, just wave your wand—I mean, ask away! Happy designing, @eline.swennen! 🌟🎨

References:

1. Figma Community Forum: Clip overlay on clipped content?
2. Figmafy: What Is Clip Content in Figma
3. Figma Help Center: Prototype scroll and overflow behavior
4. 8Designers: What Is Clip Content in Figma?

(1) Clip overlay on clipped content? - Figma Community Forum. Clip overlay on clipped content?.
(2) What is Clip Content in Figma: A Quick Guide for Designers. What is Clip Content in Figma: A Quick Guide for Designers.
(3) Prototype scroll and overflow behavior – Figma Learn - Help Center. https://help.figma.com/hc/en-us/articles/360039818734-Prototype-scroll-and-overflow-behavior.
(4) What Is Clip Content in Figma? | Web Design Tutorials and Guides. What Is Clip Content in Figma? | Web Design Tutorials and Guides.

Hi @eline.swennen, Thanks for reaching out about this!

​​Is the element you want to use for the “Clip content” within the frame that starts the interaction for the overlay?

If that’s the case, the overlay is displayed over the frame rather than within it. It seems there is no way to use the “Clip content” option with a frame that the overlay doesn’t belong to.

You can find more details here:

• Parent, child and sibling relationships
• Create overlays in your prototypes

I’m uncertain if I grasp your objective accurately, but a potential workaround could be to add a parent frame to the overlay to apply “Clip content” and then use “Manual” Overlay settings to modify the overlay’s placement, if it aligns with your design.

If the information above did not assist you, you are welcome to browse our community and see if any designs catch your attention: https://www.figma.com/community

If I missed anything, please inform us. Also, if anyone in our community has any other ideas, please share them here.

Thanks again for reaching out.

Hi!

Thank you for your help! I think it’s a little bit more complex what I’m trying to do.
I added an overlay on a cel component of a table row component, so we were able to add a hover state to our table (so it will also hover when we need to edit our tables).

I followed this tutorial (the 2nd option) and it works. But we place our tables inside other screens, so we now have an overflowing hover and I can’t limit it or hide it with the clip content option.

This is our result:

Thank you for your help!