Module 21: Design Handoff — Design & Code Foundations

09

undefined

Handoff Format

Print

PDF / Press-ready

Final file

Deliver finished, production-ready files

Web

Figma + Tokens

Living documentation

Ongoing collaboration, not one-time delivery

Specifications

Print

Bleed, CMYK, DPI

Print production

Exact physical dimensions and color profiles

Web

Tokens, States, A11y

Interactive specs

Responsive behavior, states, accessibility

Changes

Print

Costly

Reprint required

Changes after printing are expensive

Web

Iterative

Update anytime

Token changes cascade automatically

Collaboration

Print

Sequential

Design → Print

Designer finishes, then production

Web

Parallel

Design ↔ Dev

Ongoing collaboration, shared language

10

undefined

Communication Theory

undefined

Systems Thinking

undefined

Efficiency

undefined

11

Handoff Excellence

How top design teams communicate with development.

Comprehensive Docs

Every component documented

Principles Identified:

Living documentation Always up-to-date with Figma and code

Usage guidelines When to use, when not to use

Accessibility baked in A11y specs for every component

Key insight: Atlassian's design system shows how documentation scales across hundreds of developers.

Tokens + Components

Design tokens power everything

Principles Identified:

Token-first Everything references tokens, not values

Multi-platform Same tokens for web, iOS, Android

Open source Community can see and contribute

Key insight: Primer shows how tokens enable consistency across platforms and teams.

Tight Collaboration

Designers who code

Principles Identified:

Shared context Designers understand implementation

Fast iteration Minimal handoff friction

Pixel-perfect Design and code match exactly

Key insight: Linear's small team shows how close collaboration eliminates handoff entirely.

12

Handoff Failures

Common mistakes that slow down development.

Failure: Undefined States

Button design only shows default

"What does hover look like?"

Fix: Document all interactive states

Default, hover, active, focus, disabled

All states specified

Rule: Every interactive element needs: default, hover, active, focus, disabled, loading states.

Failure: Raw Values, Not Tokens

background: #3b82f6

padding: 12px 24px

Hard to maintain

Fix: Use semantic token names

background: var(--color-primary)

padding: var(--space-3) var(--space-6)

Token-based

Rule: Always use token names. Raw values break when the design system updates.

Failure: Missing Edge Cases

"Perfect" design only

What if the title is 100 characters?

Fix: Design for empty, error, and overflow

Empty, loading, error, overflow cases

All scenarios covered

Rule: Design for: empty state, loading, error, long content, no content.

Failure: Throw-Over-Wall

Designer finishes → Hands off → Done

No developer input

Fix: Collaborate throughout the process

Design ↔ Dev feedback loop

Early and often

Rule: Include developers early. Their input prevents unbuildable designs.

13

Handoff Quality Checks

Validate your handoff is developer-ready.

01

Build-Without-Asking Test

Tests: Completeness

Can a developer build this without asking any questions? If no, identify and document what's missing.

Zero questions = good handoff

02

State Audit

Tests: Interactivity

List every interactive element. Check: default, hover, active, focus, disabled, loading, error states all specified.

☑ Button: 6 states

☑ Input: 5 states

☐ Dropdown: missing focus

03

Token Coverage

Tests: Consistency

Search for raw values. Every color, spacing, and font size should reference a token, not a hard-coded value.

Found: #3b82f6

Should be: color-primary

04

Edge Case Review

Tests: Robustness

For each screen: What if it's empty? What if loading fails? What if content is too long? What if user is new?

Empty state: ✓

Error state: ✓

Overflow: ✓

14

Token Implementation

How design tokens translate to CSS.

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-error: #ef4444;
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  
  /* Typography */
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
}

CSS Custom Properties via CSS

:root scope - Global access throughout CSS
Semantic names - Meaning, not appearance
Grouped categories - Easy to find and maintain

Tip: Match token names exactly between Figma and CSS for seamless handoff.

.button {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
}

.button:hover {
  background: var(--color-primary-hover);
}

.button:disabled {
  opacity: 0.6;
}

Using Tokens via CSS

var() function - Reference tokens anywhere
State variations - Hover uses related token
No magic numbers - Every value has a name

Tip: Never use raw values. Even opacity could be a token: --opacity-disabled: 0.6

:root {
  --color-bg: #ffffff;
  --color-text: #1f2937;
  --color-primary: #3b82f6;
}

[data-theme="dark"] {
  --color-bg: #111827;
  --color-text: #f9fafb;
  --color-primary: #60a5fa;
}

.card {
  background: var(--color-bg);
  color: var(--color-text);
}

Dark Mode Tokens via CSS

Same token names - Code doesn't change, values do
data-attribute - Easy to toggle theme
Semantic colors - bg, text, not white, black

Tip: Semantic color names (--color-bg, not --color-white) enable theming.

15

Self-Assessment

Test your understanding of design handoff.

Q1

What are design tokens and why use them?

Click to reveal

Q2

What interactive states should every button have?

Click to reveal

Q3

Why include developers in design reviews?

Click to reveal

Q4

What makes 'throw-over-wall' handoff problematic?

Click to reveal

Q5

What edge cases should every screen design include?

Click to reveal

Design Handoff

Print vs Web

undefined

Science & Psychology

undefined

Real-World Examples

Handoff Excellence

Common Failures

Handoff Failures

Visual Tests

Handoff Quality Checks

Build-Without-Asking Test

State Audit

Token Coverage

Edge Case Review

CSS Implementation

Token Implementation

Self-Assessment

Self-Assessment

Key Takeaways