Cómo el sistema de diseño de Nubank brindó experiencias accesibles y localizadas con Figma

Resumen:

Nubank, uno de los bancos digitales más grandes de Latinoamérica, ha forjado su reputación desafiando las normas de los servicios financieros. Durante más de una década, su objetivo ha sido claro: empoderar a las personas haciendo que los servicios financieros sean sencillos, transparentes y humanos.

Nubank, que presta sus servicios a más de 118 millones de clientes en Brasil, México y Colombia, recurrió a Figma para mantener la consistencia del diseño y escalar sus operaciones en diferentes mercados. Al crear NuDS, su sistema de diseño, completamente en Figma, Nubank ha brindado experiencias más accesibles y localizadas mediante tokens y tematización.

Desafío: Diseñar con rapidez, escala y profundidad regional

A medida que Nubank se expandía por Brasil, México y Colombia, sus operaciones de diseño se volvían cada vez más complejas, ya que cada mercado conllevaba requisitos regulatorios, contextos culturales y expectativas de usuario diferentes.

El diseño seguía siendo un pilar estratégico, pero mantener la calidad y la cohesión a escala se volvía más difícil. “No queríamos ser solo otro banco con una UX un poco mejor. Nuestra promesa es desarrollar productos que sean fundamentalmente diferentes”, afirma Ellen Kiss, directora y líder de Experiencia en Diseño en Nubank.

Antes de Figma, el equipo trabajaba con una combinación de otras dos plataformas diferentes. Esta configuración fragmentada hacía que el control de versiones fuera difícil, la colaboración, inconsistente y la alineación entre equipos, casi imposible, especialmente para una institución financiera que afronta requisitos regulatorios estrictos en diferentes mercados.

Para seguir el ritmo del crecimiento y cumplir con su misión de hacer que las finanzas sean más humanas, Nubank sabía que necesitaba una plataforma que pudiera unificar sus herramientas, su equipo y sus estándares de diseño en todos los mercados a los que servía.

Solución: Construir una infraestructura de diseño para la excelencia y la escala

Figma proporcionó a más de 200 diseñadores de Nubank un espacio de trabajo compartido en tiempo real en tres países. Diseñadores de contenido, investigadores, ingenieros y administradores de proyectos podrían cocrear en un solo entorno, lo que aportaría más agilidad a su trabajo.

La localización se convirtió en una ventaja competitiva rápidamente. Con diseñadores integrados en cada mercado, el equipo pudo crear experiencias que se sintieran locales por diseño, desde cómo se redactaba un mensaje hasta cómo se estructuraban los productos visualmente.

Un diseñador colombiano, quien también es cliente de Nubank, le comentó a Ellen: “Es como si la app me estuviera hablando a mí”. Ese tipo de conexión personal e intencional es lo que sigue diferenciando a la empresa en una industria que a menudo se percibe como fría, rígida e impersonal.

NuDS: Un 80 % de adopción y un nuevo tema implementado en un solo sprint

El sistema de diseño de Nubank, NuDS, es la base para brindar experiencias consistentes y accesibles en Brasil, México y Colombia. Desarrollado completamente en Figma, NuDS comenzó como una biblioteca minimalista, pero se ha convertido en un marco flexible y multimercado que ahora impulsa todo, desde actualizaciones diarias de productos hasta lanzamientos regionales a gran escala.

Diseñado para reflejar la estética limpia y accesible de Nubank, NuDS admite más de 100 componentes reutilizables y plantillas de pantallas. Estos incluyen patrones localizados, como tarjetas de crédito verticales para Brasil y versiones horizontales para México y Colombia. Con las variables y los modos de Figma, los equipos también pueden gestionar contenido multilingüe en un solo archivo y alternar fácilmente entre portugués, español e inglés sin duplicar el trabajo de diseño.

A medida que la empresa se expandía, también crecía la presencia del sistema de diseño. Hoy, NuDS respalda alrededor de 320 000 líneas de código en Figma de todos los componentes para varias versiones de software, lo que demuestra su alcance y profundidad dentro de los ecosistemas de ingeniería y diseño de Nubank.

Para facilitar la adopción a gran escala, el equipo desarrolló un plugin nativo de Figma que verifica que los diseños cumplan con lo establecido por NuDS. “El objetivo del plugin es dar a los diseñadores una forma contextual de verificar cuánto de su flujo sigue las pautas de NuDS. Los ayuda a detectar componentes obsoletos o enlaces faltantes de manera temprana, antes de entregar algo al equipo de ingeniería”, dice Zé Zorzan, diseñador de producto sénior en Nubank.

“Al identificar los problemas en Figma, nos aseguramos de que la adopción del sistema de diseño ocurra de manera anticipada, no después del hecho”, agrega Zé.

La accesibilidad también es una parte fundamental de NuDS. Cada componente está diseñado para admitir lectores de pantalla, cambio de tamaño de texto adaptable y estándares de contraste de color. “La accesibilidad es algo que consideramos desde el principio. Está en los comportamientos predeterminados, no es algo que se agrega después”, explica Zé.

