Design Handoff

Handoff sounds like a transaction: you finish, they start. Treat it that way and you will spend three weeks answering questions in Slack and watching your spacing get quietly reinterpreted.

The better framing is that you are writing a document for someone who was not in the room. They cannot see intent. They see pixels, and pixels do not say whether that sixteen-point gap is deliberate or an accident of where you dropped the layer.

Good handoff is precise about what must be exact, honest about what is flexible, and complete about what happens when things go wrong. The third one is the part everybody skips.

Specs

A spec answers every question an engineer would otherwise have to ask you. The easy half is what it looks like — type, spacing, fills, sizes. The half that gets left out is what it does: what happens on tap, what animates and how fast, what the focus order is, what a screen reader announces.

Visual values should come from tokens, not from you typing hex codes. If the system has color-surface-raised and a four-point spacing scale, name those — a raw value invites drift the moment the palette changes.

Say what is non-negotiable and what is not. "This must stay on one line at any width" is a spec. "Make it look nice on mobile" is a wish, and it will be granted badly.

The test: could someone build this correctly without messaging you?

Figma Dev Mode

Dev Mode turns a Figma file into something an engineer can read — measurements between layers, assets exported at the right densities, variable names, and generated CSS, Swift or Compose snippets.

Two things about those snippets. They describe one frame, not your codebase; they know nothing about your components, breakpoints or state, so nobody should paste them. And they are only as good as the file underneath. A frame held together by absolute positioning generates nonsense. The same frame built with auto layout generates something close to the rules an engineer would have written by hand.

So the real work is upstream. Name the layers. Use components and variables. Mark the frame itself Ready for dev — that is the flag Dev Mode collects, and an engineer who finds nothing marked will choose a frame alone, and choose the wrong one.

Edge Cases & States

The happy path is the smallest part of the job. Any screen that loads data has at least five states: empty, loading, partial (some of it arrived, the rest has not), error, full. Draw all of them. Whatever you leave undrawn gets invented by an engineer at five o'clock on a Friday.

Then attack the content. The longest plausible name. A German translation that outgrows the English. Zero items, one item, ten thousand. No avatar. A number that is negative, or 1,284,339. Connection lost halfway through a submit.

Empty states deserve the most attention and get the least — what a new user meets before the product has anything to show them, drawn last and in a hurry by whoever notices.

Write the error copy yourself. If you do not, Error: null ships to a customer.

Zeplin

Zeplin is a handoff space of its own. You publish chosen frames to it from Figma or Sketch, and engineers get measurements, colour values, downloadable assets, starter code snippets and a stable place to comment — without opening your working file.

The argument for it is that publishing step. A design file is live; it changes underneath whoever is building from it. Zeplin freezes a version, stamps it, and keeps the previous one. Teams shipping against tagged releases tend to want that.

The argument against it is another tool, another licence, another thing to forget to update — and Dev Mode now covers most of the same ground.

Decide on the question that matters: does your team need a frozen version, or only the current one? The rest is preference.

Sign in to track your progress

Discussion

Sign in to ask a question

No questions on this lesson yet. Highlight a passage to ask about it, or use Ask a question.

Up next

Launch Readiness

Working with Engineering