Cómo PhonePe ofrece velocidad a más de 700 millones de usuarios con Figma

Resumen

PhonePe es una de las plataformas fintech más grandes de La India, en la que confían más de 700 millones de usuarios y más de 50 millones de comerciantes.

A medida que la empresa escalaba, su equipo de diseño lean necesitaba moverse más rápido, permanecer alineado entre los productos y mantener una experiencia de usuario constante. Al adoptar Figma como su "sistema central vivo" para el diseño y desarrollo, PhonePe optimizó los flujos de trabajo interfuncionales, aceleró la transferencia y evolucionó sus sistemas de diseño con confianza en todo Figma Design, Dev Mode y Figma MCP.

En la actualidad, los equipos pasan de un concepto a un 50 % de claridad en unas pocas horas. Con tres sistemas de diseño en funcionamiento y un éxito temprano con las herramientas alimentadas por IA, PhonePe está escalando de forma más inteligente sin comprometer la velocidad ni la calidad.

Reto: escalar con velocidad y coherencia

A medida que el Grupo PhonePe lanzó nuevos negocios como Share.Market y la Indus Appstore, la colaboración se volvió más compleja. Con más equipos y más de 700 millones de usuarios, mantener el diseño, la estrategia y el desarrollo alineados se volvió cada vez más complejo.

El equipo necesitaba un método más interconectado y escalable para mantener la coherencia sin sacrificar la velocidad. La centralización del diseño y la documentación en una ubicación se convirtió en esencial para ayudar a los equipos a trabajar más eficientemente y pasar menos tiempo rastreando la información.

La colaboración y la coherencia eran desde hacía tiempo esferas que el equipo de diseño estaba tratando de mejorar. A medida que la organización maduraba, los procesos más claros y las formas estándar de trabajo comenzaron a tomar forma, lo que ayuda a los equipos a mantener la coherencia entre los productos.

Solución: tres sistemas de diseño, un lenguaje compartido

Para apoyar su creciente ecosistema, PhonePe gestiona tres sistemas de diseño. El más maduro impulsa su aplicación insignia para consumidores, mientras que dos sistemas más nuevos respaldan negocios como Share.Market, ofreciendo más espacio para experimentar a medida que estas aplicaciones evolucionan.

Figma se convirtió en el espacio único y compartido donde viven los sistemas de diseño de PhonePe, reuniendo componentes, tokens, bibliotecas de iconos y documentación. Con todo en un solo lugar, los equipos de diseño e ingeniería podrían mantenerse alineados, avanzar más rápido y mantener alta la calidad.

A pesar de sus diferencias, los tres sistemas de diseño se basan en un fundamento común en Figma: procesos estructurados, tokens de diseño compartido y documentación escalable. Esta coherencia proporciona a los equipos una transferencia compartida que acelera el lenguaje, reduce las suposiciones y ayuda a todos a crear excelentes productos.

La mayoría de los comentarios y reseñas ocurren directamente en Figma a través de comentarios y enlaces compartidos, manteniendo la comunicación rápida y contextual. Mientras tanto, las características de Figma Empresa, como SSO, control de acceso y el historial de versiones, mantienen el sistema seguro y actualizado, para que todos puedan avanzar con claridad y confianza.

FigJam como una herramienta colaborativa de "bloc de notas" y documentación

El equipo de PhonePe está completamente dedicado a FigJam. Se ha convertido en el espacio de referencia para el pensamiento inicial en equipos de diseño, ingeniería, productos, negocios, marketing y creatividad. Lo que antes vivía en notas adhesivas o conversaciones en el pasillo ahora vive en FigJam, facilitando la captura de ideas, compartiéndolas y desarrollándolas en toda la empresa.

FigJam ayuda a los equipos a rastrear toda la trayectoria de una función, desde el concepto inicial hasta la ejecución final. Al final, se ha convertido en una pieza clave del flujo de documentación de PhonePe. Desde un punto de vista de diseño operacional, ha sido una victoria", dice Sindhu, jefe de diseño de contenidos y comunicaciones de diseño. Colectivamente, hemos estado tratando de mejorar en gran medida la cultura de la documentación todo lo que podemos".

También actúa como un “bloc de notas virtual”, lo suficientemente simple para que cualquiera lo use, pero lo suficientemente poderoso como para dar forma a grandes ideas. Incluso personas que no son diseñadores, como los gerentes de producto, pueden intervenir para mapear flujos o esbozar conceptos iniciales, mientras que los diseñadores y desarrolladores lo utilizan como borrador de la arquitectura de la información, crear mapas del sitio y compartir iteraciones rápidas. Esa barrera de entrada baja facilita que los equipos exploren, co-creen y refinen ideas juntos de manera más rápida.

