Design handoff is the moment a product design moves from Figma (or another design tool) into working code, and it sits inside the broader discipline of engineering collaboration — the ongoing relationship between designers and developers that determines whether that handoff is smooth or a source of endless rework. Practitioners care about this because a beautiful mockup that ignores technical constraints, existing components, or edge-case content turns into a slow, inaccessible, or simply wrong product, and every question a developer has to guess the answer to becomes a bug or a Slack thread later. The key mental model: handoff is not a single file-transfer event at the end of a project — it is a relationship maintained through early feasibility conversations, shared component libraries, and clear annotations, and the best teams treat the "handoff" itself as the smallest, least interesting part of that relationship. This sheet covers how to bring engineers in early, align designs to what already exists in code, document the states and edge cases that make or break real-world usage, and package a "ready for dev" file that developers can build from without a follow-up meeting.
What This Cheat Sheet Covers
This topic spans 13 focused tables and 96 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Handoff Models & Foundational Concepts
Before touching a single file, it helps to know the different mental models teams use for handoff — from the traditional one-time deliverable to a fully continuous, no-handoff workflow — because the model a team chooses shapes every practice below it.
| Model | Example | Description |
|---|---|---|
Designer marks a Figma frame "Ready for dev" and shares the Dev Mode link with the engineering team. | The process of transferring a finished design's specs, intent, and assets to the team that will build it. | |
A fully-finished Figma file, redlined and locked, delivered once at project end. | •Design is completed independently, then handed off in one go •Originates from Waterfall workflows, not native to Agile | |
Updating the shared handoff file directly instead of sending developers a new link for every revision. | One canonical, always-current file everyone points to, avoiding confusion from duplicate or outdated copies. | |
A ticket can't enter a sprint until it has linked designs, acceptance criteria, and confirmed feasibility. | Team-agreed checklist a backlog item must meet, using the INVEST criteria, before work can start on it. |