Design-to-Dev Handoff Checklist - Everything Developers Need From Designers

Design tokens defined

— colors, typography, spacing, borders, shadows reference tokens (not raw hex codes)

Component library organized

— all reusable components are in the design system, not one-off

Component variants documented

— primary, secondary, tertiary, destructive for buttons; all sizes for inputs, etc.

States defined for all components

— default, hover, focus, active, disabled, loading, error, success

Typography scale is consistent

— no random font sizes

Spacing scale is consistent

— uses 4pt or 8pt grid system

Icon library is unified

— single icon style and source

Pages are organized logically

— e.g., "01 — Cover," "02 — Design System," "03 — Core Flows," etc.

Frames are named descriptively

— "Dashboard — Desktop — Default" (not "Frame 47")

Layers are named

— groups have meaningful names, auto-generated "Frame 34" is cleaned up

Components use Figma Components

(not copies) — so updates propagate

Variants properly configured

— single component with variants, not separate components per state

Auto Layout used

where appropriate for responsive behavior

Hidden work is hidden or deleted

— no "V1 Archived" frames cluttering the file

Dev Mode enabled

— developer access is granted

All responsive breakpoints designed

— desktop (1440px), laptop (1024px), tablet (768px), mobile (375px)

Both light and dark mode designed

(if supporting both)

Zoom state designed

(if text is expected to scale to 200%+)

Default state

— the "happy path"

Empty state

— when no data exists (e.g., new user, no items in list)

Loading state

— skeleton screens, spinners, or progress indicators

Error state

— API failure, network error, invalid data

Success state

— completion confirmation, success messages

Filtered/no-results state

— when filters produce zero matches

Permission-denied state

— user lacks access (if applicable)

Session-expired state

— timed-out session handling

Short content

— minimum expected length (single character, 1 item)

Long content

— maximum or overflow (100-char names, 1000+ items, many paragraphs)

Empty values

— null/undefined handled gracefully

Edge-case values

— 0, negative numbers, very large numbers, dates in different formats

Color contrast passes WCAG AA

(4.5:1 normal text, 3:1 large text/UI)

Focus indicators designed

— visible keyboard focus styles

Interactive areas are at least 44×44px on mobile

Alt text specified for images

ARIA labels specified for icon-only buttons

Screen reader behavior noted

for complex interactions

Animations defined

— duration, easing curve, what triggers

Transitions specified

— enter/exit animations, state changes

Micro-interactions documented

— hover delays, click ripples, etc.

Scroll behavior specified

— fixed/sticky elements, scroll snapping, infinite scroll

Anatomy documented

— labeled parts of the component

Padding/spacing internal

— all internal spacing documented

Maximum widths / heights

— if applicable

Corner radius

— specified via token

Border

— thickness, color, style

All visual variants

— primary, secondary, tertiary, destructive, ghost

All size variants

— small, medium, large (with exact dimensions)

With/without icon variants

— leading, trailing, icon-only

Default

Hover

— background color change, elevation change, cursor change

Focus

— focus ring specification

Active / Pressed

— color/scale shift

Disabled

— reduced opacity or different color, cursor: not-allowed

Loading

— spinner or skeleton

Error

(form inputs, specifically)

Success

(form inputs, specifically)

Click/tap behavior

— what happens

Keyboard behavior

— Enter, Space, Escape, Tab, Arrow keys as applicable

Focus behavior

— where focus moves

Accessibility

— role, aria-labels, keyboard shortcuts

All icons exported as SVG

(preferred) or optimized PNG

Icon sizes standardized

— 16px, 20px, 24px (use one system)

Single icon set

— not mixed between Heroicons, Phosphor, Lucide, etc.

Stroke weight consistent

across icons

Icons optimized

— SVGO or similar to remove unused metadata

Images exported at multiple resolutions

— 1x, 2x, 3x for retina

Modern formats provided

— WebP preferred, with JPG/PNG fallback

Dimensions specified

— width and height for every image (prevents layout shift)

Alt text defined

for every image

SVG format preferred

for decorative illustrations

PNG for complex raster illustrations

Color tokens used

— illustrations reference design tokens, not hardcoded colors

Web fonts specified

— font files, weights, styles

Font fallback stack defined

— e.g., `"Inter", -apple-system, BlinkMacSystemFont, sans-serif`

font-display property specified

— typically `swap`

