Effective collaboration guide between designers and developers

The good news? You don’t need to know how to code. However, understanding how engineers build designs can help you work more effectively together. This article walks you through 10 strategies grouped into four key areas: collaborating on product, establishing a shared language, designing layouts that make sense, and nailing the design handoff.

Design is all about trade-offs, and as designers, we play a critical role in determining the “appetite” for a feature—how much effort we’re willing to invest for the expected impact. A key step is to collaborate with engineers early to assess how different approaches affect scope and feasibility.

For example, when designing a landing page builder, in-line editing significantly increased the project’s scope. By discussing with engineers, we shifted editing to a sidebar and cut the timeline in half. Early conversations like these are invaluable for making informed decisions.

One of the most valuable habits for a designer is sharing ideas “early and often.” Using the phrase “something like this” helps set expectations that your draft isn’t final and invites collaborative feedback. It’s not about presenting perfect work; it’s about starting a conversation that leads to better outcomes.

Designers should actively create spaces for engineers to provide input. For instance, dropping a sticky note on a design with a question like “What do you think about this approach?” can spark a back-and-forth that uncovers better solutions. Engineers can share technical considerations, helping the team align on the effort vs. impact scale more effectively.

Consistency between design and code is crucial. Engineers use variables like xxl (64px) instead of hardcoding values. As designers, we should align our Figma styles with these variables, creating a seamless translation between design and code. Thinking in “objects”—hierarchical groupings of variables—further aligns our work with how engineers organize their code.

When engineers inspect your designs in Figma, they should see variables like “Shadow/Small” rather than raw values. This approach minimizes redundant work and improves efficiency, ensuring that design and code are in sync.

Early in a project, establish shared building blocks—like buttons—used consistently by both design and engineering. Prioritize smaller, reusable components over complex systems to streamline workflows and minimize future rework.

Understanding the “box model” is vital for responsive design. Tools like Figma’s auto layout can help you design with frames instead of groups, ensuring your designs scale seamlessly across breakpoints. Collaborate with engineers to define breakpoints and communicate changes clearly at each level.

Well-organized files are more than clean visuals—they’re a blueprint for developers. Group designs by breakpoints, stack screen variations vertically, and create dedicated areas for notes and sticky annotations. This structure fosters a clear understanding of the design’s flow and intentions.

Design is an iterative process, and change is inevitable. Use tools like sticky notes, intro notes for design flows, and Loom videos to over-communicate your intentions and context. The more back-and-forth you have with developers, the better your final product will be.

Consider awkward situations like errors, empty states, or unusual device sizes. Design transitions thoughtfully and communicate max-widths explicitly to avoid ambiguity. This level of detail helps ensure a polished user experience in any scenario.

Effective collaboration between designers and engineers hinges on clear communication, mutual understanding, and a shared commitment to building the best possible product. By implementing these strategies, you can improve efficiency, reduce misunderstandings, and elevate the overall quality of your team’s output.

Remember, it’s not about figuring everything out alone—it’s about building together.