Help with Pixel Pitch?

Figma (and other programs I’ve used) all design using square pixels. However, a team I’m working on is designing a UI for an instrument with an embedded screen, and the pixels on the screen are not square (Example: instead of 1:1 it’s like 1:1.5)

Naturally, this means that if we design for square pixels, it will end up being distorted on the instrument’s display. So on our side, it’d be nice if we could design with this ratio/pitch in mind.

Is there any tricks in Figma, or a plugin that might help with this?

Unfortunately, pixel grids don’t allow for decimal points in Figma or for non-square sizes easily.

If I faced this scenario, I would design at twice the size (2x) so that pixel sizes are at least whole values again (2:3 instead of 1:1.5). And then anything you export/share, just shrink/export it at 0.5x during handoff.

If you do decide to design at 2x, then you can create a custom layout grid of rows and columns to simulate your pixel size. Here’s a quick screen grab of creating a custom 2x3 layout grid, which you can then save as a reusable style. (For the grid I used 5000 rows and columns, but for your grid I would match it to your instrument screen size at 2x.) Best of luck!

image