Why I started design engineering

For most of my career, design ended at the handoff. I'd spend weeks in Figma getting the spacing right, the type scale dialled in, the interaction states considered. Then it came back in a pull request looking almost right. Not wrong, just not quite what I meant.

That's where the conversation started. I'd leave a comment: the padding is off, the hover state is missing, this text should truncate. The engineer would fix it, or ask what I meant, or explain why it was harder than it looked. A few rounds later we'd land somewhere close to the design. Then the next feature started the same way.

Neither of us was doing anything wrong. We were translating, and every translation lost something.

The questions I couldn't answer

The back-and-forth was slow because half of it was me guessing. When an engineer said a layout would be painful, I couldn't tell if that meant an hour or a week. When I asked for an interaction, I didn't know it implied a component that didn't exist yet, and that building it was a week of work nobody had scoped.

The pushback was rarely stubbornness. It was information I didn't have the vocabulary to hear.

At some point I stopped complaining about it and started learning enough to fix it myself.

What changed in the conversation

When you know what something costs to build, you design differently. Not worse. Differently. You make the tradeoffs deliberately instead of by accident. You stop speccing interactions that need three state management libraries, and start finding simpler ones that feel just as good.

The review comments changed too. There were fewer of them, and they were specific. Instead of "this looks off", I could point at the line that caused it. Sometimes I fixed it myself and asked the engineer to check my work instead.

A shared vocabulary

What shortened the back-and-forth most was a design system. Not as a component library. As a set of decisions both sides can point to.

When a token like color.text.secondary exists in Figma and in code, the conversation changes. You're not arguing about whether the muted text is #8A8A8A or #888888. You're talking about intent.

// A token isn't just a value. It's a contract.
const tokens = {
  color: {
    text: {
      primary: "var(--fg)",
      secondary: "var(--muted)",
    },
  },
} as const;

The engineers and I still go back and forth. We spend it on better questions now.

On writing this down

I'm writing here partly to think out loud, and partly because I spent a long time looking for people who'd made the same transition and couldn't find many who wrote about it honestly. Most posts are either "learning to code is easy!" or a horror story.

The truth is slower and quieter than either of those. It's mostly just getting comfortable being a beginner again, which turns out to be good for you.