101Turn
Back to the journal
Design1 min read

Designing for Developers: How to hand off UI without losing your mind

Designs look perfect in Figma but broken in the browser. This is exactly how we hand off design to developers so the final product actually matches the mockup.

101Turn
Studio
Designing for Developers: How to hand off UI without losing your mindDesigning for Developers: How to hand off UI without losing your mind

There's always a gap between what a design looks like in Figma and what actually ships. Usually the designer blames the developer for not paying attention, and the developer blames the designer for drawing something that was never really buildable in the first place. Both are half right, and neither complaint fixes anything.

A raw Figma file without that layer is a picture of an outcome, not a specification.

Treat the design like a system, not a picture

The fix isn't better communication in the abstract - it's handing over rules instead of a static image. Spacing, type scale, and exact colour values need to be defined once and referenced everywhere, so a 16px padding value is 16px on every screen it appears on, not "close enough" three different ways across three different screens. A raw Figma file without that layer is a picture of an outcome, not a specification a developer can build from with confidence.

Design the states nobody drew

The screens that get skipped are usually the ones that matter most in production: what does this table look like with zero rows in it? What happens when a name is forty characters long and wraps twice? If the designer doesn't decide that in advance, the developer will guess under deadline pressure, and the guess is rarely the one you'd have picked.

  • Empty states - no data yet, not an error
  • Loading states - what's visible while something is still resolving
  • Error states - what a failed action actually tells the user
  • Edge-case content - very long names, very long numbers, zero results

Let the build cost show up before the deadline does

The single highest-leverage habit is getting a developer to look at a design before it's declared final. If one specific animation or transition is going to take forty hours to implement well, that's worth knowing while it's still a design decision rather than a commitment already promised to a client. Whether it's worth the budget becomes a real conversation instead of a surprise.

Related on this site

Building something like this?

Let’s connect
Related reading
Get in touch

Talk to the people who’d build it.

Tell us what you're working on and what's slowing you down. A short call is usually enough to know whether we're the right fit - no proposal required first.

Quick links

WhatsApp