Dev Mode - No More Handoffs. Just Collaboration

Servier is an independent international pharmaceutical group, operating in more than 150 countries and committed for over 60 years to advancing research and therapeutic innovation.

Beyond its scientific mission, the group has been undergoing an ambitious digital transformation, requiring a complete rethink of its tools, processes, and ways of working.

Within this shift, the Design teams play a central role using UX and product design to support change across the organization. Their ambition: accelerate growth, fuel therapeutic innovation, and help teams adopt new digital practices, including AI and sustainable solutions, while guiding employees through this major transition.

NEXTON has been working with Servier for several years, particularly on UX/UI initiatives, the structuring of its Design System, and the optimization of digital workflows. Both teams share the same vision: enabling designers, developers, and Product Owners to collaborate efficiently through modern tools and clear governance with Figma at the center.

As digital projects grew, the need for a more structured design–development workflow became evident.

Even as production sped up, handoffs remained manual: Design intent was often lost, instructions had to be repeated, and files lacked a consistent structure.

At that moment, Figma released Dev Mode in beta : the perfect opportunity to turn a new feature into a real step forward for collaboration.

Dev Mode: A game changer

Without a centralized source of documentation, developers had to inspect layer properties on their own, while designers filled the gaps with messages, screenshots, and verbal explanations.

Dev Mode completely shifts this dynamic. It brings all essential details into one place, CSS values, spacing, typography, variables, assets, interactions, giving every role access to a single source of truth.

Its potential quickly became clear: smoother communication between design and development, less ambiguity, and the foundation for long-term standards.

With strong support from Servier’s design leadership, the rollout of Dev Mode could begin.

Building a new collaboration culture

1. Onboarding and adopting Dev Mode

The first step was making the tool easy to understand and immediately useful for teams. This included:

• introducing the core features of Dev Mode
• deep-diving into component inspection (CSS, auto-layout, properties…)
• using annotations, behaviors, states, and integrated specs
• establishing best practices for navigation, documentation, and design-intent clarity
• running one-on-one sessions to support the specific needs of front-end developers
   

2. Establishing visual governance

To support consistency across projects, a clear governance framework was created:

• standardized thumbnails to instantly identify file status, type, device context, and editors
• descriptive frames to document file structure and ease onboarding for newcomers
• a project Starter Kit to provide a normalized file organization across all initiatives
   

3. A Design System built for Dev Mode

To fully leverage Dev Mode, Servier’s Design System was structured to align with technical needs:

• visual annotations: measurements, paddings, gaps, spacing
• behavioral documentation: interactive states (hover, active, focus, disabled, error)
• contextualized tokens: color, typography, spacing variables
• developer-friendly naming, consistent between Figma and code
   

Measurable impact every day

Immediate efficiency gains

Dev Mode quickly delivered tangible improvements for developers: designs were implemented more accurately, and interfaces became truly pixel perfect.

Consistent margins and spacing reduced back-and-forth with Design and saved valuable time across the workflow.

Semantic Tokens: Closing the gap between Design and Development

Field feedback highlighted a key insight: for design tokens to be effective, the semantic logic must start in Figma, with meaningful variables embedded directly into components.

On the coding side, tokens were still mostly limited to raw values. In Dev Mode, developers could see the semantic structure defined in design but often accessed only the final value in code, creating a slight friction.

Dev Mode makes this gap visible. This clarity helps teams anticipate the technical work needed to align both worlds and maintain a smooth collaboration between design and development.

Once tokens reach the same level of maturity in design and in code, Dev Mode fully delivers on its promise: clarity, consistency, and autonomy for everyone involved.

Teams moving faster, together

Dev Mode reshaped day-to-day collaboration. Developers can access everything they need directly in Figma, gaining autonomy and reducing dependency on designers. Designers, in turn, can focus on exploration and innovation instead of clarifying specs.

Integration cycles accelerate, the output becomes more consistent, and design debt is reduced as teams align on shared standards.

“Dev Mode changes the game: it brings Design and Development closer, reduces friction, and allows us to collaborate directly on the digital product. Digital transformation is above all a collaborative journey, and this tool helps us work hand in hand to create meaningful, impactful experiences.”

Williams Zingile, Head of Design, Servier

By embracing Dev Mode early, empowering teams, and implementing a strong visual governance framework, Servier unlocked a new level of collaboration between designers and developers. Workflows accelerated, handoffs became seamless, and shared standards brought clarity and consistency to every product touchpoint.

The impact speaks for itself: better-aligned teams, faster delivery, and experiences that feel cohesive from end to end.

As Figma continues to evolve, maintaining this momentum will require ongoing adaptation, feedback loops, and cross-functional collaboration. When teams experiment, share insights, and build together, these tools become truly transformative.

If you’re looking to scale your workflows, strengthen your design system, or unlock the full potential of Figma within your organization, let’s connect!

--------------------------------------

Julien Boyer, Head of Design at NEXTON

Julien oversees the strategy, structure, and growth of the Design team. Curious about improving your design maturity? Reach out to Julien to take the next step!

Linkedin