Primitive colors defined

— full color palette (10 shades each for primary, gray, etc.)

Semantic colors defined

— color-text-primary, color-bg-default, color-border-focus, etc.

Component-level tokens

— button-primary-bg, card-surface, etc.

Dark mode tokens defined

(if supporting dark mode)

Font family tokens

— font-sans, font-mono

Font size tokens

— font-size-xs, font-size-sm, ... font-size-5xl

Font weight tokens

— font-weight-regular, font-weight-medium, etc.

Line height tokens

— line-height-tight, line-height-normal, etc.

Semantic typography combinations

— text-heading-1, text-body, text-caption

Spacing scale defined

— space-1 (4px), space-2 (8px), ... space-24 (96px)

Component-specific spacing

— card-padding, input-padding, etc.

Border radius tokens

— radius-sm, radius-md, radius-lg, radius-full

Shadow tokens

— shadow-sm, shadow-md, shadow-lg

Z-index tokens

— z-modal, z-popover, z-tooltip (for layering)

Animation tokens

— duration-fast, duration-slow, easing-in-out

Tokens exportable to code

— via Tokens Studio, Style Dictionary, or similar

Format matches dev team preference

— CSS variables, Tailwind config, SCSS, JS objects

Breakpoints defined explicitly

— e.g., mobile (<768px), tablet (768-1023px), desktop (1024-1439px), wide (1440px+)

Fluid vs. fixed layouts documented

— when does layout stretch vs. center?

Maximum content widths specified

— e.g., text max-width: 720px

Column count per breakpoint

— e.g., 4 columns desktop → 2 columns tablet → 1 column mobile

Image behavior

— cover, contain, fit, crop directions

Sidebar behavior

— desktop: persistent; tablet: toggleable; mobile: drawer

Navigation transformation

— desktop: top horizontal; mobile: hamburger → drawer

Table behavior

— desktop: full table; mobile: horizontal scroll or card layout

Touch target minimums

— 44×44px on mobile

Hover states suppressed on touch

— no :hover on touch devices

Swipe gestures defined

(if used)

Pull-to-refresh behavior

(if used)

Animation duration

— in milliseconds (e.g., 200ms)

Easing function

— ease-in-out, ease, cubic-bezier values

Trigger

— what causes the animation (click, hover, page load)

Reduced motion alternatives

— respects `prefers-reduced-motion` OS setting

Modal open/close

— duration, fade + scale, backdrop fade

Page transitions

— if any

Form validation

— shake on error, checkmark on success

Loading states

— skeleton shimmer duration, spinner speed

Micro-interactions

— button press, checkbox animation, toggle

Actual copy provided

(not lorem ipsum)

Error messages specified

— exact text for each error state

Empty state copy

— headlines, descriptions, CTA text

Success messages specified

— confirmation copy

Tooltips and help text documented

Form validation messages

— for each field, each error condition

Number formatting

— decimal places, thousands separators, currency symbols

Date/time formatting

— locale-specific formats (US: MM/DD/YYYY; most of world: DD/MM/YYYY)

Truncation behavior

— character limits, ellipsis behavior

Placeholder text

— used appropriately (not as a replacement for labels)

Cover page exists

— project overview, last updated date, designer names

Component documentation

— anatomy, usage, dos and don'ts

Prototype links

— interactive prototypes for complex flows

Annotation frames

— call-outs for important behaviors

Redlines

— spacing measurements visible in Dev Mode

Flow diagrams

— for complex multi-step processes

User story mapping

— which screens serve which user needs

Technical constraints noted

— any tech stack or library requirements

Third-party integrations

— if the design requires specific APIs or services

Meeting notes

shared

Follow-up items assigned

with owners

Design iteration needs flagged

Designer is available

for questions during implementation

Response time expectations set

(e.g., "I'll respond to questions within 4 hours")

Design reviews scheduled

at milestones (not just at end)

Process for design changes

during build defined

Version control

— Figma branching or version history used

Communication norms

— where to raise issues (Figma comments, Slack, Linear tickets)

Design QA before launch

— designer reviews built version

Pixel-level comparison

between Figma and implementation

Interaction behavior verified

matches design intent

Cross-browser testing

with designer involvement

Build documented back to design system

— update design system with any new components created during build

Retrospective conducted

— what worked, what didn't

Handoff process improvements captured

— for next project