Layout grid covering layers?

I’ve searched for similar topics but haven’t come up with anything that directly answers the problem I’m having.

Hello everyone, I’m new to Figma so I apologize if this is an obvious and easy solution, but my layout column grid is covering the rest of my design layers and I’m not sure how to turn this off. The tutorial I was following added in their layer elements and they automatically went over the applied column grid, whereas with my design, the grid is automatically covering my layers. I’ve tried bringing the layers to front and changing the opacity of the grid, to no avail. I’d appreciate any and all assistance! Thank you.

See that little eyeball icon in the right sidebar in the Layout Grid section?

Screenshot 2024-08-08 at 5.33.28 PM

  • If you select a frame that has the grid, then click that eyeball, it will HIDE ALL the grid layers.

  • If you click the minus sign, it will remove that grid style from THAT frame only.

It is weird because Figma does not work well there. I wish I could hide the grid on one frame, but when you click the eyeball, it hides all of that grid. Where delete only deletes the one you have selected. Gets frustrating, but you learn these weirdo things as time goes on.

Hope that helped your current need!

Hello,

Thank you for your response. I could hide the grid, but I’m confused because in my example they didn’t have to- their designs went over top of the grid. I’ve put in a screenshot. Is there any way to achieve this?

Thank you for your help!

My guess would be that their frame that had the grid on it is BEHIND the other stuff.

Otherwise it may just LOOK that way. Because the grid is applied to the frame. Anyything in the frame is on top of the grid.

IF in your example, you applied the grid to a frame in FRONT of your other stuff…then it would be in front of your stuff.

If you upload your file or share a link, I can tell you.

Yes; that is the way the example was set up. The grid was added to the background frame and then the navigation bar, circle, and text were added on top of that frame. I thought I did this as well, but perhaps I did something incorrectly?

Here’s the link to my Figma project: https://www.figma.com/design/wrBlGEEEGVqdfsfZm0SBUk/Foundations-Wayfarer-Website-Design?node-id=0-1&t=Lznb173keYc3NZy7-1

1 Like

It is just that your grids are at 100% opacity.

Dial back the opacity of the grid and your content will show through.

On my own grids I only use a 10% opacity.

That was a simple fix! Thank you so much for your help.

1 Like

Awesome! Glad it worked!