Behind the Tools: A Case Study on Bridging Design and Development at eBay

When I joined eBay, the design team was already doing excellent work. There was no shortage of talent or ambition. But something kept getting lost between design and development—an invisible handoff gap where intentions went blurry, and implementation drifted from the original vision. This friction was slowing things down, and more importantly, it was affecting the product experience.

My charter was clear: bridge that gap.

The first step was to define a new design process—one that could scale globally, encourage consistency, and improve alignment across disciplines. But I quickly realized something fundamental: process design is only the beginning. To make it real, to move it from principle to practice, we needed tools. Tools that could execute on the process, guide teams, and improve how people worked together in the everyday flow of their work.

This case study tells the story of those tools—and the people, problems, and partnerships that made them possible.

Tool 01: A Smarter Way to Localize Design

The first challenge I tackled was localization. Designers were relying on Google Translate to populate multilingual designs. It was fast, sure—but also inaccurate, inconsistent, and disconnected from eBay’s official localization pipeline. Translators had no context. Designers had no confidence. The workflow was brittle.

We built a custom Figma plugin that changed everything.

This tool could:

• Identify all text strings in a Figma file

• Automatically translate them using AI

• Send those strings—along with contextual screenshots—directly to our localization systems

• And return production-quality translations back into the design

This tool closed the loop between design and localization. It empowered designers to work with vetted, context-aware content, and gave translators the visibility they needed to do their job well. Instead of relying on guesswork, both teams could collaborate with clarity and speed.

Tool 02: Mentorship Meets Mission – The Birth of Include

Around the same time, I was mentoring Anna Zaremba, a designer with a deep passion for accessibility. She had a vision for an accessibility tool inside Figma, and I saw an opportunity to help her bring it to life.

Together, we partnered with eBay’s accessibility team and a design technologist to build what became “Include.”

The plugin was a lightweight but powerful assistant that:

• Surfaced accessibility issues as designers worked

• Provided real-time checks for contrast ratios, semantic issues, and alt text needs

• Aligned with eBay’s internal accessibility standards

Anna led the charge, and I supported her with structure, vision, and connections. We launched the tool internally, and its impact was immediate. The feedback was so positive that we decided to open-source it. Today, Include is used by over 30,000 people and has been featured at multiple accessibility conferences.

It’s a success story not just of a plugin—but of mentorship, ownership, and the power of backing people who are driven to make change.

Tool 03: A Checklist to Build Confidence – The Definition of Done

Even with better localization and accessibility support, there was still uncertainty at handoff: when is a design truly done?

To solve this, I created a Definition of Done plugin—a checklist embedded directly in Figma. It served as a shared reference between design and development. The checklist was divided into key sections:

• Design System compliance

• Accessibility checks

• Content and localization readiness

• Responsive and edge case considerations

Designers could tick off items as they completed each part of the workflow. Once the checklist was fully marked, everyone knew the design was ready. No more ambiguity. Developers loved it—it gave them confidence in what they were building, and reduced the back-and-forth that had previously bogged down implementation.

This plugin became an internal standard just before I left eBay. In my final presentation, the developer teams especially called it out as one of the most impactful changes in how we worked together.

Tool 04: Unlocking the Full Potential of Figma

While we were building these custom plugins, I also noticed a foundational gap: eBay didn’t have the Figma Enterprise license. Without it, designers were blocked from using powerful features like DevMode, which provided streamlined dev handoff, better design specs, and stronger team collaboration.

I led the effort to:

• Pitch Figma Enterprise internally

• Work directly with the Figma team to launch a pilot

• Design a custom onboarding program

• Roll out the full Enterprise license

• And train teams to adopt DevMode and other advanced capabilities

Although I left shortly after the rollout, we successfully laid the groundwork for a scalable, modernized design platform. This wasn’t just a licensing upgrade—it was a strategic investment in tool adoption, productivity, and cross-functional alignment.

Tool 05: Closing the Loop Between Figma and Code

As we worked to improve handoff, we discovered a critical flaw in our design system workflow: designers were using components from Figma libraries assuming they were ready—but in reality, the equivalent code wasn’t always available.

Sometimes components were built only for one platform (like Web or iOS), or not built at all. This led to confusion, wasted effort, and the risk of developers rebuilding components from scratch, undermining the entire design system.

To solve it, I brought together engineers from Web, iOS, and Android and led the creation of a new syncing tool. Using the Figma API and GitHub, we created a system that:

• Tracked which components had code implementations

• Mapped platform availability (Web, iOS, Android)

• Surfaced this info directly within the design documentation

The result? Designers could instantly see whether a component was implemented, and on which platforms. This gave teams the confidence to use system components and dramatically reduced duplication and drift between design and code.

Tool 06: Automating the Icon Production Pipeline

While that work was underway, eBay’s design system team was also launching a new documentation site called EVO. As part of that effort, I led the development of another tool to modernize and automate icon production.

This Figma plugin:

• Allowed designers to name icons consistently

• Automatically exported icons in multiple formats and sizes

• Pushed icons directly into platform code libraries

• Powered a visual browser for icon search, preview, and selection

This tool didn’t just improve icon consistency—it automated a traditionally tedious workflow and made the entire process transparent and developer-ready. We integrated it into the EVO documentation platform, where it continues to serve as a core resource for the design and engineering teams.

Reflections: Collaboration Over Silos

Looking back on this body of work, one theme stands out above all: collaboration.

From the start, I made it a point to bring everyone into the process. Designers, developers, program managers, business leads, engineers—we built tools with them, not just for them. This wasn’t about solving problems in isolation. It was about building shared language, shared workflows, and shared ownership of the product.

That’s what made the tools stick. That’s what gave them impact.

Each tool in this case study represents a moment where cross-functional alignment translated into real change. Whether it was tightening the loop between design and localization, empowering accessibility through mentorship, creating clarity with a checklist, aligning code with components, or automating the icon pipeline—every initiative pointed back to the same goal:

To bridge the gap between design and development—not just with process, but with execution.