Las variables ayudan a Adyen a optimizar su sistema de diseño con Figma

Adyen opera a la vanguardia del sector Fintech, que está evolucionando rápidamente. La plataforma de tecnología financiera ofrece a los comerciantes pagos integrales, datos y gestión financiera en una única plataforma. Dado que Adyen tiene el control total sobre el flujo de pagos, los comerciantes no tienen que gestionar múltiples proveedores, sino que pueden conectarse a una única plataforma, lo que beneficia a todas las partes.

Adyen tiene como objetivo ofrecer el conjunto más eficiente y enfocado en el cliente de portales fintech en el mercado, valorando altamente la experiencia de usuario. Así que no es de extrañar que Adyen tenga 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 podía ser un desafío. Con las herramientas de diseño anteriores, la empresa se enfrentaba a procesos desconectados y flujos de trabajo engorrosos e ineficientes.

Entonces, la empresa optimizó su sistema y sus procesos de diseño utilizando Figma y FigJam.

El cambio a Figma

El equipo de diseño de Adyen identificó que necesitaba una base sólida para optimizar las operaciones de diseño, por lo quecreó un nuevo sistema de diseño, llamado Bento, en Figma. Actualmente, están en proceso de cambiar todos los equipos a Bento, que incluye Fundamentos, Íconos, Componentes, Patrones, Utilidades y Archivos, desde el sistema de diseño comunitario que algunos equipos aún utilizan.

Bento ha aportado nuevos niveles de eficiencia y estructura a la forma en que el equipo de diseño de Adyen trabaja. Tomando como ejemplo Utilidades, aquí es donde guardan los componentes del sistema del sistema (SOS), utilizados para crear la documentación del sistema de diseño. "Todas las piezas se distribuyen a los equipos en forma de bibliotecas y Figma facilitó mucho la aplicación de cambios y actualizaciones en los estilos y las instancias de los componentes", afirma Luiza Breier, directora de diseño de Adyen, quien agrega que las bibliotecas del sistema de diseño están activadas de forma predeterminada para todos los equipos.

Uno de los desafíos más interesantes fue cómo habilitar el soporte multitemático para sus equipos. Lo resolvieron creando un sistema de colores multicapa.

La capa principal contiene todas las definiciones de color que no están disponibles para los diseñadores o ingenieros, pero que sirven como paleta de selección para el equipo del sistema de diseño. Sobre la capa principal, crearon una capa semántica en la que los colores están definidos por su rol en la UI, 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 roles.

Los colores semánticos dentro de los diseños funcionan en diferentes modos de color (claro/oscuro). Originalmente, Adyen utilizaba estilos de color para esto, pero no quería abrumar a sus diseñadores con colores para los modos claro y oscuro, por lo que solo creó colores para el modo claro de forma predeterminada. Tras la introducción de Variables, Figma resolvió este problema de forma inmediata.

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

"Ahora, con Variables, cambiar un tema solo requiere unos pocos clics y está totalmente automatizado. Los diseñadores pueden diseñar en modo claro y luego cambiar al modo oscuro para asegurarse de que los colores semánticos que han seleccionado son correctos y funcionan como se espera en el modo oscuro", afirma Sergii Polkovnikov, diseñador de productos del equipo Bento.

Además de utilizar Figma para acelerar los procesos, Luiza y su equipo se esfuerzan por comprender cómo se utiliza el sistema de diseño. Los diseñadores utilizan la analítica del sistema de diseño de Figma Empresa para realizar un seguimiento del uso y también han creado su propio panel utilizando la API de Figma.

"Esto significa que podemos realizar un seguimiento de todas las importaciones de componentes utilizados en Figma, cuántas instancias hay, qué equipos están utilizando qué, entre otros", explica. "Significa que podemos ver cuándo la gente separa un componente: tenemos un enlace que lleva directamente al archivo de Figma, donde se resalta el componente separado".

Hacer un seguimiento de esta manera ayuda al equipo de sistemas de diseño a comprender cómo van las migraciones y les da visibilidad sobre qué diseñador ha separado un componente, para que puedan hablar con él y comprender el caso de uso.

FigJam optimiza la planificación estratégica

La colaboración en los flujos de trabajo también ha cambiado en otros aspectos. El equipo de sistemas de diseño de Adyen utiliza FigJam como herramienta para la planificación estratégica y como plataforma para compartir recursos y conocimientos. Ha mejorado la colaboración visual en varias áreas.

Utilizan FigJam para mantener actualizada la visión del producto y garantizar la alineación dentro y fuera del equipo, desde la lluvia de ideas en línea hasta ayudar a las partes interesadas de otros equipos, como el de ingeniería, a revisar sus prioridades.

FigJam también se ha vuelto crucial para las retrospectivas del equipo y la planificación trimestral, ya que ayuda a los diseñadores a reflexionar sobre cómo colaboran y a decidir medidas concretas para mejorar su forma de trabajar.

Mejoras en toda la empresa con Figma

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

Ahora la empresa puede controlar mejor los costos, con una gestión más eficaz de los permisos de edición, la asignación de la propiedad entre departamentos y la optimización del uso de los puestos.

Los diseñadores también ahorran tiempo gracias a un feedback más rápido, a la reutilización más sencilla del trabajo, al diseño y la realización de cambios rápidos mediante Variables y al uso de 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, según la empresa, es cómo ha ayudado a facilitar la colaboración y el intercambio de archivos en un equipo que ha pasado de ocho diseñadores a 70 personas.

"Al estar basado en la nube, Figma les permite colaborar en toda la empresa entre diferentes departamentos para mostrar su trabajo, obtener comentarios y feedback rápidamente y obtener una ventaja en el dinámico sector de la tecnología financiera", afirma Luiza.