Les variables de Figma aident Adyen à rationaliser son design system

Adyen est à la pointe de la Fintech, un secteur à l'évolution rapide. Cette plateforme de technologie financière offre aux commerçants une gestion de bout en bout de leurs paiements, de leurs données et de leur gestion financière au sein d'une plateforme unique. Adyen ayant la pleine propriété du flux de paiement, les commerçants n'ont pas à gérer plusieurs fournisseurs, mais peuvent se connecter à une plateforme unique – une situation gagnant-gagnant.

Adyen vise à offrir l'ensemble de portails fintech le plus orienté client et le plus efficace du marché, en accordant une grande importance à l'expérience utilisateur. Il n'est donc pas étonnant qu'Adyen dispose d'une équipe de design UX de 70 personnes : 44 product designers, 15 UX researchers et 11 UX writers.

Jusqu'à présent, il était difficile de mettre tout le monde sur la même longueur d’onde... Avec les outils de design précédents, l'entreprise était confrontée à des processus disjoints et à des workflows lourds et inefficaces.

L'entreprise a ensuite rationalisé son design system et ses processus en utilisant Figma et FigJam.

Passer à Figma

L'équipe design d'Adyen a identifié qu'elle avait besoin d'une base solide pour rationaliser les opérations de design, et a doncconstruit un nouveau design system– appelé Bento – dans Figma. Toutes les équipes sont en train de passer à Bento (qui comprend les principes fondateurs, les icônes, les composants, les modèles, les utilitaires et les archives) à partir du design system appartenant à la communauté que certaines équipes utilisent encore.

Bento a permis à l’équipe design d’Adyen de travailler de manière plus efficace et structurée. Si l'on prend l'exemple d'Utilities, c'est là que sont conservés les composants du système de système (SOS), utilisés pour construire la documentation du design system. « Tous les éléments sont distribués aux équipes sous forme de bibliothèques et Figma a simplifié la transmission des modifications et des mises à jour aux instances de styles/composants », explique Luiza Breier, design lead chez Adyen. Elle ajoute que les bibliothèques du design system sont activées par défaut pour toutes les équipes.

L'un des challenges intéressants était de savoir comment permettre à leurs équipes de bénéficier d'un support multi-thématique. Ils ont résolu ce problème en créant un système de couleurs à plusieurs couches.

La couche centrale contient toutes les définitions de couleurs qui ne sont pas disponibles pour les designers ou les développeurs, mais qui servent de palette de sélection pour l'équipe du design system. Au-dessus de la couche centrale, ils ont construit une couche sémantique qui définit les couleurs en fonction de leur rôle dans l'interface utilisateur plutôt qu'en fonction de leur teinte.

La couche sémantique est mise à la disposition des designers et des développeurs pour qu'ils l'utilisent dans leur travail de création et de construction de produits. Cette couche permet aux designers de concevoir des produits en tenant compte des rôles.

Les teintes déterminées par la sémantique dans les designs fonctionnent dans différents modes de couleur (clair/foncé). À l'origine, Adyen utilisait des styles de couleur pour cela, mais ne voulait pas submerger ses designers avec des couleurs pour les modes clair et foncé, et ne proposait donc que des couleurs pour le mode clair par défaut. Avec l'introduction des variables, ce problème a été résolu par Figma dès le départ.

Adyen a transféré les couleurs, l'espacement et les rayons des bordures dans les variables et a mis à jour tous les composants Figma avec ces variables.

« Désormais, avec les variables, changer de thème ne prend que quelques clics et est entièrement automatisé. Les designers peuvent concevoir en mode clair, puis passer en mode foncé pour s'assurer que les couleurs sémantiques qu'ils ont sélectionnées sont correctes et fonctionnent comme prévu en mode foncé », explique Sergii Polkovnikov, product designer au sein de l'équipe Bento.

En plus d'utiliser Figma pour accélérer les processus, Luiza et son équipe s'efforcent de comprendre comment le design system est utilisé. Les designers utilisent l'analyse des design system dans Figma Enterprise pour en suivre l'utilisation, et ont également créé leur propre tableau de bord à l'aide de l'API Figma.

« Cela signifie que nous pouvons suivre toutes les importations de composants utilisés dans Figma, combien d'instances, quelles équipes utilisent quoi, etc. Nous pouvons voir quand les gens détachent un composant – nous avons un lien qui va directement au fichier Figma, où le composant détaché est mis en évidence ».

Ce suivi permet à l'équipe chargée des design systems de comprendre le déroulement des migrations et de savoir quel designer a détaché un composant, afin de pouvoir en discuter avec lui et de comprendre le cas d’usage.

FigJam rationalise la planification stratégique

La collaboration en matière de workflow a connu d’autres changements. L'équipe chargée des design systems d'Adyen utilise FigJam comme outil de planification stratégique et comme plateforme de partage des ressources et des connaissances. La collaboration visuelle en a été améliorée à plusieurs niveaux.

L’équipe chargée du design system utilise FigJam pour maintenir sa vision du produit à jour et pour l’alignement interne et externe, depuis le brainstorming en ligne jusqu'à l'aide apportée sur la priorisation aux parties prenantes d'autres équipes, telle que celle des développeurs.

FigJam est également devenu essentiel pour les rétrospectives et la planification trimestrielle, en aidant les designers à réfléchir à la manière dont ils collaborent et à mettre en place des actions concrètes pour améliorer leur façon de travailler.

Améliorations interentreprises avec Figma

La combinaison de Figma et de FigJam a fondamentalement amélioré la façon dont Adyen utilise son design system en réunissant les assets au sein d’une seule plateforme, en créant une expérience homogène et en permettant une collaboration encore plus étroite.

L'entreprise peut désormais mieux contrôler les coûts, grâce à une gestion plus puissante des autorisations d'édition, à l'attribution de la propriété entre les départements et à l'optimisation de l'utilisation des forfaits.

Les designers gagnent également du temps grâce à des retours plus rapides, à une réutilisation plus facile du travail, à des modifications rapides de leurs designs avec les variables, et à l'automatisation de l'API Figma pour optimiser les flux du design system.

Mais selon Adyen, l'un des aspects les plus intéressants du passage à Figma est la façon dont il a facilité la collaboration et le partage de fichiers au sein d'une équipe qui est passée de huit designers à 70 personnes.

« Comme tout se trouve dans le cloud, Figma nous permet de collaborer à l'échelle de l'entreprise et entre les différents départements pour présenter le travail, obtenir rapidement des opinions et des commentaires, et avoir un coup d’avance dans la Fintech, un secteur qui évolue rapidement », explique Luiza.