Este compromiso con la accesibilidad fue esencial en el reciente lanzamiento del nuevo color de la marca Nubank para el segmento de cuentas empresariales. El equipo de NuDS colaboró estrechamente con los equipos de Brasil y de toda la marca para asegurar que la nueva paleta cumpliera con los estándares de accesibilidad y funcionara en todas las superficies.

Gracias a los fundamentos de NuDS (tokens, temas y herramientas de gobernanza), el tema actualizado se implementó en solo un sprint. Se renovaron las ilustraciones, se modificaron los elementos visuales y el sistema pudo adaptarse rápidamente sin interrumpir la entrega.

Estandarizar cambios como estos a través de NuDS ofrece velocidad y flexibilidad a escala. En los últimos cinco años, NuDS ha contribuido a generar ahorros en diseño e ingeniería.

La adopción ha aumentado de manera constante junto con su impacto. Ahora, NuDS está profundamente integrado en el stack de diseño e ingeniería de Nubank. Con una arquitectura de UI impulsada por servidor, el 80 % de las pantallas de la app usan este enfoque, la mayoría de ellas impulsadas por NuDS Foundations, la última versión del sistema que estandariza tokens, temas, modos y analítica. Una auditoría reciente mostró que el 80 % de las pantallas de productos cumplen completamente con las pautas de NuDS. A nivel interno, la satisfacción también va en aumento, como lo demuestra el NPS (Net Promoter Score) de NuDS, que se ha duplicado en un año.

Con NuDS profundamente integrado en cada etapa del ciclo de desarrollo de productos, Nubank continúa escalando la calidad del diseño con rapidez, lo que asegura que cada producto no solo sea consistente y accesible, sino que también esté diseñado para adaptarse.

Diseñar con confianza y control con Figma Empresa

En 2024, Nubank se pasó a Figma Empresa para fortalecer dos áreas críticas: la seguridad y la gobernanza del diseño. Como institución financiera que opera bajo estrictos estándares de cumplimiento, el equipo necesitaba controles más avanzados sobre cómo se accedía a los archivos y cómo se gestionaban estos en una organización de diseño distribuida y en expansión.

Uno de los mayores cambios fue la capacidad de implementar acceso estructurado y basado en roles mediante la integración de Okta, una función disponible a través de Figma Empresa. Esto permitió a Nubank alinear el acceso al diseño con los protocolos de identidad y seguridad de toda la empresa, lo que garantizó que solo los miembros del equipo autorizados pudieran acceder a proyectos y prototipos confidenciales.

Aunque Figma ya permitía una amplia colaboración mediante permisos para ver y comentar, el plan Empresa otorgó a Nubank un control administrativo más robusto. Ahora, los equipos pueden gestionar usuarios a escala, asignar roles con mayor precisión y restringir las acciones de archivos en todos los departamentos; todo mientras mantienen el entorno de diseño flexible y fácil de navegar.

Con cientos de archivos activos y en movimiento constantemente, la gobernanza también se volvió más manejable. Los equipos introdujeron formatos estandarizados de portada de archivos de Figma para navegar los proyectos con más facilidad, incluso sin tener convenciones específicas de nombres de archivos.

Esta claridad organizacional dio lugar a iniciativas estratégicas más amplias, como el lanzamiento de la plantilla de pantalla de producto de Nubank.

Después de auditar decenas de pantallas en diferentes productos y mercados, el equipo del sistema de diseño creó un marco flexible que incorpora resúmenes de productos, contenido localizado, texto de cumplimiento y patrones de UI; todo regido por el sistema de diseño NuDS.

Con el apoyo de la estructura y los controles de acceso de Figma Empresa para este lanzamiento, se espera que la plantilla ayude a los equipos de Brasil, México y Colombia a diseñar de manera más rápida y consistente y con mayor calidad.

Un sistema diseñado para lo que viene

A medida que el equipo sigue refinando sus flujos de trabajo, también busca agilizar el prototipado y las pruebas de usuario con Figma Make, una herramienta de diseño impulsada por IA. Durante años, el equipo de diseño de Nubank ha utilizado una combinación de herramientas externas para simular interacciones, probar características y validar ideas con los usuarios, pero ninguna cerraba del todo.

Con Figma Make ya disponible en beta, el equipo ve una oportunidad para consolidar más de su flujo de trabajo dentro de una sola plataforma integrada. “Hemos probado muchas herramientas de prototipado, pero ninguna cerraba del todo. Si Figma Make funciona como esperamos, podría cambiar nuestra manera de investigar y validar ideas”, comenta Ellen.

Juntos, estos esfuerzos reflejan una filosofía más amplia en Nubank: crear productos excepcionales, adaptarnos con frecuencia e invertir intencionalmente en herramientas preparadas para lo que viene.