Welcome back. Last week, I watched Papyrus 2 air on Saturday Night Live. And—humor aside—I realized it offers a great design learning: The importance of communicating design choices early and often to stakeholders. Throughout my 14-year design career, I’ve learned that early comms 1) nip questions in the bud so I can design faster and more intentionally and 2) communicate my value as a designer to the team at large. It takes practice—but keep at it.

​
​P.S. You have one more week to enter my Framer Portfolio contest for the chance to win a Macbook Air M3. Trust me: You don’t want to miss this opportunity.

—Tommy (@DesignerTom)

The Wireframe:

• What does the design handoff look like in 2024?
• What exactly are devs looking for at handoff?
• How to choose between Figma Dev Mode and Zeplin

How Is the Design Handoff Changing in 2024?

Is the design handoff…dead?

In 2024, we’re seeing a fracturing in what I like to call “shapes of work”—how design is structured and executed within an org. And as the shapes of work become more varied, so too does the “design handoff.”

Let me explain: Today, some designers code and developers design. Some designers embed on developer teams and developers embed on design teams. And some designers essentially throw their design over a wall—without ever even talking to the developer on the other side.

There is no singular shape of work…which means there is no singular process for design handoff. Instead, teams are adapting their processes: Focusing on stronger knowledge management practices and better communication earlier and more often.

Knowledge management is the new design handoff—and great design teams are constantly improving it. Here’s how. →

How to improve your team’s knowledge management

All-in-one or no-code tools like Replit and Builder that centralize the entire design and dev process have skyrocketed in popularity.

But make no mistake: There is no one-size-fits-all solution for knowledge management. Instead, different teams will require different processes. Here are three examples:

1. The hot potato process

My friend and design systems expert Dan Mall worked with Atomic Design author Brad Frost to create the “hot potato process” which goes like this: Ideas are shared between designers and developers throughout a product creation cycle.

The hot potato process breaks down silos, catches problems as they come up, and empowers designers to “look over the fence.”

A few ways to implement it:

• Sit together in real-time: Carving out time to work together (IRL or virtually) can reveal a lot about each other’s workflows from the start.
• Bridge time zone gaps: Record sessions for every update with a tool like Loom for distributed teams to work async.

2. Manual documentation

Doing client work as a solo designer? Hot potato probably isn’t for you. Instead, sharpen your design documentation.

• Add bulleted lists next to your Figma artboards, or use Handoff Helpers to simplify your annotations.
• Try a plugin like EightShapes Specs to quickly add component and page specs to audit in-progress work.

3. Automated documentation

For some teams, speed is key—and that’s where automation comes in. Tooling like Figma’s Dev Mode and Zeplin simplify knowledge sharing and create a single source of truth for all project files.

• Figma’s Dev Mode is known for its excellent visual studio code extension and workflow customization capabilities—perfect for those who already design in Figma.

• ​Zeplin can help with cleaner version control with their Git-like versioning, robust file organization, and global search function.

Remember: It’s not about fitting your team into a tool, but finding a tool that supports your team’s needs.

Ensuring design quality

It’s one thing to nail your knowledge management process. It’s another to achieve the highest quality implementation.

This topic came up recently in my Slack community. Some tips from the conversation:

1. Designers: Get comfortable with browser inspector tools and Storyboard for components.
2. Implement a UX QA step in JIRA. Have designers participate in parallel.
3. Hold office hours to bridge understanding between roles.

The biggest takeaway? Create an environment of collaboration where designers and devs share the same design quality mentality.

​

The bottom line: While all-in-one tools empower designers and devs to work better together, as long as these “shapes of work” are evolving, there will still be a need for a variety of streamlined processes, workflows, and documentation.

TOGETHER WITH ZEPLIN​

​It’s Time to Unite Your Entire Product Team​

When was the last time your developers missed the latest changes to your design file? Or when you had to scramble to get approval from your stakeholders? Or when someone just didn't understand your design user journey?

Bringing your product from design to development doesn't have to be a struggle and that’s where Zeplin comes in. Zeplin gives your devs specs, code snippets and workflow tools to implement your design vision seamlessly including:

1. Design version control and diff checks, so your team knows exactly what's changed without all the intermediate steps
2. Approval requests and built-in information hierarchy, so you can get buy-in and alignment without jumping through hoops
3. Documentation, so user journeys, style guides, product requirements are consolidated in one place

Ready to use the platform leading teams like Amazon, Salesforce, and Cloudera use to deliver their products?

​Sign up for free now​

News, Tools, and Resources: Improving Design Handoff

• ​Here’s how to rewire your tools to work for you.
• ​EightShapes Specs makes it easy to add specs to your Figma files automatically.
• Want more tips on how to prep your design files for feedback or handoff? Femke’s got you covered.
• ​This article outlines what devs are looking to see during handoff.
• Ship the best prototypes your devs have ever seen with these 23 resources.

Got a great tool, podcast episode, idea, or something else? Hit reply and tell me what’s up.

Today for the Tool Junkies: Figma Dev Mode vs. Zeplin

So you’re sold on automating your knowledge management…but you don’t know where to start. Let’s double-click into the two tools we featured today and when to use them.

Use Figma Dev Mode if…

• Your team is dedicated to Figma and prefers not to add another tool to the stack.
• You value having handoff features integrated directly within your design tool.
• You need more flexibility to adapt the handoff process to your team's unique shape of work.
• Your developers use Visual Studio Code, taking advantage of Figma's excellent VS Code extension for inspecting designs.

Use Zeplin if…

• You have a larger, more mature team with well-established processes.
• You need a more structured handoff process with clear versioning and approval steps before handoff.
• You need better file organization with folders, tags, and global search for navigating projects.
• You want to centralize your design systems—with code-connected style guides and component variants.

TL;DR: Figma Dev Mode prioritizes integration and flexibility within your existing design tool workflows, while Zeplin provides a more robust and structured handoff process in a dedicated environment.

​
​Want more info on each tool? Check out UX Tools’ in-depth video.

The UX Tools Job Board

• Design legend Soren Iverson is looking for his first designer at Iterate.
• New to the design world? Join Asana's 6-month Product Design apprenticeship program.
• Join the team at Givebutter as a growth-focused Product Designer.
• Looking for your next UXR gig? Stripe is hiring a UX Researcher on its Checkout Experience team.

Hiring for a design role, or know someone who is? Submit it here to hit the inboxes of 75k+ talented designers.

Thanks for reading! How does your team empower designers and devs for better collaboration? Hit reply and let me know.

See you next week!

Enjoying this newsletter? Let us know here.