Como a PhonePe usa o Figma para conquistar mais de 700 milhões de usuários

Resumo

Uma das maiores plataformas de tecnologia financeira da Índia, a PhonePe já conquistou a confiança de mais de 700 milhões de usuários e mais de 50 milhões de comerciantes.

Com o crescimento da empresa, a equipe enxuta de design precisava ganhar agilidade, manter o alinhamento com os produtos e garantir uma experiência do usuário consistente. Ao adotar o Figma como seu “sistema central dinâmico” para design e desenvolvimento, a PhonePe simplificou fluxos de trabalho multifuncionais, acelerou handoffs e aprimorou design systems com confiança usando o Figma Design, o Dev Mode e o Figma MCP.

Hoje, as equipes passam do conceito para uma clareza de 50% em apenas algumas horas. Com três design systems implementados e o sucesso inicial no uso de ferramentas baseadas em IA, a PhonePe cresce de forma mais inteligente sem comprometer a velocidade ou a qualidade.

Desafio: crescer com velocidade e consistência

Os novos negócios lançados pelo Grupo PhonePe, como o Share.Market e a Indus Appstore, aumentaram ainda mais a complexidade da colaboração. Com o aumento do número de equipes e uma base de mais de 700 milhões de usuários, manter o alinhamento entre design, estratégia e desenvolvimento se tornou um desafio cada vez maior.

A equipe precisava manter a consistência de uma maneira mais conectada e escalável sem sacrificar a velocidade. Centralizar o design e a documentação em um único local tornou-se essencial para aumentar a eficiência das equipes e reduzir o tempo gasto rastreando informações.

A equipe de design trabalhava há muito tempo para aprimorar a colaboração e a consistência. Com o amadurecimento da organização, processos mais claros e maneiras padrão de trabalhar começaram a tomar forma, ajudando as equipes a manter a consistência entre os produtos.

Solução: Três design systems, uma mesma linguagem

Para apoiar seu ecossistema em crescimento, o PhonePe opera três design systems. O design system mais maduro é a base do aplicativo principal de consumo. Os dois mais recentes apoiam negócios como o Share.Market, oferecendo mais espaço para experimentação durante a evolução dos apps.

O Figma se tornou um espaço único e compartilhado onde residem os design systems da PhonePe, reunindo componentes, tokens, bibliotecas de ícones e documentação. Com tudo em um só lugar, as equipes de design e engenharia se mantêm alinhadas, ganham agilidade e garantem a alta qualidade.

Apesar das suas diferenças, os três design systems foram desenvolvidos sobre uma base comum no Figma: processos estruturados, tokens de design compartilhados e documentação escalável. Com essa consistência, as equipes contam com uma linguagem compartilhada para agilizar handoffs, reduzir suposições e ajudar todos a criar ótimos produtos.

A maior parte do feedback e das revisões acontece diretamente no Figma. Os comentários e links compartilhados mantêm a comunicação rápida e contextual. Por outro lado, os recursos do Figma Enterprise, como SSO, controle de acesso e histórico de versões, mantêm o sistema seguro e atualizado para que todos possam agir com clareza e confiança.

FigJam como um espaço colaborativo com “bloco de anotações” e ferramenta de documentação

A equipe da PhonePe está totalmente comprometida com o FigJam. A ferramenta tornou-se o espaço preferido para reflexões iniciais das equipes de design, engenharia, produto, negócios, marketing e criação. O conteúdo que antes ficava disperso em notas adesivas ou conversas de corredor agora reside no FigJam, facilitando a captura, o compartilhamento e o desenvolvimento das ideias em toda a empresa.

O FigJam ajuda a equipe a acompanhar toda a jornada de um recurso, desde o conceito inicial até a execução final. Com o tempo, ele tornou-se uma parte essencial do fluxo de trabalho de documentação da PhonePe. “Do ponto de vista das operações de design, isso foi uma conquista”, disse Sindhu, líder de design de conteúdo e comunicações de design na PhonePe. “Coletivamente, estamos tentando aprimorar ao máximo a cultura de documentação.”

Ele também funciona como um “bloco de anotações virtual”, simples o suficiente para ser usado por qualquer pessoa, mas com recursos avançados para moldar grandes ideias. Mesmo aqueles que não são designers, como gerentes de produto, podem participar do mapeamento de fluxos ou do esboço dos conceitos iniciais. Designers e desenvolvedores elaboram a arquitetura da informação, criam mapas do site e compartilham iterações rápidas. Graças a essa baixa barreira de entrada, as equipes têm mais facilidade para acelerar a exploração, criação e refinamento de ideias em conjunto.

