Como o design system do Nubank entregou experiências acessíveis e localizadas com o Figma

Resumo:

Nubank, um dos maiores bancos digitais da América Latina, construiu sua reputação ao desafiar os padrões do setor financeiro. Há mais de uma década, seu objetivo permanece claro: empoderar pessoas ao tornar os serviços financeiros simples, transparentes e, acima de tudo, humanos.

Atendendo a mais de 118 milhões de clientes no Brasil, México e Colômbia, o Nubank recorreu ao Figma para ajudar a manter a consistência de design e escalar suas operações entre diferentes mercados. Ao construir seu design system, o NuDS, integralmente no Figma, o Nubank entregou experiências mais acessíveis e localizadas por meio de tokens e theming.

Desafio: projetar com velocidade, escala e sensibilidade regional

Com a expansão para Brasil, México e Colômbia, as operações de design do Nubank tornaram-se cada vez mais complexas, já que cada mercado exigia diferentes requisitos regulatórios, contextos culturais e expectativas dos usuários.

O design continuou sendo um pilar estratégico, mas manter qualidade e coesão em escala se tornou mais difícil. “Não queríamos ser apenas mais um banco com UX um pouco melhor. Nossa promessa é construir produtos que sejam fundamentalmente diferentes”, diz Ellen Kiss, diretora e líder de design expertise no Nubank.

Antes do Figma, as equipes trabalhavam com uma combinação de duas plataformas diferentes. Essa configuração fragmentada dificultava o controle de versões, impedia a colaboração e praticamente impossibilitava o alinhamento entre as equipes, especialmente para uma instituição financeira que precisa lidar com requisitos regulatórios rigorosos em diferentes mercados.

Para acompanhar o crescimento e cumprir sua missão de tornar finanças mais humanas, o Nubank precisava de uma plataforma que unificasse suas ferramentas, profissionais e padrões de design em todos os mercados atendidos.

Solução: construir uma infraestrutura de design para excelência e escala

O Figma ofereceu aos mais de 200 designers do Nubank um espaço de trabalho colaborativo em tempo real, presente em três países. Designers de conteúdo, pesquisadores, engenheiros e PMs podiam cocriar em um ambiente único, trazendo mais agilidade ao trabalho.

A localização rapidamente se tornou uma vantagem competitiva. Com designers presentes em cada mercado, a equipe conseguiu criar experiências que parecessem locais: desde a formulação da mensagem até a estrutura visual dos produtos.

Um designer colombiano, que também é cliente do Nubank, disse a Ellen: “Parece que o aplicativo está falando comigo.” Esse tipo de conexão pessoal e intencional é o que continua destacando a empresa em um setor que muitas vezes parece frio, rígido e impessoal.

NuDS: 80% de adesão e um novo tema entregue em apenas um sprint

O NuDS, o design system do Nubank, serve como base para oferecer experiências consistentes e acessíveis no Brasil, México e Colômbia. Construído inteiramente no Figma, o NuDS começou como uma biblioteca minimalista, mas evoluiu para uma estrutura flexível e multirregional que hoje impulsiona desde atualizações diárias até lançamento em grande escala.

Com um visual limpo e acessível alinhado ao DNA do Nubank, o NuDS suporta mais de 100 componentes e modelos reutilizáveis. Isso inclui padrões localizados como cartões de crédito na posição vertical para o Brasil e versões horizontais para México e Colômbia. Com variáveis e modos do Figma, as equipes também gerenciam conteúdo multilíngue (português, espanhol e inglês) em um único arquivo, trocando de idioma com facilidade e sem duplicar trabalho de design.

À medida que a empresa expandiu, o alcance do design system também cresceu. Hoje, o NuDS comporta cerca de 320.000 linhas de código no Figma, abrangendo todos os componentes e versões de software, demonstrando profunda integração com os ecossistemas de engenharia e design do Nubank.

Para impulsionar a adoção em escala, a equipe criou um plugin nativo do Figma que verifica a conformidade com o NuDS nos arquivos. “O objetivo é oferecer aos designers uma maneira contextual de verificar quanto do fluxo usa o NuDS. Isso ajuda a detectar componentes obsoletos ou links ausentes cedo, antes do handoff à engenharia”, explica Zé Zorzan, Senior Product Designer no Nubank.

“Expondo os problemas diretamente no Figma, garantimos que a adoção do design system ocorra antes e não depois do fato”, complementa Zé.

A acessibilidade também é um alicerce do NuDS. Cada componente é pensado para ser compatível leitores de tela, ter redimensionamento responsivo de texto e contrastes de cor adequados. “A acessibilidade está desde o início. Faz parte dos comportamentos padrão, não é algo que se adiciona depois”, diz Zé.

