Design Handoff

Design handoff is the process of translating a design into code. When done poorly, developers guess at spacing, colors, and behavior. When done well, implementation matches the design exactly.

The Handoff Problem

Common issues when designers hand off to developers:

The solution is a shared system: design tokens, clear documentation, and communication.

Design Tokens

Design tokens are the smallest design decisions — colors, spacing, typography — stored as named values that both designers and developers use.

From Figma to CSS

Your Figma file uses these values:

Color:   Primary Blue (#2563eb)
Spacing: 4, 8, 16, 24, 32, 48
Font:    Inter, 400/600/700
Radius:  4px, 8px, 12px
Shadow:  0 1px 3px rgba(0,0,0,0.1)

Turn them into CSS custom properties:

:root {
  /* Colors */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-bg: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-border: #e5e7eb;
  --color-error: #dc2626;
  --color-success: #16a34a;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Now instead of hardcoding #2563eb everywhere, you use var(--color-primary). Change it once, it updates everywhere.

With Tailwind CSS

If you're using Tailwind, extend the config:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
        'primary-hover': '#1d4ed8',
      },
      borderRadius: {
        DEFAULT: '8px',
      },
    },
  },
}

Extracting CSS from Figma

Using Dev Mode

1. Open the Figma file
2. Switch to Dev Mode (toggle in the top toolbar)
3. Click any element
4. The right panel shows CSS properties

What you'll see:

/* Figma shows you this */
width: 320px;
height: 48px;
padding: 12px 24px;
background: #2563EB;
border-radius: 8px;
font-family: Inter;
font-size: 16px;
font-weight: 600;
color: #FFFFFF;

What to Use and What to Ignore

Never hardcode widths. Figma shows pixel-perfect static dimensions. Your code needs to be responsive.

/* Bad — copied from Figma */
.card {
  width: 384px;
  height: 256px;
  position: absolute;
  left: 528px;
  top: 320px;
}

/* Good — responsive implementation */
.card {
  width: 100%;
  max-width: 384px;
  padding: var(--space-6);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

Handling Missing States

A complete design should include all these states:

Component States

Page States

If the design doesn't include a state, ask before implementing. Don't guess — your guess might not match what the designer intended.

Responsive Implementation

Figma designs are usually static at one or two breakpoints. You need to fill in the gaps.

Common Approach

1. Desktop design (1440px or 1280px) — the primary design
2. Mobile design (375px) — sometimes provided
3. Everything in between — you figure this out

Translation Strategy

/* Desktop: 3-column grid (from Figma) */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Tablet: 2 columns (you decide) */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column (from Figma mobile design) */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

Collaboration Best Practices

For Developers Working with Designers

1. Ask questions early — "What happens when this list is empty?" is easier to answer before you've coded it
2. Flag impossible designs — some layouts can't work responsively. Raise this before building.
3. Share implementation constraints — "We can't animate this without a 200KB library. Is it worth it?"
4. Show your work in progress — get feedback before you've finished, not after
5. Use the same vocabulary — learn basic design terms (kerning, leading, whitespace, hierarchy)

For Solo Developers

When you're both designer and developer:

1. Wireframe first — even a 5-minute paper sketch saves hours
2. Use a design system — don't make every decision from scratch (use Shadcn, Radix, or similar)
3. Copy layouts, not styles — find a site you like and study its structure
4. Limit your choices — pick one font, 5 colors, and a spacing scale. Stick to them.
5. Get feedback — show someone your work and watch them use it

Checklist: Before You Code

Before turning a design into code, verify you have:

• All component states (hover, focus, disabled, loading, error)
• Mobile and desktop layouts
• Color values and font specifications
• Spacing values (padding, margins, gaps)
• Interaction behavior (what happens on click, scroll, submit)
• Empty states and edge cases
• Assets exported (icons, illustrations, images)
• Agreed-on breakpoints for responsive design

Summary

• Design tokens create a shared language between design and code
• Extract colors, spacing, and font values from Figma — but use responsive CSS, not pixel-perfect coordinates
• Always ask about missing states (hover, error, empty, loading)
• Fill in responsive gaps between the breakpoints provided in the design
• Communicate early and often — assumptions lead to rework
• Solo developers: use a design system and limit your choices