mobilepro-198-design-meets-dev-turning-friction-into-flow-img-0

Latest Mobile Dev Insights: iOS, Android, Cross-Platform

Advertise with Us|Sign Up to the Newsletter

MobilePro #198: Design Meets Dev - Turning Friction into Flow

Hi ,

Welcome to the 198th edition of MobilePro!

Designers and developers: two teams chasing the same goal, yet often speaking completely different languages. What starts as a clean Figma file can turn into confusion once it hits the codebase: layouts break, intent gets lost, and frustration builds on both sides. It’s not only a communication problem but also a mindset gap.

However, it doesn’t have to be this way. With a few simple shifts in process and perspective, design–dev collaboration can move from friction to flow.

In this issue of MobilePro, we’re breaking down practical ways to bridge that gap, so teams can move faster and build better together. You’ll learn how to:

Align early by involving developers from day one
Create a shared vocabulary that eliminates translation errors
Use Figma’s Dev Mode to simplify handoffs
Build a feedback loop that keeps everyone in sync

This is an excerpt from the bookDesign Beyond Limits with Figmawritten by Šimon Jůn.

Before we jump in though, let's take a quick look at last week's highlights:

mobilepro-198-design-meets-dev-turning-friction-into-flow-img-1

Take the Survey!

Meet the Author

mobilepro-198-design-meets-dev-turning-friction-into-flow-img-2

Šimon Jůn is a design-led product leader and Chief Operating Officer at Dotidot, based in Prague, Czechia. Beginning his career as a product designer, he rose to the role of Chief Product Officer and now shapes company strategy as COO—giving him a unique perspective that spans hands-on design work and executive decision-making.
As the official Czech host of Friends ofFigma, Šimon organizes community events and talks that foster open knowledge sharing. Through his workshops and online training programs, he has helped hundreds of teams streamline theirFigmaworkflows and bridge the gap between designers and developers.

Bridging communication gaps between designers and developers

One of the most persistent challenges in product development is the interaction between designers and developers. While both disciplines work toward the same goal, that is, creating functional, user-friendly products, they often approach problems from entirely different perspectives, leading to friction and miscommunication.

What’s the problem?

Designers and developers are two essential forces in product development, but they often struggle to understand each other. As a designer, it’s important to remember that what you create in Figma isn’t the final product—the production code is. However, despite working toward the same goal, many teams face miscommunication that goes beyond just different terminologies and perspectives.

The challenges run much deeper than word choices. Designers and developers operate with fundamentally different mental models. Designers work with fluid, relational thinking, placing elements freely in space and considering visual hierarchy and flow—much like how Figma’s free-canvas approach works. Developers, on the other hand, operate within structured, hierarchical frameworks shaped by how code, databases, and systems are organized. They think in terms of top-to-bottom sequences, nested structures, and rigid organizational principles. This fundamental difference in spatial thinking creates natural tension when translating design to code.

Additionally, there’s often a knowledge gap around existing technical infrastructure. New designers, and even experienced ones joining a project, may lack the historical context of how current systems were built, what technical constraints exist, or what potential blockers might arise from legacy code. Understanding the production environment and existing technical architecture is crucial for creating designs that work within real-world constraints, not just in an ideal vacuum.

Here are some common terminology differences between Figma and code:

mobilepro-198-design-meets-dev-turning-friction-into-flow-img-3

Understanding these differences is crucial to ensuring a smoother workflow and more effective collaboration between designers and developers.

How to fix it

To bridge this gap, designersand developers mustactively work toward a common understanding:

Involve developers early: Bringing developers into the design process from the start ensures technical feasibility and helps avoid late-stage surprises. Make sure everyone understands the purpose behind design decisions through clear design annotation. I highly recommend walking through the entire design with developers, explicitly describing each screen and interaction rather than assuming anything is obvious. This serves two crucial purposes: developers can challenge your solutions and gain a deep understanding of user flows and interactions, while you, as a designer, can catch hidden flaws you might have missed during the design phase or that went unnoticed during design critiques.
Establish a shared vocabulary: Document and define key terms that designers and developers use differently. This makes communication clearer and reduces misunderstandings. Consider using tools such as Storybook or similar documentation platforms to create a shared reference point where both teams can see how design components translate to code, helping establish common terminology and understanding.
Use Figma’s Dev Mode: Leverage Figma’s developer handoff features to provide precise specifications and make it easier for developers to inspect design elements.
Encourage cross-team learning: Designers should develop a basic understanding of development constraints, while developers should familiarize themselves with design principles.
Create a feedback loop: Regularly review designs together to ensure alignment and address potential issues before they escalate. Remember that this loop goes both ways. Designers should also be involved in QA processes to verify that implementations match design intent, helping prevent details from getting lost in translation. Make sure everyone knows their roles and responsibilities, and establish clear points of contact so team members know who to reach out to when questions or ambiguities arise.

There are two primary ways to establish continuous feedback loops:

Scheduled weekly feedback sessions: This is the most common approach, where teams set up recurring calendar meetings for feedback. Designers present their progress, and other designers and developers discuss any necessary changes or improvements.
Daily asynchronous feedback: A more fluid approach, which I personally prefer, involves integrating feedback into the team’s everyday workflow. At Dotidot, designers and developers provide feedback asynchronously at the end of each day using Loom recordings. This fosters a culture where feedback is a natural and ongoing part of collaboration, rather than being confined to structured meetings.

Even if your team lacks hybrid designer developers, followingthese practices will save significant time, reduce confusion, and create a more seamless workflow between both disciplines.

If you want to explore more such tips and tricks, thenDesign Beyond Limits forFigmais for you.