Este compromisso com a acessibilidade foi central no recente lançamento da cor de marca atualizada para contas empresariais do Nubank. A equipe do NuDS colaborou estreitamente com times no Brasil e branding para garantir que a nova paleta atendesse padrões de acessibilidade e funcionasse em todas as interfaces.

Graças aos fundamentos do NuDS (tokens, criação de temas e ferramentas de governança), o novo tema foi implementado em apenas um sprint. As ilustrações foram atualizadas, elementos visuais foram ajustados, e o sistema conseguiu se adaptar rapidamente sem comprometer a entrega.

Padronizar mudanças como essas via NuDS liberou velocidade e flexibilidade em escala. Nos últimos cinco anos, o NuDS gerou economia significativa nas frentes de design e engenharia.

A adoção cresceu de forma constante junto com seu impacto. O NuDS agora está profundamente integrado ao stack de design e engenharia do Nubank. Com base em uma arquitetura de interface orientada por servidor, 80% das telas do app usam essa abordagem, muitas delas baseadas no NuDS Foundations (última versão do sistema, que padroniza tokens, temas, modos e análises). Uma auditoria recente mostrou que 80% das telas estão totalmente compatíveis com o NuDS. Internamente, a satisfação também aumentou: o NPS (Net Promoter Score) do NuDS dobrou em um ano.

Com o NuDS profundamente integrado em cada estágio do ciclo de vida de desenvolvimento de produto, o Nubank continua a escalar a qualidade do design com rapidez, garantindo que cada produto não seja apenas consistente e acessível, mas também projetado para se adaptar.

Projetando com confiança e controle com o Figma Enterprise

Em 2024, o Nubank fez upgrade para o plano Figma Enterprise para fortalecer duas áreas críticas: segurança e governança de design. Como instituição financeira submetida a protocolos rigorosos de compliance, a equipe precisava de controles avançados sobre o acesso e gerenciamento de arquivos numa organização de design distribuída.

Uma das mudanças mais significativas foi a implementação de acesso estruturado baseado em cargos, integrando com Okta, recurso disponível no Enterprise. Isso permitiu alinhar o acesso ao design com os protocolos de identidade e segurança da empresa, garantindo que apenas membros autorizados pudessem acessar projetos e protótipos sensíveis.

Embora o Figma já oferecesse colaboração por meio de permissões de visualização e comentários, o plano Enterprise trouxe controle administrativo mais robusto. Times passaram a gerenciar usuários em grande escala, atribuir papéis de forma mais precisa e restringir ações em arquivos por departamento, tudo mantendo o ecossistema de design flexível e fácil de usar.

Com centenas de arquivos ativos em movimento simultaneamente, a governança ficou mais gerenciável. Times introduziram capas padronizadas de arquivo no Figma para tornar os projetos mais navegáveis, mesmo sem regras fixas de nomenclatura.

Essa clareza organizacional viabilizou iniciativas estratégicas mais amplas, como o lançamento do modelo de Tela de Produto do Nubank.

Após auditar dezenas de telas entre produtos e mercados, a equipe do design system construiu uma estrutura flexível que incorpora visão geral do produto, conteúdo localizado, cópias regulatórias e padrões de UI, todos governados pelo design system NuDS.

Com o Figma Enterprise fornecendo a estrutura e os controles de acesso, a expectativa é que esse template ajude equipes no Brasil, México e Colômbia a projetar com mais rapidez, consistência e qualidade superior.

Um sistema preparado para o futuro

Enquanto continua refinando seus fluxos de trabalho, a equipe também busca otimizar a prototipagem e os testes com usuários com o Figma Make, uma ferramenta de design com tecnologia de IA. Durante anos, a equipe de design do Nubank utilizou uma variedade de ferramentas externas para simular interações, testar funcionalidades e validar ideias com os usuários. Mas nenhuma delas se encaixa perfeitamente.

Com o Figma Make em fase beta, a equipe enxerga uma oportunidade de consolidar mais etapas do seu fluxo de trabalho em uma única plataforma integrada. “Já testamos muitas ferramentas para prototipagem, e nenhuma funcionou bem. Se o Figma Make funcionar como esperamos, pode transformar como fazemos pesquisa e validação de ideias”, diz Ellen.

Juntas, essas iniciativas refletem a filosofia mais ampla do Nubank: construir produtos excelentes, se adaptar com frequência e investir intencionalmente em ferramentas que estejam preparadas para o que vem a seguir.