Cómo PhonePe proporciona 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, que cuenta con la confianza de más de 700 millones de usuarios y más de 50 millones de comercios.

Con la expansión de la empresa, su reducido equipo de diseño necesitaba avanzar más rápido, mantenerse alineado en todos los productos y preservar la consistencia en la experiencia de usuario. La elección de Figma como su "sistema de diseño centralizado y dinámico" para el diseño y el desarrollo le permitió a PhonePe optimizar los flujos de trabajo interdisciplinarios, acelerar la entrega y mejorar sus sistemas de diseño de forma confiable mediante Figma Design, Dev Mode y Figma MCP.

Hoy en día, los equipos pasan del concepto a tener un 50 % de claridad en tan solo unas horas. Gracias a los tres sistemas de diseño implementados y al éxito inicial de las herramientas basadas en IA, PhonePe está creciendo de forma más inteligente sin sacrificar velocidad ni calidad.

Desafío: Escalar con rapidez y consistencia

Cuando el grupo PhonePe lanzó nuevos negocios como Share.Market y la Indus Appstore, la colaboración adquirió mayor complejidad. Con más equipos y más de 700 millones de usuarios, mantener alineados el diseño, la estrategia y el desarrollo se volvió una tarea cada vez más ardua.

El equipo necesitaba mantener la consistencia de forma más integrada y escalable, sin sacrificar la velocidad. En este sentido, la centralización del diseño y la documentación resultó fundamental para que los equipos pudieran trabajar con mayor eficacia y dedicar menos tiempo a la búsqueda de información.

Tanto la colaboración como la coherencia eran aspectos que el equipo de diseño llevaba tiempo tratando de mejorar. Al madurar la organización, los procesos y las formas de trabajo estándar fueron tomando forma, lo que les permitió a los equipos asegurar la consistencia entre los distintos productos.

Solución: Tres sistemas de diseño con un lenguaje común

PhonePe cuenta con tres sistemas de diseño que respaldan el crecimiento de su ecosistema. El más maduro de ellos impulsa su app insignia para consumidores, mientras que los dos sistemas más recientes dan soporte a empresas como Share.Market, lo que ofrece un mayor margen de experimentación conforme esas apps van evolucionando.

Figma se convirtió en un espacio único y compartido que alberga los sistemas de diseño de PhonePe y que reúne componentes, tokens, bibliotecas de íconos y documentación. Con todo en un solo lugar, a los equipos de diseño e ingeniería les resultó más fácil alinearse, avanzar con mayor rapidez y mantener un alto nivel de calidad.

Pese a sus diferencias, los tres sistemas de diseño basan su funcionamiento en los mismos principios de Figma: procesos estructurados, tokens de diseño compartidos y documentación escalable. Esta consistencia les brinda a los equipos un lenguaje común, que agiliza las entregas, disminuye las conjeturas y los ayuda a todos a crear productos excelentes.

La mayor parte del feedback y las revisiones se realizan directamente en Figma mediante comentarios y enlaces compartidos, de modo que la comunicación es ágil y contextual. Por su parte, las funciones de Figma Empresa, como el inicio de sesión único (SSO), el control de acceso y el historial de versiones, permiten mantener el sistema seguro y actualizado para que todos puedan trabajar con claridad y confianza.

FigJam como "bloc de notas" colaborativo y herramienta de documentación

El equipo de PhonePe apuesta por FigJam. De hecho, pasó a ser la plataforma de referencia para las primeras fases de diseño, ingeniería, producto, negocios, mercadotecnia y equipos creativos. Las ideas que antes se plasmaban en notas adhesivas o en charlas de pasillo ahora se comparten en FigJam, lo que facilita su captura, intercambio y desarrollo a nivel de toda la empresa.

FigJam permite que el equipo lleve el seguimiento de todo el proceso de desarrollo de una función, desde la idea inicial hasta su implementación final. Con el tiempo, se convirtió en una parte clave del flujo de trabajo de documentación de PhonePe. "Desde el punto de vista de las operaciones de diseño, es todo un éxito", afirma Sindhu, jefe de Design de Contenidos y Comunicaciones de Design de PhonePe. "Entre todos, intentamos que la cultura de documentación sea cada vez mejor".

También funciona como un "bloc de notas virtual" bastante sencillo como para que cualquiera pueda usarlo, sin dejar de ser lo suficientemente potente como para dar forma a grandes ideas. Incluso los profesionales que no son diseñadores, como los gerentes de producto, pueden utilizarlo para trazar flujos o bosquejar conceptos iniciales, al tiempo que los diseñadores y desarrolladores pueden usarlo para delinear la arquitectura de la información, crear mapas del sitio y compartir iteraciones rápidas. Su bajo nivel de dificultad inicial les simplifica a los equipos la tarea de explorar, crear en conjunto y perfeccionar ideas con mayor rapidez.

