The Product-FED Jam: Bridging the Gap Between Design and Implementation

In the fast-paced world of product development, turning an idea into a polished, user-friendly product is no small feat. The process often starts with a meticulously crafted design in Figma, where everyone on the team is aligned and excited about the direction. But what happens when that design is handed off to the front-end developer (FED)? Even the most disciplined FED, committed to using components from an established design system, can encounter challenges—especially when the design system isn’t fully implemented.

The Gap in Design Systems

When a design system isn’t fully realized, gaps between the Figma design and the final product are almost inevitable. These gaps leave FEDs with two primary options:

1. Patch with Custom Logic: The FED can add custom code specific to the feature they’re working on, closing the gap quickly but potentially sacrificing consistency and maintainability.
2. Update the Atomic Components: The better, though more time-consuming, approach is to update the atomic components within the design system. However, this requires extensive communication with the product team and can delay the project.

The Dilemma of Speed vs. Integrity

In practice, many FEDs will opt for the quicker, custom solution to meet deadlines. It’s not a lack of commitment or skill; it’s simply the reality of tight timelines and the pressure to deliver. However, this approach can lead to inconsistencies in the final product and undermine the integrity of the design system.

Rather than fighting this natural tendency, I propose a solution that leverages it: The Product FED Jam.

Introducing the Product FED Jam

The Product FED Jam is a structured, collaborative session held weekly between the Tech Lead and the UX designer. The goal? To fine-tune the atomic components of the design system, ensuring they align perfectly with the Figma design.

Why the Jam Session Works:

• Real-Time Collaboration: Rather than back-and-forth messages on Slack, the Jam session allows for immediate feedback and discussion. It’s a more dynamic and efficient way to resolve issues.
• Hands-On Implementation with Storybook: Using tools like Storybook, the team can tweak the code directly and see the results in real-time. This speeds up the session and ensures that everyone is on the same page.
• Focus on Architecture: By addressing the gaps at the atomic level, the Tech Lead and UX designer can ensure that the design system evolves thoughtfully, maintaining consistency across the product.

Conclusion

The Product FED Jam isn’t just a meeting—it’s a mindset. It’s about recognizing the challenges FEDs face and providing a framework that supports both speed and integrity. By bringing together the Tech Lead and UX designer in a regular, hands-on session, we can bridge the gap between design and implementation, resulting in products that not only meet deadlines but also stay true to the original vision.