Designer-Dev Collab
Course Index
28 Lessons · 3 Sections
Master designer-developer collaboration — the workflows, tools & shared language that bridge design and engineering. Covers Figma Dev Mode, design systems, handoff specs, token pipelines & agile workflows. Includes 4 production deliverables: handoff spec, component library, token pipeline & design-to-code workflow doc.
28Lessons
3Sections
4Projects
FreeAccess
Section 1The Collaboration FoundationLessons 1–10
Lesson 1
The Designer-Developer Gap: Why It Exists
Lesson 2
How Developers Think About Design
Lesson 3
How Designers Can Speak Dev Language
Lesson 4
Design Systems as the Shared Contract
Lesson 5
Organising Figma Files for Developers
Lesson 6
Layer Naming, Grouping & Auto Layout
Lesson 7
Figma Dev Mode: The Developer Interface
Lesson 8
Inspect Panel: Specs, Measurements & Assets
Lesson 9
Annotations & Interaction Notes
Lesson 10
Ready for Dev: Status & Handoff Workflow
Section 2Handoff, QA & Collaboration ToolsLessons 11–22
Lesson 11
Design Tokens as Handoff Currency
Lesson 12
Motion Specs: Communicating Animation to Devs
Lesson 13
Accessibility Annotations for Handoff
Lesson 14
Component Documentation: Usage & States
Lesson 15
Version Control: Branches & History in Figma
Lesson 16
Figma for VS Code: Design in the IDE
Lesson 17
Storybook: Design System in Code
Lesson 18
Design QA: Reviewing the Built Product
Lesson 19
Agile Design: Working in Sprints
Lesson 20
Communication Patterns: Feedback & Reviews
Lesson 21
AI-Assisted Handoff: Figma AI & MCP 2026
Lesson 22
Measuring Handoff Quality & Dev Satisfaction
Section 3Full Lifecycle, Culture & ProjectsLessons 23–28