Member-only story

Where does the checkerboard transparency grid come from?

Solar cells, photoshop and cuttlefish

Ben Maclaren
UX Collective
9 min readOct 26, 2023

--

I love colours. But, I’m terrible at choosing them.

While writing an article on “What colour should your Figma boards be?” I switched off all colours on the background of my Figma board and noticed the classic checkerboard background.

A checkboard pattern with grey tiles from the Figma app

This left me with two questions:

Why is the checkerboard pattern so ubiquitous in editors? and when did it become a standard?

What is the Transparency Grid?

In case you’re unsure, when I say transparency grid, we’re talking about this pattern below.

Checkerboard examples

You’ve probably seen them when downloading a .PNG image that you thought was an SVG image or more likely when opening up a blank Figma/Photoshop editor.

I knew it as that checkerboard thingy. But Photoshop and Figma, have a fancy name called the Transparency Grid.

Finding Transparency Grid

--

--

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Ben Maclaren

Business Designer, Coach, Do-er of Things. I have more projects than I have time.

No responses yet

What are your thoughts?