Throughout my career as an engineer, I have been given a countless amount of specs, design documents and Figma files to bring ideas to life. I have attended handoffs, kickoffs, design critiques, you name it. Something I noticed out through the years is more often than not, it feels like designers and developers are talking about the same thing while actually having fundamentally different mental models. And here is where the friction between these two disciplines comes into play.

The canvas vs. the browser

A designer has a canvas, and moves around stuff in this space. They can put an element wherever they want, move it around, resize it. This is quick, easy, fun and provides them with the creativity that a designer needs.

But, the browser doesn’t work like that. A browser organizes the elements in stacks. These elements have relationships, they take up space, and their position can change depending on the items around them.

A design to an engineer is a snapshot in a particular size screen, and our job usually is to find the correct rules that produce this result and interpolate this to different sizes.