Hi! I’m sew to Figma (been using it for about a week) and have expert level experience with similar products like Adobe Suite, Microsoft Suite, and Axure.
I’m stumped when it comes to making a grid and snapping to it. Let’s say I want to make a desktop app with 20px grid spacing. How do I do that? I’ve been all over the forms online and all I was able to do is make a grid and now be able to snap to it.
I keep seeing this “pixel grid” feature but that doesn’t do anything.
Any help would be appreciated! It’s a little concerning that this is a prominent feature in most apps and it seems to be… nonexistent… in a prototyping tool?
Right now there is no tools to create a functional grid in Figma, but there are way to do it by yourself:
Nested Auto-Layout
You can create a grid of some sort by nesting one auto layout frame inside an another.
The auto layout panel (on the right) will allow you to choose the direction and the spacing between element in this frame. So basically you want you parent frame to specify a direction (for example vertical) and its children to have the opposite direction (so horizontal) then make sure you specified the same gap value for those 2 and you will have a functional grid
You can play with the layout grid option to create your pattern and then simply drag n drop your item inside, make sure you have the snap to pixel grid checked on (settings > snap to pixel grid)
I may also be having a similar issue. I’ve read about layout grids and I’ve created an 8 column layout grid in the menu bar of my design. But when I try to position my icons it doesn’t seem to want to snap to the grid columns. In the view menu, “snap to pixel grid” is checked off. But I can’t get things to snap, and when I attempt to use constraints (center, center) it seems not to affect the position of the icon. I’m new to figma, I must be doing something wrong?
