Juspay, empresa líder en tecnología de pagos, se basa en una cultura de ingeniería rápida para gestionar transacciones en 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 ahora permiten que Juspay colabore mejor, envíe productos más rápido y mantenga una escala coherente entre equipos y distribuidores, con una mejora de 5 veces en la velocidad de diseño.

Cierre de 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 feedback 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 de 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 fricción dejó claro que necesitábamos una mejor manera de colaborar, así que nos cambiamos a Figma casi de la noche a la mañana", recuerda Samit Barai, director de Diseño en Juspay.

Ampliación de 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 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.

Garantía de precisión a gran 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 archivos antes de cada entrega y señala los elementos que no se crearon 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 anulaciones 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 la analítica 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 gran 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 ramificación en Figma, revisión por pares, y luego 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 ensamblar de diferentes maneras según el caso de uso. “En lugar de rediseñar cada instancia, ahora ensamblamos las interfaces como si fueran bloques de construcción, los 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 diseños en cuatro dimensiones: lo que les gusta, lo que no funciona, lo que se podría mejorar y lo que podría faltar, todo dentro de FigJam.

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

De cara hacia el futuro: servidor MCP de Dev Mode, Code Connect y automatización

Con un sistema de diseño maduro ya implantado, Juspay está probando nuevas formas de automatizar los flujos de trabajo entre diseño y código.

Code Connect ahora está integrado con su repositorio de sistemas 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. Hasta hoy, 34 componentes se han conectado utilizando Code Connect.

Juspay también está aprovechando el servidor MCP en Dev Mode de Figma para generar código HTML/CSS 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 aún se encuentra en fase inicial de experimentación, Juspay estima que el servidor MCP y Code Connect de Figma podrían suponer grandes 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 consistencia: 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 plugin que busca actualizaciones en todas las versiones del sistema de diseño y genera solicitudes de extracción de GitHub automáticamente, cerrando así el ciclo entre las actualizaciones de diseño y la visibilidad del código.

Diseñar para escalar, crear 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 consistencia de la UI, sino también la transformación cultural y del flujo de trabajo. Con Figma como su base, Juspay está creando más rápido, colaborando de manera más inteligente y escalando con confianza, una variable, una rama y un plugin a la vez.