Display grid OVER your designs

Is there really no way to show the grid over the design you are working on? If my design has a size of say 1280 x 1024 and there is a BG layer… when I zoom in a bit I can’t see the grid at all. That’s not very helpful. The point of the grid in design is to be able to see that you are snapping to it and count the boxes to make certain that margins and padding and container sizes are as they should be.

I propose 2 updates.

1.) Make the grid available OVER the canvas widgets.
2.) Give the grid an opacity control so you can put it over your designs and fade it a bit so you can see it and use it but it doesn’t take over

Additionally
3.) I’d REALLY like to be able to turn the grid on and off in the HTML output of my prototypes. Im designing with a team of developers and they LOVE the grid being in view. I know I can ‘make’ a grid and do the things I said, and I will. But this would be a really useful feature to have built-in.

thanks for reading :slight_smile:

Agreed it would be a nice addition.

In the meantime:

  1. You can create a grid widget and lock it. The downside is that you’ll keep having to bring it to front.
  2. Have you enabled Snap to grid and disabled Snap to widgets? Assuming your grid is 10px or higher, this allows you to easily snap to the grid and also use Shift + Arrow keys to shift items 10px at a time

thanks for responding

  1. did it. as you said, it’s useful but only to a point. i did make a dynamic panel with some buttons that allows the devs to display and hide it over my designs… they love that

  2. yeah I use snap but it’s often annoying because not everything should snap to the grid. fonts often dont fit the grid perfectly and containers that fit content might be 473 pixels wide … so i end up turning it off a lot

On point 2, you’re right - however I simply create a blank box widget as a container that is sized in multiples of 10, and group it with the widget that isn’t a multiple of 10.

The result is that the group snaps to the grid, even if it’s content inside the container is off-grid. It’s a bit of a faff at times, but it helps keep everything within a 10px grid. Hope that helps