Practical field guide / Agency designers, producers, and technical leads

The Figma-to-Next.js handoff checklist

A production handoff is a set of decisions, not a file link. Use this checklist before estimation to expose the gaps that usually become rework during implementation.

By Ricardo Crespillo Romero Published 11 min read

Interactive worksheet

Handoff readiness check

Check the items your team can answer today. The goal is to expose decisions, not manufacture a perfect score.

0 of 10 0 of 10
Mark each resolved handoff decision

Start with an authority map

Before estimating pages, decide which artifact wins when Figma, copy documents, the current site, tickets, and verbal feedback disagree. The implementation partner should not have to infer product authority one screen at a time.

Name one approver for visual decisions, one for content, and one for technical or integration decisions. One person may hold several roles; the important part is that each decision has an owner and a review window.

  • Link the approved Figma file and branch or version.
  • List the content source and who can approve copy changes.
  • Identify the current production behavior that must be preserved.
  • Record the decision owner and expected review turnaround.

Inventory pages, components, and states separately

A page inventory answers where the interface appears. A component inventory answers what should behave consistently. A state inventory answers what happens outside the polished default screen. Mixing the three makes estimates look precise while leaving the risky work undefined.

  • Routes, locale variants, gated views, and redirect destinations.
  • Shared navigation, footer, forms, tables, filters, dialogs, and feedback components.
  • Loading, empty, partial, success, validation, permission, offline, and server-error states.
  • Mobile menu, sticky controls, keyboard focus, and reduced-motion behavior.

Specify responsive behavior as rules

A desktop frame and one mobile frame do not define what happens between them. Instead of asking the developer to imitate snapshots, describe the layout rules: what wraps, reorders, sticks, scrolls, hides, or changes priority.

Check at least 360, 390, 768, 1024, and 1440 pixels. Also test a short landscape viewport, because fixed headers and full-screen menus often fail on height rather than width.

Make content and asset ownership explicit

Final copy, real screenshots, alternative text, image crops, and social previews are release inputs. Placeholder content changes line length, card height, navigation wrapping, metadata, and responsive behavior; it is not visually neutral.

  • Provide final headings, body copy, labels, validation messages, and legal text.
  • Export source images at adequate resolution without embedded interface copy.
  • Define meaningful alt text or mark decorative assets as decorative.
  • Assign ownership for future CMS entries and social preview images.

Write interaction and accessibility acceptance criteria

If an interaction matters, describe the trigger, response, focus behavior, escape path, status announcement, and reduced-motion alternative. This is more useful than naming an animation curve before the basic behavior is known.

  • Logical headings and landmarks are identified.
  • Every action is reachable and visible with a keyboard.
  • Dialog and menu focus behavior is specified.
  • Form labels, instructions, errors, and status messages are written.
  • Color is not the only way to communicate state.

Resolve integrations before they enter the critical path

List APIs, CMS models, forms, analytics, consent, authentication, payments, email, search, and hosting constraints. For each one, record the environment, owner, credential path, rate limits, error behavior, and available sandbox or fixture data.

End with a shared definition of done

The handoff is ready when design fidelity is only one part of acceptance. Include type and build checks, browser support, responsive views, keyboard flows, automated accessibility, metadata, canonical behavior, redirects, form failure states, analytics consent, and ownership after launch.

A short known-limitations list is a sign of a controlled release, not a weakness. It prevents an implementation team from disguising unresolved decisions as finished work.

Apply the guide to a real release

Turn the checklist into a bounded delivery decision.

Share the current artifact, product, or workflow and the result the team needs to release. The first conversation should clarify fit and risk, not manufacture certainty.