Variables ayuda a Adyen a simplificar su sistema de diseño usando Figma

Adyen opera a la vanguardia de la rápida evolución de la industria Fintech. La plataforma de tecnología financiera ofrece a los comerciantes pagos, datos y gestión financiera de extremo a extremo en una sola plataforma. Con Adyen teniendo control total sobre el flujo de pagos, los comerciantes no tienen que gestionar múltiples proveedores, sino que pueden conectarse a una sola plataforma: una situación beneficiosa para todos.

Adyen tiene como objetivo ofrecer el conjunto de portales fintech más centrado en el cliente y eficiente del mercado, con un alto valor para la experiencia de usuario. Por lo tanto, no sorprende que Adyen cuente con un equipo de diseño UX de 70 personas: 44 diseñadores de producto, 15 en investigación UX y 11 redactores UX.

Históricamente, mantener a todos alineados podría ser un desafío… usando herramientas de diseño anteriores, la empresa se enfrentó a procesos desarticulados y a flujos de trabajo engorrosos e ineficaces.

Luego, la empresa simplificó su sistema de diseño y procesos utilizando Figma y FigJam.

Cambiando a Figma

El equipo de diseño de Adyen identificó que necesitaban una base sólida para agilizar las operaciones de diseño y por esoconstruyó un nuevo sistema de diseño, llamado Bento, en Figma. Están en el proceso de cambiar todos los equipos a Bento, que presenta Fundamentos, Iconos, Componentes, Patrones, Utilidades y Archivos, desde el sistema de diseño propiedad de la comunidad que algunos equipos aún están utilizando.

Bento ha traído nuevos niveles de eficiencia y estructura a la forma en que el equipo de diseño de Adyen trabaja. Tomando como ejemplo Herramientas, aquí es donde mantienen los componentes del sistema de sistemas (SOS), utilizados para construir la documentación del sistema de diseño. "Todas las piezas se distribuyen a los equipos como bibliotecas y Figma hizo que fuera muy simple la transición entre cambios automáticos y actualizaciones en estilos/instancias de componentes", dice Luiza Breier, líder de diseño en Adyen, quien agrega que las bibliotecas de sistema de diseño están activadas predeterminado para todos los equipos.

Uno de los desafíos interesantes fue cómo habilitar el soporte de múltiples temas para sus equipos. Resolvieron esto creando un sistema de colores con múltiples capas.

La capa principal tiene todas las definiciones de color que no están disponibles para diseñadores o ingenieros, pero sirven como una paleta de selección para el equipo del sistema de diseño. Sobre la capa principal, construyeron una capa semántica que define los colores por su función en la IU en lugar de por su tono.

La capa semántica está disponible para que los diseñadores e ingenieros la utilicen en su trabajo de diseño y creación de productos. Esta capa permite a los diseñadores crear productos teniendo en cuenta sus funciones.

Los colores semánticamente impulsados dentro de los diseños funcionan en diferentes modos de color (claro/oscuro). Originalmente, Adyen usaba estilos de color para esto, pero no quería abrumar a sus diseñadores con colores para ambos modos, claro y oscuro, por lo que solo hicieron los colores del modo claro predeterminado. Después de la introducción de Variables, Figma resolvió este problema de inmediato.

Adyen migró colores, espaciados y radios de bordes a Variables y actualizó todos los componentes de Figma con estas variables.

“Ahora, con Variables, cambiar un tema solo te llevará unos pocos clics y está completamente automatizado. Los diseñadores pueden diseñar en modo claro, luego cambiar a modo oscuro para asegurarse de que los colores semánticos que seleccionaron sean correctos y funcionen como se espera en modo oscuro”, dice Sergii Polkovnikov, diseñador de producto en el equipo de Bento.

Además de usar Figma para acelerar procesos, Luiza y su equipo trabajan arduamente para comprender cómo se está utilizando el sistema de diseño. Los diseñadores utilizan los análisis del sistema de diseño en Figma Empresa para rastrear el uso, y también han creado su propio panel utilizando la API de Figma.

“Esto significa que podemos rastrear todas las importaciones de componentes usados en Figma, cuántas instancias, qué equipos están usando qué, etc.”, dice ella. “Significa que podemos ver cuando la gente desvincula un componente: tenemos un enlace que lleva directamente al archivo de Figma, donde el componente desvinculado está resaltado”.

Seguimiento de las cosas de esta manera ayuda al equipo de sistema de diseño a entender cómo van las migraciones y les da visibilidad sobre qué diseñador ha desanclado un componente para que puedan hablar con ellos y entender el caso práctico.

FigJam agiliza la planificación estratégica

La colaboración en el flujo de trabajo también ha cambiado de otras maneras. El equipo de sistemas de diseño en Adyen utiliza FigJam como una herramienta para la planificación estratégica y como una plataforma para recursos compartidos y conocimiento. Ha mejorado la colaboración visual en algunas áreas.

Utilizan FigJam para mantener su visión de producto actualizada para alineación dentro y fuera del equipo, desde brainstorming en línea hasta ayudar a las partes interesadas en otros equipos, como ingeniería, a reflexionar sobre sus prioridades.

FigJam también se ha vuelto crucial para las retrospecciones del equipo y la planificación trimestral, ayudando a los diseñadores a reflexionar sobre cómo colaboran y a decidir sobre puntos de acción concretos para mejorar su forma de trabajar.

Mejoras entre compañías con Figma

La combinación de Figma y FigJam ha mejorado fundamentalmente la forma en que Adyen utiliza su sistema de diseño al reunir los recursos en una sola plataforma, creando una experiencia fluida y añadiendo altos niveles de colaboración.

La empresa ahora puede controlar mejor los costes, con una gestión de permisos de edición más potente, asignando propiedad a través de departamentos y optimizando su uso de puestos.

Los diseñadores también están ahorrando tiempo gracias a unos comentarios más rápidos, reutilizando el trabajo con mayor facilidad, diseñando y luego realizando cambios rápidos utilizando Variables, y utilizando la automatización de la API de Figma para optimizar los flujos del sistema de diseño.

Pero una de las mejores cosas de pasarse a Figma, dice la empresa, es cómo ha ayudado a facilitar la colaboración y el intercambio de archivos en un equipo que ha crecido de ocho diseñadores a 70 personas.

“Al estar basado en la nube, Figma les permite colaborar en toda la empresa a través de diferentes departamentos para mostrar el trabajo, obtener comentarios e información rápidamente, y obtener una ventaja en la industria fintech de rápido movimiento”, dice Luiza.