Clareza, visibilidade e produtividade com o Dev Mode

Na PhonePe, o Dev Mode do Figma tornou-se um elemento central do fluxo de trabalho simplificado do design ao desenvolvimento. Antes, os designers trabalhavam sempre com o contexto completo dos componentes. Com o Dev Mode, além de ter essa mesma visibilidade, eles passaram a contar com as ferramentas necessárias para inspecionar, testar e entender os componentes em tempo real. O recurso criou um espaço prático onde os engenheiros podem explorar o comportamento das coisas sem precisar interagir com o design.

Em vez de depender de vários handoffs ou reuniões de esclarecimento, as equipes podem interagir diretamente com os arquivos, testar variações e criar com confiança. O suporte de plugins facilitou ainda mais os handoffs. Agora, os desenvolvedores executam um plugin de design system personalizado desenvolvido pela equipe para aumentar a clareza e a consistência das especificações.

“Antes do Dev Mode, só podíamos ver as diferentes variantes usadas pela equipe de design para renderizar o próprio componente. Para nós, foi um grande avanço”, comentou Sachin Kumar, engenheiro de software e membro da equipe de excelência de apps na PhonePe.

O Dev Mode também ajudou a reduzir o número de reuniões e a aprimorar a fluidez da colaboração. “Em vez de fazer várias reuniões durante e após o handoff para compreender a funcionalidade de um componente, você pode simplesmente obter essas informações por conta própria. Acho que esse é um dos recursos mais avançados do Dev Mode”, afirmou Rahul Gonsalves, head de design na PhonePe.

Os desenvolvedores podem acessar trechos de código específicos da plataforma para Android e iOS, aumentando a eficiência da conversão do design em código pronto para produção. O suporte para plugins e a capacidade de sinalizar componentes desvinculados adicionam outra camada de controle e ajudam a proteger a integridade do sistema entre as equipes.

Integração de IA a fluxos de trabalho com o Figma MCP

Com o crescimento da PhonePe, a equipe está explorando como a IA pode apoiar entregas mais rápidas sem comprometer a qualidade ou a consistência. Com a velocidade e a estabilidade do código como principais prioridades, a equipe mantém o foco no aprimoramento do fluxo do contexto de design para o desenvolvimento.

Um passo importante foi a adoção do Figma MCP, que permite a conexão segura entre os agentes de codificação de IA da PhonePe e o Figma, com acesso estruturado a arquivos de design, componentes e metadados de sistema. Usando prompts e arquivos de instrução padronizados, a equipe pode passar um contexto de design preciso para os fluxos de trabalho de IA, possibilitando a geração de código consistente com os padrões existentes e reduzindo significativamente o tempo de desenvolvimento.

Além da geração de código, o Figma MCP também ajuda a simplificar a criação e atualização de componentes. A equipe usa esse recurso para apoiar a adição de novos componentes aos design systems. Com o amadurecimento dessa abordagem, as equipes dos pilotos iniciais já estão obtendo bons resultados.

Para proteger ainda mais a qualidade na transferência, a PhonePe criou um plugin de linting personalizado para identificar problemas antes dos handoffs. O plugin revela detalhes, como tokens aplicados e metadados de componentes, que ajudam os desenvolvedores a confirmar se os arquivos estão prontos para implementação.

“Queremos utilizar e aprimorar nosso plugin”, observou Sachin. “Portanto, além dos recursos que já recebemos do Figma, adicionaremos alguns recursos próprios para aumentar ainda mais a robustez do design system.”

Agilizar o lançamento de produtos com o Figma

Com o Figma, a visibilidade compartilhada reduz atritos e corta pela metade o tempo necessário para os handoffs. Muitas vezes, as equipes passam do conceito para uma clareza de 50% em apenas algumas horas. E como a colaboração não se limita ao design, parceiros de negócios e equipes não relacionadas ao design podem explorar protótipos e enviar feedback em pouco tempo. Esse envolvimento antecipado, principalmente durante as etapas de baixa fidelidade, ajuda a reduzir o risco de investir tempo e recursos de desenvolvimento na direção errada.

“Se necessário, as outras equipes podem explorar telas ou visualizar um design limpo e organizado no Figma, o que agiliza o alinhamento entre todos”, disse Sindhu.

Para o futuro, a equipe planeja usar o Figma Make para transformar ideias iniciais em protótipos testáveis, principalmente quando restrições de tempo poderiam interromper a exploração por métodos convencionais. Com o Make, a PhonePe pretende testar mais ideias, explorar mais opções e lançar produtos melhores em menos tempo.