CheatSheet:Developer Handoff

1. Developer Handoff Fundamentals

1.1 Definition and Purpose

1.2 Key Objectives

• Ensure accurate translation of design into functional code
• Minimize back-and-forth communication and questions
• Reduce development time and implementation errors
• Maintain design consistency across platforms
• Facilitate collaboration between design and development teams

2. Preparation and Documentation

2.1 Pre-Handoff Checklist

• Ensure all design screens are finalized and approved
• Verify all interactive states are designed (default, hover, active, disabled, error)
• Check responsive breakpoints are defined (mobile, tablet, desktop)
• Confirm all edge cases and error states are addressed
• Validate all assets are exported in required formats and resolutions
• Review design system components are documented

2.2 Essential Documentation

2.3 Design Annotations

• Add spacing measurements between elements (margins and padding)
• Specify exact dimensions for containers and components
• Label interactive elements with behavior descriptions
• Note z-index layering and stacking order
• Include accessibility requirements (ARIA labels, keyboard navigation)
• Document conditional visibility rules

3. Figma Handoff Tools and Features

3.1 Inspect Panel

3.2 Dev Mode

• Developer-specific view with streamlined inspect experience
• Quick access to CSS, iOS, and Android code
• Plugin integration for advanced code generation
• Section and component organization for easier navigation
• Mark designs as "Ready for Dev" status
• Compare versions to track design changes

3.3 Export Settings

4. Design Specifications

4.1 Layout and Spacing

4.2 Typography System

• Font families with fallback stacks (primary, secondary, monospace)
• Font weights used (300, 400, 500, 600, 700) with corresponding names
• Type scale with pixel and rem values (h1: 32px/2rem, h2: 24px/1.5rem, etc.)
• Line height ratios (1.2 for headings, 1.5 for body text)
• Letter spacing values in pixels or em units
• Text alignment and decoration rules
• Responsive typography adjustments per breakpoint

4.3 Color System

4.4 Effects and Shadows

• Box shadow values: x-offset, y-offset, blur radius, spread radius, color with opacity
• Elevation levels (0-5) with corresponding shadow specifications
• Border radius values for different component types
• Blur effects with pixel values
• Opacity levels for overlays and disabled states
• Gradient specifications: type (linear/radial), angle, color stops with positions

5. Component Specifications

5.1 Component Variants

• Document all size variants (small, medium, large, extra-large)
• Specify all state variations (default, hover, focus, active, disabled, error, loading)
• Define color/theme variants (primary, secondary, tertiary, outlined, text-only)
• Note icon positions and spacing (left, right, icon-only)
• Provide width behaviors (fixed, fluid, auto)

5.2 Interactive States

5.3 Animation and Transitions

• Transition properties (all, opacity, transform, color)
• Duration values (100ms, 200ms, 300ms, 500ms)
• Easing functions (ease, ease-in, ease-out, ease-in-out, cubic-bezier values)
• Delay values for sequential animations
• Keyframe specifications for complex animations
• Hover transition timing (200ms-300ms recommended)

6. Asset Preparation and Export

6.1 Image Optimization

6.2 Naming Conventions

• Use lowercase with hyphens or underscores (icon-search, btn_primary)
• Include size suffix for multiple resolutions (logo@2x.png, logo@3x.png)
• Add state indicators (button-primary-hover, input-error)
• Prefix by category (ic_ for icons, img_ for images, bg_ for backgrounds)
• Keep names descriptive but concise (avoid spaces and special characters)
• Use consistent structure across all assets (category-name-variant-state)

6.3 File Organization

• Group assets by type (icons/, images/, backgrounds/)
• Organize by feature or screen (home/, profile/, checkout/)
• Separate by platform when needed (web/, ios/, android/)
• Include resolution folders for mobile (@2x/, @3x/ or hdpi/, xhdpi/)
• Maintain consistent folder structure matching design file organization

7. Handoff Tools and Plugins

7.1 Figma Native Features

• Inspect Mode: Right panel shows CSS, iOS, Android code
• Dev Mode: Dedicated developer view with enhanced code export
• Prototype Mode: Share interactive prototypes with flow arrows
• Comments: Pin feedback and questions directly on designs
• Version History: Track changes and compare versions
• Sharing Links: Generate view-only or edit links with password protection

7.2 Handoff Plugins

7.3 Code Generation Tools

• Figma to Code: Converts Figma frames to HTML, React, Vue, Flutter
• Locofy: AI-powered design to code (React, Next.js, Gatsby)
• Quest: Figma to React with component generation
• Builder.io: Visual development platform with Figma integration
• DhiWise: Multi-platform code generation (web and mobile)

8. Communication and Collaboration

8.1 Handoff Meeting Agenda

• Walkthrough of user flows and key interactions
• Review of design system and component library
• Discussion of technical constraints and feasibility
• Clarification of responsive behavior and breakpoints
• Review of accessibility requirements (WCAG 2.1 AA compliance)
• Asset delivery method and timeline confirmation
• Q&A session for developer questions

8.2 Design Specifications Document

8.3 Feedback and Iteration Process

• Use Figma comments for design-specific feedback
• Tag team members (@mention) for urgent clarifications
• Create separate frames for alternative solutions
• Document decisions in comment threads
• Update designs based on technical constraints
• Version designs clearly (v1.0, v1.1, v2.0)
• Schedule regular sync meetings during implementation

9. Responsive Design Handoff

9.1 Breakpoint Specifications

9.2 Responsive Behavior Documentation

