M07-07 · AI + Creative Production & Design

Design-to-Development Handoff and Production

Covers the critical workflow of preparing design files for developer consumption and managing the creative revision process with clients and stakeholders. Students learn Figma dev mode and inspect capabilities, responsive design annotations, interaction and state documentation, asset export specifications (SVG, PNG at 1x and 2x), writing handoff notes, and understanding front-end constraints (CSS, web components, design tokens). Also covers client-facing creative revision management — tracking versions, managing feedback rounds, handling vague feedback, and enforcing scope.

25 Hours

8 Learning objectives

Evaluate Bloom's ceiling (?)

5 Competencies

What You'll Be Able To Do

Learning Objectives

Objectives

Depth

Prepare Figma files for developer handoff with properly structured components (no one-off overrides), responsive annotations, interaction specifications, and exportable assets at correct formats and resolutions Apply
Create design handoff documentation including "what's not obvious from the designs" notes, component property descriptions, and responsive behavior annotations for each breakpoint Create
Analyze front-end CSS output and design token files to verify developer implementations match design specifications for color, spacing, typography, and component structure Analyze
Apply structured version control for creative files — named Figma versions, page-based version organization, change logs, and clean "Final" folder conventions Apply
Evaluate client feedback to distinguish between actionable revision requests, scope expansion ("can we also..."), and vague direction ("it's not quite right"), responding with appropriate strategies for each Evaluate
Create exported asset packages organized by type (logos in AI/EPS/SVG/PNG, icons as SVG, images at 1x/2x, fonts with license info) following professional file handoff structure Create
Apply revision tracking workflows using shared review tools (Figma commenting, Frame.io for video) with documented change logs across version rounds Apply
Analyze how design decisions translate to CSS properties (flexbox, grid, custom properties), design token formats (JSON/YAML), and component-based web architecture, verifying developer implementations for fidelity to design specs Analyze

Levels: Remember · Understand · Apply · Analyze · Evaluate · Create — highest demands most original thinking.

Core Competencies

What You'll Master

Developer Handoff Preparation

Structuring Figma files for dev mode consumption, annotating responsive behavior, documenting interaction states, specifying asset export requirements, writing handoff notes for non-obvious design decisions.

Asset Export & File Organization

Exporting assets at correct formats and resolutions for all output contexts (web, mobile, print), organizing deliverable packages with clear naming and structure.

Front-End Comprehension

Reading CSS, design tokens, and web component markup to verify implementation fidelity; understanding front-end constraints that affect design feasibility.

Creative Revision Management

Tracking versions with clear naming and change logs, managing client feedback rounds within contracted scope, handling vague feedback with clarifying strategies, enforcing revision limits professionally.

Cross-File Production Workflow

Moving work between Figma, Illustrator, Photoshop, and InDesign; packaging InDesign files; maintaining linked assets and font integrity across production handoffs.

Portfolio Artifact

What You'll Build

Design-to-Dev Handoff Package — Student prepares a complete developer handoff for a 5-page product interface: Figma file with components (no overrides), dev mode annotations, responsive breakpoint specs, interaction state documentation, exported design token file (JSON), asset export package (SVG icons, PNG images at 1x/2x), and a 2-page handoff notes document. Also includes a simulated client revision exercise: 3 rounds of feedback with version tracking, change logs, and a scope management email responding to a client's out-of-scope request.

Tools You'll Use

Industry Tools, Not Toy Projects

Figma

Dev mode, inspect, prototyping, and commenting for developer handoff and design review workflows.

Adobe InDesign

File packaging for print production handoff with linked assets, fonts, and preflight reports.

Frame.io

Video review and approval platform for managing client feedback on motion and video deliverables.

VS Code

Reading CSS output and design token files (read-only) to verify developer implementation fidelity.

Loom

Screen recording for design walkthroughs and explaining non-obvious design decisions to developers and clients.