Claridad, visibilidad y productividad con el Dev Mode

El Dev Mode de Figma se convirtió en una piedra angular del flujo de trabajo optimizado de diseño a desarrollo de PhonePe. Mientras que los diseñadores siempre trabajaron con el contexto completo de los componentes, el Dev Mode brindó a los desarrolladores esa misma visibilidad, además de las herramientas que necesitaban para inspeccionar, probar y comprender los componentes en tiempo real. Creó un espacio práctico en el que los ingenieros podían explorar cómo se comportan las cosas sin tener que ir de un lado a otro con el diseño.

En lugar de depender de entregas repetidas o reuniones de aclaración, los equipos podrían interactuar directamente con los archivos, probar variaciones y construir con confianza. El soporte de plugins facilitó aún más las transiciones. Los desarrolladores ahora ejecutan un plugin de sistema de diseño personalizado creado por el equipo para hacer que las especificaciones sean más claras y coherentes.

"Antes de Dev Mode, solo podíamos ver las distintas variantes que el equipo de diseño usaba para renderizar el propio componente. Fue una gran mejora para nosotros", explica Sachin Kumar, ingeniero de software y equipo de excelencia en aplicaciones de PhonePe.

Dev Mode también ha ayudado a reducir las reuniones y ha hecho que la colaboración sea más fluida. “En lugar de tener múltiples reuniones entre la entrega y la post-entrega para comprender la funcionalidad de un componente, puedes obtener esa información por tu cuenta. Creo que esa es una de las características más poderosas del Dev Mode”, dice Rahul Gonsalves, responsable de diseño en PhonePe.

Los desarrolladores pueden acceder a fragmentos de código específicos para Android e iOS, lo que les ayuda a traducir el diseño en código listo para producción de manera más eficiente. El soporte para plugins y la capacidad de marcar componentes desvinculados añade otra capa de control y ayuda a proteger la integridad del sistema en todos los equipos.

Integrar la IA en el flujo de trabajo con Figma MCP

A medida que PhonePe evoluciona, el equipo está explorando cómo la inteligencia artificial puede respaldar una entrega más rápida sin comprometer la calidad ni la coherencia. Con la rapidez y la estabilidad del código como prioridades principales, se han centrado en mejorar la forma en que el contexto de diseño desemboca en el desarrollo.

Un paso clave hacia adelante ha sido la adopción de Figma MCP, que permite a PhonePe conectar de manera segura agentes de codificación de IA a Figma y ofrecerles acceso estructurado a archivos de diseño, componentes y metadatos del sistema. Utilizando instrucciones y archivos de instrucciones estandarizados, el equipo puede transmitir un contexto de diseño preciso a sus flujos de trabajo de IA, lo que permite la generación de código que es consistente con sus estándares existentes y reduce significativamente el tiempo de desarrollo.

Además de la generación de código, Figma MCP también está ayudando a optimizar la creación y actualización de componentes. El equipo lo está utilizando para apoyar la adición de nuevos componentes a sus sistemas de diseño, y los primeros equipos piloto ya están viendo el éxito en pantallas más simples a medida que el enfoque continúa madurando.

Para proteger aún más la calidad en la entrega, PhonePe creó un plugin de linter personalizado para detectar problemas antes de la entrega. El plugin muestra detalles como los tokens aplicados y los metadatos de los componentes, facilitando a los desarrolladores la confirmación de si los archivos están listos para su implementación.

"Queremos utilizar eso y mejorar nuestro plugin", dice Sachin. Así que, aparte de las funciones que ya estamos recibiendo de Figma, agreguemos algunas propias para hacer que nuestro sistema de diseño sea aún más robusto".

Envío de productos más rápido con Figma

With Figma, shared visibility reduces friction and allows handoffs to happen twice as fast. Los equipos a menudo pasan de un concepto al 50 % de claridad en solo unas pocas horas. Y debido a que la colaboración va más allá del diseño, los socios de negocios y los equipos que no son de diseño pueden explorar rápidamente los prototipos y ofrecer comentarios. Su implicación temprana, especialmente durante las etapas de baja fidelidad, ha ayudado a reducir el riesgo de pérdida de costes debido a la construcción en la dirección incorrecta.

Permitir que otros equipos exploren las pantallas de Figma si lo necesitan o visualizar un diseño limpio y ordenado hace que todos estén en la misma página más rápido", afirma Sindhu.

Mirando hacia adelante, el equipo planea usar Figma Make para convertir las ideas iniciales en prototipos evaluables, especialmente en momentos en que las restricciones de tiempo podrían, de otro modo, detener la exploración. Con Make, PhonePe tiene como objetivo probar más ideas, explorar más opciones y lanzar mejores productos, más rápidamente.