Design Collaboration

Understand the four models of design-developer collaboration — waterfall, agile, embedded, and continuous — and the communication patterns, tooling, and shared vocabulary that make each work.

Build productive designer-developer relationships with clear communication channels, shared vocabulary, and collaboration workflows that reduce friction and rework.

Master Figma Dev Mode to extract accurate CSS values, understand spacing, read design tokens, and navigate a professional Figma file efficiently as a developer.

Run a systematic design QA process to verify that implemented components match Figma specifications — layout checks, typography validation, color token verification, and interactive state testing.

Master Figma Dev Mode for developer handoff — extract production-accurate CSS values, read design variables, inspect Auto Layout properties, download assets, and use annotations to understand design intent without asking the designer.

Implement a complete design token system that bridges Figma Variables and CSS custom properties — primitive and semantic token layers, dark mode support, token export pipelines, and CSS-in-JS integration.

Manage Figma design file history with named versions, branching, and structured change tracking — and build a git-adjacent workflow that keeps design changes synchronized with code branches.

Write complete component specifications that capture visual values, behavioral intent, accessibility requirements, and implementation notes — everything a developer needs to implement a component correctly without asking the designer.

Structure the design sprint workflow to deliver designs ahead of development, prevent the 'design bottleneck', coordinate handoff timing, and run efficient Design Sprint workshops for rapid concept validation.

Maintain design quality and velocity in agile teams using minimum viable design, progressive elaboration, continuous discovery, and lightweight design documentation practices.

Build a systematic design QA process that fits within sprint cycles — automated visual regression with Chromatic, structured designer review sessions, developer self-QA checklists, and a finding tracking workflow.

Run productive design critique sessions that generate actionable feedback — structured formats, implementation-aware critique from developers, feedback framing techniques, and asynchronous critique for distributed teams.

Use Zeplin as a developer handoff layer above Figma — enhanced measurement overlays, multi-platform code generation, component documentation, Storybook integration, and team annotation workflows beyond Figma's built-in Dev Mode.

Present design work effectively to non-technical stakeholders — structure design reviews, handle conflicting feedback, build consensus without design-by-committee, and frame technical constraints in business terms.

Build a Storybook component library that serves as living documentation for designers and developers — write stories for all component states, integrate Chromatic for visual regression testing, and publish Storybook as a shared team resource.

Build effective design-development workflows for distributed teams — asynchronous Figma review, Loom video handoff, time-zone-aware sprint planning, and documentation practices that keep remote teams aligned without synchronous meetings.

Apply Figma version history, branching, and change communication to team workflows — coordinate design version states with code branches, manage breaking changes, and maintain a design history that developers can reference during implementation.

Map the complete design-to-deployment pipeline with quality gates, handoff protocols, and feedback loops — from initial brief through design, implementation, QA, and production release.

Write and maintain design system documentation using Storybook MDX, Notion, and inline Figma annotations — covering component usage, design decisions, accessibility requirements, and implementation guides that stay accurate as the system evolves.

Navigate cross-functional team dynamics effectively — understanding each role's perspective and constraints, resolving design-engineering conflicts productively, building shared vocabulary, and preventing design from becoming the sprint bottleneck.

Measure the business impact of design decisions — establish KPIs for design work, connect UX improvements to revenue and retention metrics, present design ROI to stakeholders, and build a data-driven design practice.

Apply all design collaboration skills in a complete end-to-end project — from design brief through Figma handoff, developer implementation, QA, documentation, and impact measurement for a real feature.