When using a 375px-wide canvas with a layout grid, I encountered a misalignment issue due to Figma’s grid system not supporting decimal values. This creates visual inconsistencies, especially with odd-width canvases and fixed gutter sizes.
Steps to Reproduce:
- Set up a 375px-wide canvas (e.g., iPhone screen).
- Add a layout grid with 16px margins and a 14px gutter.
- Create a 2-column design aligned to the grid.
- Measure each column using the rectangle tool.
Expected Behavior:
Both columns should be equal in width.
Actual Behavior:
One column is larger than the other due to the inability to use decimals for grid calculations. Odd-width canvases can’t evenly split without decimals, leading to visual misalignment.
Why This is a Problem:
This issue causes unnecessary confusion and impacts precision in pixel-perfect designs. Designers may incorrectly attribute the problem to their setup or component measurements.
Proposed Solution:
- Allow decimals in layout grid settings for gutters, columns, and margins.
- Add a note or visual indicator for grids on odd-width canvases to inform users of potential misalignment.