Juspay, una empresa multinacional líder en tecnología de pagos, se basa en una cultura dinámica y centrada en la ingeniería para gestionar millones de transacciones en complejos ecosistemas comerciales y de consumo. Con docenas de paneles, plataformas modulares y numerosos requisitos de personalización, el diseño tuvo que evolucionar desde un trabajo manual a un sistema escalable y adaptado a los desarrolladores.

Con la incorporación de Figma, Juspay ha transformado el diseño de flujos de trabajo aislados en un sistema integrado listo para desarrolladores. Funciones como la ramificación, Dev Mode y Code Connect permiten ahora a Juspay una mejor colaboración, envíos más rápidos y una escalabilidad constante entre equipos y distribuidores, con una velocidad de diseño cinco veces superior.

Cerrar la brecha entre el diseño y el desarrollo

Antes de Figma, el flujo de trabajo de diseño de Juspay dependía de Sketch, Flinto y los comentarios en persona. Los diseñadores solían trabajar solos o reunidos alrededor de las pantallas, intercambiando archivos, un proceso colaborativo pero que dependía de su ubicación. Los desarrolladores también tenían una visibilidad limitada sobre la intención del diseño, lo que retrasaba la implementación, la hacía más propensa a errores y provocaba que no se cumplieran los plazos.

«Pasábamos entre 9 y 10 horas al día en llamadas, y compartir la pantalla de Sketch provocaba retrasos en nuestros dispositivos. Esa situación nos dejó claro que necesitábamos una forma mejor de colaborar, así que nos pasamos a Figma casi de la noche a la mañana», recuerda Samit Barai, Director de Diseño de Juspay.

Escalar los sistemas de diseño con profundidad y control

El primer sistema de diseño de Juspay surgió tras la incorporación de Figma. Inicialmente creado con estilos, el equipo pasó a utilizar variables para los colores, la tipografía, el tamaño y la temática, con el fin de garantizar una mayor alineación con la sintaxis del código de ingeniería.

Este cambio fue esencial dado el entorno multimarca y multipanel de control de Juspay, donde las bases debían adaptarse a la perfección entre los diferentes equipos y socios. Hoy en día, con una temática basada en variables, los diseñadores pueden crear temas para los paneles de los comerciantes y socios distribuidores con tan solo unos clics.

Garantizar la precisión a escala

A medida que se ampliaba la cobertura del producto de Juspay, el equipo creó plugins privados y herramientas internas con las API de Figma para conectar los flujos de trabajo de diseño y desarrollo y validar la implementación. Un plugin de cobertura del sistema de diseño escanea los archivos antes de cada entrega y señala los elementos que no se han creado a partir de componentes. «Este plugin ayuda a encontrar qué elementos no están utilizando el sistema de diseño y qué debería convertirse en un componente. Es tanto una herramienta de control de calidad como un motor de oportunidades», explica Deepanshu.

Los flujos de datos resultantes se introducen en un panel interno que realiza un seguimiento de las métricas a nivel de archivo y de usuario, como la reutilización de componentes, las invalidaciones del sistema de diseño y las tendencias de adopción del sistema de diseño.

Para reforzar la integridad visual de la ingeniería, Juspay también creó una extensión de Chrome que señala las solicitudes de extracción que no se ajustan a los diseños validados. En combinación con los análisis de la biblioteca de Figma, estas herramientas evitan inconsistencias, mantienen a los desarrolladores sincronizados y garantizan la integridad del diseño.

Estas mejoras han producido un impacto cuantificable:

• una velocidad de diseño cinco veces mayor
• un aumento del 173 % en la tasa de reutilización de componentes en 90 días
• una reducción del 17 % en la desvinculación de componentes
• una cobertura media del sistema de diseño del 71 % en los archivos escaneados
• 12 equipos internos que utilizan activamente las bibliotecas compartidas

Gobernanza con flexibilidad

A pesar de operar a escala, Juspay no cree en limitar la creatividad. Se anima a los diseñadores a proponer nuevos patrones y variantes a través de un flujo de trabajo de Slack a Jira, que revisa el equipo de sistemas de diseño. Los cambios aprobados pasan por la ramificación en Figma, la revisión paritaria y, a continuación, se fusionan en el archivo maestro con registros de cambios claros.

Más allá de los paneles, el sistema de diseño de Juspay también refleja la arquitectura de componentes en el código. Los componentes modulares, como las celdas de la tabla y los wrappers, se pueden combinar de diferentes maneras según el caso de uso. «En lugar de rediseñar cada instancia, ahora combinamos las interfaces como si fueran bloques de construcción, lo que nos permite multiplicar por cinco la velocidad de diseño», explica Deepanshu.

FigJam para la crítica, la ideación y la inclusión

El impacto de Figma va más allá de los componentes y el código, ya que también ha transformado la cultura de diseño de Juspay. Ahora, cada proyecto incluye una sesión de «Mostrar y contar», una crítica estructurada entre compañeros en la que los miembros del equipo evalúan los diseños en cuatro dimensiones: lo que les gusta, lo que no funciona, lo que se podría mejorar y lo que puede faltar, todo ello dentro de FigJam.

Los gerentes de producto y los ingenieros también participan desde el principio en la ideación con notas adhesivas y retículas para compartir ideas y comentarios. Este enfoque abierto y multifuncional ha convertido el diseño en una auténtica responsabilidad compartida en toda la organización.

Mirando hacia el futuro: servidor MCP Dev Mode, Code Connect y automatización

Con un sistema de diseño maduro, Juspay está probando nuevas formas de automatizar los flujos de trabajo del diseño al código.

Code Connect ahora está integrado con el repositorio de su sistema de diseño, lo que permite a los desarrolladores ver fragmentos de código alineados con la producción en tiempo real directamente en Dev Mode. A día de hoy, se han conectado 34 componentes mediante Code Connect.

Juspay también está aprovechando el servidor MCP Dev Mode de Figma para generar código HTML/CCS y TypeScript utilizable, con el objetivo de pasar del concepto al código listo para la producción con un mínimo de pasos manuales.

Aunque en fase inicial de experimentación, Juspay estima que el servidor MCP y Code Connect de Figma podrían suponer importantes mejoras en la eficiencia, entre ellas:

• Tiempo de desarrollo 4-5 veces más rápido: reducción de la implementación de 45-60 minutos a 8-12 minutos por pantalla
• Menos pasos necesarios: reducción del flujo de trabajo de 15 a 4 pasos manuales
• Mayor coherencia: reducción de las inconsistencias visuales del 15-20 % al 3-5 %

Para garantizar que los desarrolladores se mantengan al día con cada cambio, el equipo también está probando un complemento que busca actualizaciones en todas las versiones del sistema de diseño y genera solicitudes de extracción de GitHub automáticamente, cerrando el ciclo entre las actualizaciones de diseño y la visibilidad del código.

Diseñar para escalar, construir para el futuro

Desde la necesidad hasta la innovación, el recorrido de Juspay con Figma muestra cómo una plataforma de diseño colaborativo puede hacer posible no solo la coherencia de la IU, sino también la transformación cultural y del flujo de trabajo. Con Figma como su base, Juspay está creando más rápidamente, colaborando de forma más inteligente y escalando con confianza, una variable, una rama y un plugin cada vez.