majiayu000 Design Handoff
Overview
Design handoff bridges design and development, ensuring developers have all information needed to implement designs accurately and efficiently.
When to Use
- Before development starts
- Feature completion in design
- Component library updates
- Design system changes
- Iterative refinement handoff
Instructions
1. Design Documentation
Design Handoff Package:
Overview:
- Feature description
- User flows
- Key interactions
- Platform (web, iOS, Android)
Screens & Components:
- All screen designs
- Responsive variants (mobile, tablet, desktop)
- All component states (default, hover, focus, disabled, error)
- Dark mode variants (if applicable)
Specifications:
- Typography (font, size, weight, line-height)
- Spacing & layout (padding, margin, gaps)
- Colors (hex values, opacity)
- Shadows & elevations
- Border radius
- Animations & transitions
Interactions:
- Click/tap behaviors
- Hover states
- Focus indicators
- Loading states
- Error states
- Success states
Assets:
- SVG/PNG icons (with color variants)
- Illustrations
- Background images
- Logo files
- All assets exported with specs
Accessibility:
- ARIA attributes
- Keyboard navigation
- Color contrast ratios
- Focus indicators
- Alt text for images
Responsive Breakpoints:
- Mobile (320px - 480px)
- Tablet (768px - 1024px)
- Desktop (1200px+)
- Layout changes per breakpoint
---
## Design Specifications:
Typography Spec Example:
Element: Primary Heading (h1)
Font Family: Inter
Font Size: 48px (desktop), 32px (tablet), 24px (mobile)
Font Weight: 700 (bold)
Line Height: 1.2 (57.6px)
Letter Spacing: -0.02em
Color: #1F2937
Color Spec Example:
Primary Brand: #2196F3
Contrast: 4.5:1 on white background
RGB: rgb(33, 150, 243)
Usage: Primary actions, links, focus indicators
Spacing Example:
Container Padding: 32px (desktop), 24px (tablet), 16px (mobile)
Section Gap: 48px (desktop), 32px (tablet), 24px (mobile)
Component Spacing: 16px (default), 8px (compact), 24px (generous)
2. Developer-Friendly Documentation
# Create developer-ready handoff docs
class DesignHandoff:
def create_spec_document(self, design):
"""Generate comprehensive spec"""
return {
'title': design.name,
'version': '1.0',
'last_updated': 'January 15, 2025',
'design_owner': 'Sarah Chen',
'development_owner': 'John Smith',
'status': 'Ready for development',
'overview': {
'description': 'What this feature does',
'user_goal': 'What users accomplish',
'success_criteria': 'How we measure success'
},
'components': [
{
'name': 'Primary Button',
'states': ['default', 'hover', 'active', 'disabled', 'loading'],
'specs': {
'padding': '12px 24px',
'border_radius': '8px',
'font_size': '16px',
'font_weight': '600',
'min_height': '44px'
},
'colors': {
'default': '#2196F3',
'hover': '#1976D2',
'disabled': '#CCCCCC'
},
'figma_link': 'https://figma.com/...'
}
],
'interactions': [
{
'trigger': 'Click primary button',
'action': 'Submit form',
'feedback': 'Button shows loading spinner',
'success': 'Navigate to success page',
'error': 'Show error message'
}
]
}
def create_component_inventory(self, design):
"""List all components and variants"""
return {
'ui_components': {
'buttons': ['Primary', 'Secondary', 'Outline', 'Text'],
'inputs': ['Text', 'Email', 'Password', 'Search'],
'selects': ['Dropdown', 'Autocomplete', 'Radio', 'Checkbox'],
'feedback': ['Toast', 'Modal', 'Alert', 'Progress'],
'navigation': ['Breadcrumb', 'Tabs', 'Drawer', 'Pagination']
},
'total_components': 50,
'total_variants': 250
}
def export_assets(self, design):
"""Prepare optimized assets"""
return {
'exports': [
{'name': 'icons-16.svg', 'size': '16x16px', 'format': 'SVG'},
{'name': 'icons-24.svg', 'size': '24x24px', 'format': 'SVG'},
{'name': 'icons-32.svg', 'size': '32x32px', 'format': 'SVG'},
{'name': 'logo.svg', 'format': 'SVG', 'colors': ['primary', 'white', 'dark']},
{'name': 'placeholder-image.png', 'size': '1200x800px', 'format': 'PNG'}
],
'optimization': 'All assets compressed, SVGs minified',
'storage': 'Cloud drive link shared with dev team'
}
3. Handoff Checklist
Design Handoff Checklist:
Before Handoff:
[ ] All screens complete and reviewed
[ ] All component states documented
[ ] Responsive variants specified
[ ] Dark mode variants created (if applicable)
[ ] Accessibility review completed
[ ] Animations documented with timings
[ ] All interactions specified
[ ] Spec document written
[ ] Assets exported and optimized
[ ] Design approved by product manager
[ ] Design approved by tech lead
Documentation:
[ ] Overview document written
[ ] Component specs documented
[ ] Responsive breakpoints specified
[ ] Interaction flows documented
[ ] Copy and labels finalized
[ ] Error states documented
[ ] Loading states documented
[ ] Empty states documented
[ ] Accessibility requirements listed
[ ] Performance constraints noted
Assets:
[ ] Icons exported (all sizes)
[ ] Illustrations included
[ ] Images optimized
[ ] Color palette defined
[ ] Typography specifications clear
[ ] Spacing/grid defined
[ ] Shadow definitions provided
[ ] All assets organized
Testing:
[ ] Designs reviewed on mobile device
[ ] Interaction flows validated
[ ] Contrast ratios verified
[ ] Focus states visible
[ ] Keyboard navigation planned
Handoff Meeting:
[ ] Design rationale explained
[ ] Technical constraints discussed
[ ] Timeline and scope agreed
[ ] Questions answered
[ ] Next steps clarified
[ ] Designer available for questions
4. Design-Dev Collaboration
Best Practices for Handoff:
Communication:
- Schedule kickoff meeting before starting dev
- Designer available for questions (at least 4 hours/week)
- Use shared design tool (Figma) as source of truth
- Use design comments for clarifications
- Regular sync meetings (weekly recommended)
Documentation:
- Write specs for non-obvious designs
- Include rationale for design decisions
- Document edge cases
- Link to design patterns
- Reference design system
Flexibility:
- Allow developer improvements for technical feasibility
- Be open to implementation alternatives
- Test implementations and iterate
- Adjust for browser/device constraints
- Accommodate performance needs
Process:
1. Design complete → Share in Figma
2. Dev reviews specs, asks questions
3. Kickoff meeting to align
4. Dev implements with designer review
5. First implementation review
6. Design polish phase
7. Final sign-off
---
Common Handoff Issues & Solutions:
Issue: Missing responsive designs
Solution: Include tablet & mobile variants in handoff
Issue: Unclear interactions
Solution: Record prototype videos or create Figma flows
Issue: Vague color specifications
Solution: Export color palette with hex, RGB, and CSS variables
Issue: Missing edge cases
Solution: Document error, loading, and empty states
Issue: Disconnect during development
Solution: Plan regular sync meetings and code reviews
Best Practices
✅ DO
- Create comprehensive documentation
- Export all assets and specifications
- Document every component state
- Include responsive variants
- Explain design decisions
- Provide developer-friendly specs
- Use shared design tools
- Schedule kickoff meeting
- Make yourself available for questions
- Review implementations and iterate
❌ DON'T
- Expect developers to guess
- Leave responsive design to chance
- Skip edge case documentation
- Use unclear specifications
- Disappear after handoff
- Change designs mid-development without notification
- Provide images instead of vector files
- Ignore technical constraints
- Miss performance considerations
- Skip accessibility in handoff
Design Handoff Tips
- Use Figma for design-to-dev (auto-sizing, specs)
- Create component library in code alongside design
- Document design tokens (colors, typography, spacing)
- Record Figma walkthroughs for complex interactions
- Maintain design system as source of truth