> Markdown version of [/videos/992-bridging-the-gap-between-design-and-development?t=733](https://www.wearedevelopers.com/videos/992-bridging-the-gap-between-design-and-development?t=733). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Bridging the gap between design and development

Treat mockups as open questions, not immutable handoffs. Discover how integrated tooling and shared vocabulary dissolve designer-developer tension to accelerate digital product delivery.

- **Speakers:** [Jade Jiang](https://www.wearedevelopers.com/@jade-jiang), [Noga Mann](https://www.wearedevelopers.com/@noga-mann)
- **Event:** World Congress 2024
- **Published:** August 20, 2024
- **Duration:** 29:53
- **URL:** https://www.wearedevelopers.com/videos/992-bridging-the-gap-between-design-and-development

## Summary

Bridging the gap between design and development requires shifting the cross-functional mindset from "what's my job" to "what's our job." When teams operate in silos, constraints like technical effort and project budgets go undiscussed until friction derails product timelines. To dissolve this tension, teams must focus on three core pillars: relationship building, shared languages, and integrated tooling. First, establishing mutual respect and empathy relies on collaborative rituals such as joint user research sessions, cross-functional weekly show-and-tells, and active design-developer pair programming. By working together to weigh trade-offs—often through a good, better, best framework—teams eliminate craft-versus-craft defensiveness and prioritize user outcomes. Second, co-creating a design system grounds both disciplines in a predictable vocabulary. Patterns, component parities, and aligned naming conventions replace intimidating technical jargon with actionable clarity. Rather than viewing high-fidelity mockups as immutable handoffs, teams should treat whiteboarding, UI sketches, and code prototypes as open questions to test technical feasibility and visual intent. Finally, optimizing design-to-development tooling ensures this shared context is never lost. Leveraging standardized file templates, bidirectional jira and figma integrations, and features like figma dev mode and code connect establishes a single source of truth. By bringing design system documentation directly into the inspection environment and surfacing precise code snippets, teams eliminate pixel-chasing and accelerate the delivery of cohesive digital products.

**Keywords:** cross-functional team alignment, design-to-development handoff, figma dev mode features, code connect integration, UI prototyping in code, cross-role pair programming, shared component libraries, software delivery trade-offs, bidirectional jira syncing, visual technical feasibility testing, scalable product design workflows, component naming conventions, user research synthesis, design system parity, front-end UI debugging

## Chapters

1. **Understanding the tension between designers and developers** (00:02) — A cake metaphor illustrates how lacking communication leads to misaligned outcomes and cross-functional tension.
1. **The business cost of poor cross-functional collaboration** (03:13) — Poor collaboration hurts team morale and business growth, emphasizing the need for a shared team mindset.
1. **Building collaborative relationships across functional team boundaries** (05:31) — Cross-functional pairing, sharing work in progress, and discussing trade-offs build empathy and mutual respect.
1. **Creating a shared language through design systems** (12:13) — Co-creating a design system establishes common ground and shared patterns for both technical disciplines.
1. **Using visuals and prototypes to align teams** (17:01) — Whiteboarding, design prototypes, and code prototypes clarify ideas and test technical feasibility early in the process.
1. **Optimizing workflows with collaborative tooling and integrations** (21:00) — File templates and tool integrations create a predictable single source of truth for cross-functional teams.
1. **Bridging the deployment gap with Figma Dev Mode** (24:57) — Developer-focused design features help engineers uniquely track interface changes and efficiently inspect code snippets.
1. **Summarizing the path to better cross-functional collaboration** (26:46) — Investing in solid relationships, shared structural languages, and unified tooling seamlessly delivers higher-quality products to market faster.

## Related Moments

- [Addressing collaboration challenges in design to code workflows](https://www.wearedevelopers.com/videos/1169-nocode-livecode-leveraging-ai-tools-to-craft-fully-functional-apps) (from "NoCode LiveCode: Leveraging AI Tools to Craft Fully Functional Apps!")
- [Organizing cross-functional and balanced product teams](https://www.wearedevelopers.com/videos/398-building-the-right-product-and-building-it-right-a-glimpse-into-extreme-programming-atomic-design) (from "Building the Right Product and Building It Right: A Glimpse into Extreme Programming, Atomic Design ")
- [Bridging the gap between software development and design](https://www.wearedevelopers.com/videos/577-learn-enough-design-to-be-dangerous) (from "Learn Enough Design to Be Dangerous")
- [Prioritizing developer tools and cross-functional team collaboration](https://www.wearedevelopers.com/videos/1447-designing-the-future-of-human-agent-collaboration) (from "Designing the Future of Human<>Agent Collaboration")
- [Strategic practices for integrating UX into agile developer workflows](https://www.wearedevelopers.com/videos/1467-ux-in-the-dev-cycle-moving-from-handoff-to-handshake) (from "UX in the Dev Cycle: Moving from Handoff to Handshake")
- [Blending design and development into a single workflow](https://www.wearedevelopers.com/videos/194-breaking-down-silos-between-design-and-development) (from "Breaking Down Silos Between Design and Development ")

## Related Articles

- [Are design and development really just the same thing?](https://www.wearedevelopers.com/magazine/520-are-design-and-development-really-just-the-same-thing)
- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)
- [Why developer experience matters](https://www.wearedevelopers.com/magazine/514-why-developer-experience-matters)
- [The Most Important Concept Every Developer Should Know](https://www.wearedevelopers.com/magazine/344-the-most-important-concept-every-developer-should-know)

## Related Jobs

- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Tribe Lead - ( Software) Engineering Centre of Excllence](https://www.wearedevelopers.com/jobs/ext/1475530-tribe-lead-software-engineering-centre-of-excllence) at **SD Worx**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Engineering Manager (Fusion Experience)](https://www.wearedevelopers.com/jobs/ext/1669281-engineering-manager-fusion-experience) at **Bitpanda**