Claridad, visibilidad y productividad con Dev Mode

El Dev Mode de Figma se convirtió en una pieza clave del flujo de trabajo optimizado de PhonePe, que abarca desde el diseño hasta el desarrollo. Si bien los diseñadores siempre trabajaban con una visión completa de los componentes, el Dev Mode le dio a los desarrolladores el mismo nivel de visibilidad, así como las herramientas que necesitaban para evaluar, probar y comprender los componentes en tiempo real. Así, surgió un espacio práctico en el que los ingenieros pudieron analizar el comportamiento de los elementos sin tener que estar en constante comunicación con el equipo de diseño.

En lugar de depender de entregas reiteradas o reuniones de aclaración, los equipos podían interactuar directamente con los archivos, probar variaciones y desarrollar con confianza. La compatibilidad con los plugins agilizó aún más las entregas. Ahora, para que las especificaciones sean más claras y consistentes, los desarrolladores utilizan un complemento de sistema de diseño personalizado creado por el propio equipo.

"Antes de Dev Mode, solo podíamos considerar las diferentes variantes que el equipo de diseño utilizaba para renderizar cada componente. Para nosotros, fue una mejora enorme", afirma Sachin Kumar, ingeniero de software del Equipo de Excelencia en Apps de PhonePe.

Además de fomentar la colaboración, Dev Mode también permitió reducir el número de reuniones. "En lugar de tener que organizar varias reuniones entre el momento de la entrega y el momento posterior a la entrega para comprender la funcionalidad de un componente, es posible obtener esa información de forma independiente. Creo que esa es una de las características más potentes de Dev Mode", afirma Rahul Gonsalves, jefe de Design de PhonePe.

Los desarrolladores pueden acceder a fragmentos de código específicos para las plataformas Android e iOS, lo que les permite convertir el diseño en código listo para producción de forma más eficiente. La compatibilidad con plugins y la posibilidad de identificar componentes desvinculados agregan otra capa de control y contribuyen a proteger la integridad del sistema en todos los equipos.

Integración de la IA en el flujo de trabajo con Figma MCP

Con el crecimiento de PhonePe, el equipo se encuentra estudiando en qué medida la IA puede contribuir a agilizar la entrega sin sacrificar calidad ni consistencia. Teniendo como prioridades principales la velocidad y la estabilidad del código, los esfuerzos están centrados en mejorar cómo se integra el contexto del diseño en el desarrollo.

En este sentido, la adopción de Figma MCP supone un avance clave, ya que le permite a PhonePe conectar de forma segura los agentes de programación de IA con Figma y proporcionarles acceso estructurado a los archivos de diseño, los componentes y los metadatos del sistema. Mediante el uso de indicaciones estandarizadas y archivos de instrucciones, el equipo puede incorporar el contexto preciso del diseño a sus flujos de trabajo de IA, con lo que se genera un código consistente con los estándares existentes y se reduce considerablemente el tiempo de desarrollo.

Además de generar código, Figma MCP también facilita la creación y actualización de componentes. El equipo lo utiliza para añadir nuevos componentes a sus sistemas de diseño y los primeros equipos piloto ya están obteniendo buenos resultados en pantallas más sencillas gracias a la mejora continua de este enfoque.

Para preservar aún más la calidad en la entrega, PhonePe desarrolló un plugin de linting personalizado para detectar problemas antes de la entrega. El plugin revela detalles como los tokens aplicados y los metadatos de los componentes, lo que les permite a los desarrolladores confirmar más fácilmente si los archivos están listos para su implementación.

"Queremos utilizarlo y mejorar nuestro plugin", dice Sachin. "Así que, además de las funciones que ya nos ofrece Figma, le añadiremos algunas propias que harán que nuestro sistema de diseño sea aún más sólido".

Lanzar productos más rápido con Figma

Con Figma, la visibilidad compartida reduce la fricción y permite acelerar las entregas al doble. En general, los equipos pasan del concepto a tener un 50 % de claridad en tan solo unas horas. Y como la colaboración va más allá del diseño, los socios comerciales y los equipos que no se dedican al diseño pueden examinar los prototipos con rapidez y aportar su feedback. El hecho de involucrarlos desde el principio, especialmente en las etapas de baja fidelidad, permitió reducir el riesgo de incurrir en gastos irrecuperables producto de decisiones erróneas.

"Permitir que otros equipos revisen las pantallas en Figma si así lo necesitan o que visualicen un diseño claro y ordenado hace que todos nos pongamos de acuerdo más rápido", dice Sindhu.

De cara al futuro, el equipo prevé utilizar Figma Make para convertir las ideas iniciales en prototipos que se puedan probar, especialmente en momentos en los que las limitaciones de tiempo puedan impedir la exploración. Con Make, PhonePe pretende probar más ideas, explorar más opciones y lanzar mejores productos con mayor rapidez.