A Juspay, uma empresa multinacional líder em tecnologia de pagamentos, depende de uma cultura ágil e centrada na engenharia para apoiar milhões de transações em ecossistemas complexos de comerciantes e consumidores. Com dezenas de painéis, plataformas modulares e extensos requisitos de personalização, o design teve que evoluir de um esforço manual para um sistema escalável e alinhado aos desenvolvedores.

Ao adotar o Figma, a Juspay transformou o design de fluxos de trabalho isolados em um sistema integrado e pronto para desenvolvedores. Recursos como ramificação, Dev Mode e Code Connect agora permitem que a Juspay colabore melhor, entregue mais rápido e escale consistentemente entre equipes e revendedores — com uma melhoria de 5x na velocidade de design.

Fechando a lacuna entre design e desenvolvimento

Antes do Figma, o fluxo de trabalho de design da Juspay dependia do Sketch, do Flinto e de feedbacks presenciais. Os designers frequentemente trabalhavam sozinhos ou aglomerados em torno de telas, trocando arquivos de um lado para outro — um processo colaborativo, mas dependente de localização. Os desenvolvedores também tinham visibilidade limitada da intenção do design, o que tornava a implementação mais lenta, mais propensa a erros e resultava em prazos perdidos.

“Passávamos de 9 a 10 horas por dia em chamadas, e compartilhar a tela do Sketch fazia nossos dispositivos travarem. Esse atrito deixou claro que precisávamos de uma forma melhor de colaborar, então mudamos para o Figma quase da noite para o dia", lembra Samit Barai, Diretor de Design da Juspay.

Redimensionando design systems com profundidade e controle

O primeiro design system da Juspay surgiu após a adoção do Figma. Inicialmente construído com estilos, a equipe fez a transição em variáveis para cores, tipografia, dimensionamento, temática, garantindo um alinhamento mais próximo com a sintaxe do código de engenharia.

Essa mudança foi essencial, dado o ambiente multimarcas e multipainéis da Juspay, no qual as fundações precisavam se adaptar perfeitamente a diferentes equipes e parceiros. Hoje, com temática baseada em variáveis, os designers podem tematizar painéis para parceiros comerciais e revendedores em apenas alguns cliques.

Garantindo precisão em escala

À medida que a superfície de produtos da Juspay se expandiu, a equipe criou plugins privados e ferramentas internas com as APIs do Figma para unir os fluxos de trabalho de design e desenvolvimento e validar a implementação. Um plugin de cobertura do design system escaneia arquivos antes de cada transferência, sinalizando elementos que não foram construídos a partir de componentes. “Este plugin ajuda a encontrar quais elementos não estão usando o design system, e o que deve ser transformado em um componente. É tanto uma ferramenta de controle de qualidade quanto um mecanismo de oportunidades”, explica Deepanshu.

Os dados resultantes alimentam um painel interno que rastreia métricas de arquivo e de usuário, como reuso de componentes, substituições fora do design system e tendências de adoção de design systems.

Para reforçar a integridade visual da engenharia, a Juspay também criou uma extensão do Chrome que sinaliza solicitações de pull que não estão alinhadas com os designs validados. Combinadas com a análise da biblioteca do Figma, essas ferramentas evitam inconsistências, mantêm os desenvolvedores sincronizados e garantem a integridade do design.

Essas melhorias se traduziram em um impacto mensurável:

• Melhoria de 5 vezes na velocidade de design
• Aumento de 173% na taxa de reutilização de componentes em 90 dias
• Queda de 17% na desvinculação de componentes
• 71% de cobertura média do design system entre os arquivos analisados
• 12 equipes internas usando ativamente bibliotecas compartilhadas

Governança com flexibilidade

Apesar de operar em escala, a Juspay não acredita em limitar a criatividade. Os designers são encorajados a propor novos padrões e variantes através de um fluxo de trabalho Slack-to-Jira, revisado pela equipe de design systems. As mudanças aprovadas passam por ramificação no Figma, revisão por pares e são então mescladas no arquivo mestre com registros de mudanças claros.

Além dos painéis, o design system da Juspay também espelha a arquitetura de componentes no código. Componentes modulares, como células de tabela e contornos, podem ser montados de diferentes formas, dependendo do caso de uso. “Em vez de redesenhar cada instância, agora montamos interfaces como blocos de construção, resultando em uma melhoria de 5x na velocidade de design”, explica Deepanshu.

FigJam para crítica, ideação e inclusão

O impacto do Figma vai além dos componentes e do código, ele também reformulou a cultura de design da Juspay. Cada projeto agora inclui uma sessão Show & Tell, uma crítica de pares estruturada onde os membros da equipe avaliam designs em quatro dimensões: o que eles gostam, o que não funciona, o que poderia ser melhorado e o que pode estar faltando — tudo dentro do FigJam.

Gerentes de produto e engenheiros também participam da ideação cedo com notas adesivas e wireframes para compartilhar ideias e dar feedback. Essa abordagem aberta e multifuncional tornou o design uma responsabilidade verdadeiramente compartilhada em toda a organização.

Olhando para o futuro: Servidor MCP do Dev Mode, Code Connect e automação

Com um design system maduro em vigor, a Juspay está experimentando novas maneiras de automatizar fluxos de trabalho de design para código.

O Code Connect agora está integrado ao repositório de design systems deles, permitindo que os desenvolvedores visualizem trechos de código alinhados à produção em tempo real diretamente no Dev Mode. Até hoje, 34 componentes foram conectados usando o Code Connect.

A Juspay também está aproveitando o Servidor MCP do Dev Mode do Figma para gerar código HTML/CCS e TypeScript utilizável, com o objetivo de passar do conceito ao código pronto para produção com o mínimo de etapas manuais.

Embora ainda em fase inicial de experimentação, a Juspay estima que o Servidor MCP e o Code Connect do Figma possam proporcionar ganhos significativos em termos de eficiência, incluindo:

• Tempo de desenvolvimento 4-5x mais rápido: reduzindo a implementação de 45-60 minutos para 8-12 minutos por tela
• Menos etapas necessárias: reduzindo o fluxo de trabalho de 15 para 4 etapas manuais
• Maior consistência: reduzindo inconsistências visuais de 15-20% para 3-5%

Para garantir que os desenvolvedores permaneçam em sincronia com todas as alterações, a equipe também está testando um plugin que verifica atualizações em todas as versões do design system e gera solicitações de pull no GitHub automaticamente, fechando o ciclo entre as atualizações de design e a visibilidade do código.

Projetando para escalar, construindo para o futuro

Da necessidade à inovação, a jornada da Juspay com o Figma mostra como uma plataforma de design colaborativa pode permitir não apenas a consistência da interface do usuário, mas também a transformação cultural e do fluxo de trabalho. Com o Figma como sua base, a Juspay está construindo mais rápido, colaborando de forma mais inteligente e escalando com confiança — uma variável, ramificação e plugin de cada vez.