Hi there, i’m trying to figure out the auto layout panel,
i can’t understand the difference between alignment and constraint in the right panel, in my opinion they act similarly but I see some difference, can someone settle this issue ?
Thanks !
There is a few videos explaining this. I was confused about this as well, as they seem quite similar. The only times I use constraints is when working with grids, because they have the magic ability to make frames resize according to a grid defined.
Some terms I’m going to use here:
- Parent frames are frames that have other frames or elements nested inside of them.
- Child frames/elements are elements that are nested inside of a parent frame.
In Figma there are regular frames without auto layout, and then there are also frames that have auto layout applied to them. Frames that don’t have auto layout aren’t very smart—you can’t set rules on them that define how their children should scale when you resize the parent, or how the children should be laid out inside of the parent. In a parent frame that doesn’t have auto layout, all you can do is position child elements absolutely, which means setting exact pixel coordinates relative to the parent frame. You can also set constraints on the children. When you set constraints on a child element you are telling it which edge of the parent frame it should anchor to when you resize the parent. To sum it up, constraints can be set on children of frames that DON’T have auto layout applied to them.
In your screenshot, the auto layout interface you’re seeing is used to specify rules for any child elements that go inside of that frame. The alignment controls in this situation don’t use absolute pixel coordinate positioning behind the scenes. If you imagine that the edges of your auto layout frame are magnetic, the alignment setting controls which part of the frame the children are getting pulled towards.
In your screenshot, you have selected an auto layout frame that is parented inside of a regular frame (with no auto layout). Because the parent from does not have auto layout applied to it, you need to set constraints on its children, even if those children are auto layout frames.
I know it’s complicated to understand but hopefully that helped. You might actually want to look up CSS documentation on absolute positioning vs. flexbox because that’s the mental model that powers a lot of frame logic in Figma.
Hi Julius, thanks for your support,
i will see the tutorial in order to figure out the solution.
Have a nice day !
Hi Brian, thanks for paying attention,
still hard to grasp, maybe you could attach a tutorial which explains the notions you’ve mentioned.
Cheers !