I’m facing this issue where column grids are not divided equally/accurately. I set up my layout grid with these:
column count: 4
type: stretch
margin: 16px
gutter:16px
Works fine on even-number’s width (78.25px for each column). But when I change the width to odd-number (iPhone 14 Pro - 393px for example), the 2nd column is 79px wide and the rest are 78px.
I noticed this too and just ended up “prototyping” my website home page in Affinity publisher. Granted, the uneven grid/columns are technically “pixel-perfect” which is a term thrown around in UI job listings, but I prefer evenly spaced considering we work with vectors, not pixels.
True. Somehow we need to help designers to understand that pixel-perfect is not for everything. Especially when we are working with responsive designs.
I have couple of junior designers (sometimes senior designers too!) who came to me asking if it’s okay for card components are not in pixel-perfect when they use auto-layout and make the card’s width fill the parent container. Then I have to explain to them that pixel-perfect is not for everything, and also telling them to think from development POV on how they can make everything pixel-perfect (UI components used) in responsive designs.
It looks like Figma also need to learn about this too!
I’m sorry I just know about browser using pixel-perfect.
But,
There’s a conflict between column grid’s column/gutter calculation and auto layout’s space calculation. In my example here, you can see that the cards are not inside the column area, which can cause confusion to designers who are not aware about the reason.
My suggestion, the calculation for spacing for layout grid and auto layout should be the same.