• Specify layout changes at each breakpoint (stacked, side-by-side, grid columns)
• Define image scaling behavior (cover, contain, responsive sizes)
• Document navigation transformations (desktop menu to mobile hamburger)
• Note font size adjustments per breakpoint
• Specify spacing changes (larger padding on desktop, compact on mobile)
• Define content visibility rules (hide/show elements at breakpoints)
• Provide grid column changes (12-column to 4-column to 1-column)

9.3 Mobile-Specific Considerations

• Touch target minimum size: 44x44px (iOS), 48x48px (Android)
• Safe area insets for notched devices
• Bottom navigation thumb-zone accessibility
• Swipe gesture specifications and conflict prevention
• Orientation lock or landscape adaptations
• Keyboard appearance impact on layout

10. Accessibility Specifications

10.1 Color Contrast Requirements

10.2 Keyboard Navigation

• Tab order sequence for all interactive elements
• Focus indicator visibility (2px outline minimum, high contrast color)
• Skip navigation links for main content areas
• Escape key to close modals and overlays
• Arrow keys for menu and carousel navigation
• Enter/Space key activation for buttons and links

10.3 Screen Reader Support

• ARIA labels for icons without visible text
• Alt text descriptions for informative images
• ARIA roles for custom components (button, navigation, dialog)
• ARIA live regions for dynamic content updates
• Heading hierarchy (h1, h2, h3) for document structure
• Form label associations and error announcements
• Skip decorative images with empty alt attributes

10.4 Additional Accessibility Notes

• Provide text alternatives for audio and video content
• Ensure sufficient time for time-limited interactions
• Avoid content that flashes more than 3 times per second
• Support text resize up to 200% without loss of functionality
• Maintain consistent navigation across pages
• Provide clear error identification and recovery instructions

11. Platform-Specific Guidelines

11.1 iOS Design Handoff

• Use SF Pro font family (system default)
• Status bar height: 44px (standard), 47px (iPhone X and later)
• Navigation bar height: 44px
• Tab bar height: 49px (standard), 83px (iPhone X with safe area)
• Safe area insets for devices with notch/Dynamic Island
• Use @1x, @2x, @3x asset multipliers
• Follow Human Interface Guidelines for component styling
• Specify haptic feedback for interactions

11.2 Android Design Handoff

• Use Roboto font family (system default)
• Status bar height: 24dp
• App bar height: 56dp (mobile), 64dp (tablet/desktop)
• Bottom navigation height: 56dp
• Use density-independent pixels (dp) for dimensions
• Provide assets in mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi
• Follow Material Design 3 guidelines
• Specify elevation levels (0dp-24dp) for shadows

11.3 Web Design Handoff

• Use web-safe fonts with fallback stacks
• Specify dimensions in rem, em, px, %, or vw/vh
• Define flexible/fluid vs. fixed widths
• Provide hover states for desktop interactions
• Include print stylesheet considerations if needed
• Specify browser support requirements (Chrome, Firefox, Safari, Edge versions)
• Note CSS Grid or Flexbox layout approach

12. Quality Assurance and Testing

12.1 Design QA Checklist

• Verify all screens match approved designs pixel-perfectly
• Test all interactive states (hover, focus, active, disabled)
• Validate responsive behavior at all defined breakpoints
• Check color accuracy using color picker tools
• Measure spacing and alignment with pixel precision
• Test animations and transitions for correct timing
• Verify font rendering (size, weight, line height)
• Confirm image quality and resolution on retina displays

12.2 Cross-Browser/Device Testing

12.3 Accessibility Testing

• Run automated tools (WAVE, Axe DevTools, Lighthouse)
• Test keyboard navigation without mouse
• Verify screen reader compatibility (VoiceOver, NVDA, JAWS)
• Check color contrast ratios using tools
• Test with browser zoom at 200%
• Validate ARIA attributes and semantic HTML

13. Common Handoff Issues and Solutions

13.1 Frequent Problems

13.2 Prevention Strategies

• Establish handoff process and checklist before project starts
• Include developers in design reviews early
• Create and maintain comprehensive design system
• Use shared terminology between design and development
• Automate asset exports and version control
• Schedule dedicated handoff sessions, not just file sharing
• Document decisions and rationale in design files

14. Best Practices

14.1 Design File Organization

• Use clear, consistent page naming (1. Cover, 2. Design System, 3. Screens, 4. Components)
• Group related screens on same page or in sections
• Create master components page for all reusable elements
• Maintain separate page for typography and color documentation
• Keep archive page for old versions and explorations
• Use frames for all artboards (not just groups)
• Name all layers descriptively (avoid "Rectangle 1", "Group 42")

14.2 Component Best Practices

• Create components with auto-layout for flexible sizing
• Use variants to consolidate related component states
• Apply constraints properly for responsive behavior
• Detach instances only when absolutely necessary
• Document component usage in descriptions
• Keep component hierarchy shallow (avoid nested complexity)
• Use boolean properties for show/hide element variations

14.3 Collaboration Best Practices

• Share links with appropriate permissions (view-only for stakeholders, edit for designers)
• Use Figma comments instead of external communication for design feedback
• Resolve comments after addressing issues
• Tag team members for urgent questions or blocking issues
• Schedule regular check-ins during implementation phase
• Keep a shared changelog of design updates
• Provide implementation deadlines and prioritization

14.4 Documentation Best Practices

• Write specifications from developer perspective (what they need to build)
• Use precise, technical language without jargon
• Include visual examples alongside written specs
• Keep documentation up-to-date as designs evolve
• Separate "what" (design intent) from "how" (implementation suggestion)
• Provide context and user goals, not just visual specs
• Link to related documentation (design system, brand guidelines)