Comment Sorare a mis à l’échelle sa production d’assets grâce aux variables de Figma

Confrontée à un besoin croissant d’assets, l’équipe marketing de Sorare a créé un système basé sur les variables qui accélère considérablement leur production. Passez dans les coulisses de sa mise en œuvre et découvrez son impact sur la productivité et le travail des équipes.

Lancé en 2018 par Nicolas Julia et Adrien Montfort, Sorare est un jeu de simulation sportive dans lequel les joueurs gèrent une équipe virtuelle via l’achat, la vente et l’échange de cartes de joueurs numériques. Le jeu utilise la technologie blockchain basée sur Ethereum et permet à ses participants de s’affronter via des équipes de football, de basket-ball et de baseball. Il compte aujourd’hui plus de cinq millions d’utilisateurs.

Le grand nombre de ligues, de joueurs et de catégories implique la production d’une quantité exceptionnelle de cartes. Les besoins en assets marketing sont également importants, et impliquaient jusqu’à récemment une production lente et fastidieuse, occupant les designers pendant plusieurs semaines d’intense travail manuel pour décliner les campagnes sur toutes les ligues.

Accélérer la production des cartes avec Figma

Initialement, l’équipe créait les cartes de joueurs à l’aide d’un outil tiers. Aujourd’hui, Figma sert de plateforme pour assembler tous les éléments de la carte. Le travail créatif et technique est considérablement simplifié et accéléré : Figma est jugé facile à utiliser, fluide et sans ralentissements, il améliore le dialogue avec les développeurs et permet d’obtenir rapidement la validation des designs. « En fait, Figma permet de réunir toutes les personnes qui participent à la création des cartes. C’est vraiment parfait pour collaborer sur nos designs » explique Philip de Canaga, senior creative lead chez Sorare

Depuis l’adoption de Figma par Sorare, les équipes design et marketing partagent une librairie de composants qui permet de mettre automatiquement à jour les icônes, les logos et divers éléments constituant la base graphique de ces cartes, ce qui a quadruplé leur vitesse de production. Lorsque l’équipe produit met à jour un composant ou une icône au sein d’une librairie, l’update est fait automatiquement, offrant ainsi une cohérence entre le produit et les assets marketing. Pour Philip de Canaga, ce système de composants a permis de quadrupler la production des cartes et de fluidifier le travail de façon significative.

Du design au code, avec Dev Mode

Une fois les designs de cartes validés, les développeurs se servent de Dev Mode pour importer automatiquement les caractéristiques comme les espacements, les box et les layers, qui déterminent la composition de chaque carte. La fonctionnalité leur permet de trouver facilement les bonnes informations sans avoir besoin de convertir les mesures, et de partager un langage commun avec les designers.

Cette étape a permis aux développeurs de décortiquer en profondeur la construction des cartes. Leur nombre augmentant, ils ont fini par créer un système d’export SVG basé sur le fichier Figma, qui permet de relier les masters aux différents contenus que nécessite chaque carte, accélérant encore leur production et facilitant notamment les changements de logos, de textes et d’icônes.

Un Asset System pour démultiplier la production

Bien que Figma ait considérablement accéléré la production des assets, leur nombre amenait régulièrement à une surcharge de travail pour l’équipe marketing. Pour y remédier, Sorare a recruté un designer ayant déjà une solide expérience des variables Figma. Nabil Amara, aujourd’hui creative marketing designer, réalise les visuels destinés aux réseaux sociaux et les assets de campagne, notamment pour les Special Edition, des cartes en série limitée prisées des joueurs. En parallèle de ce travail de création graphique, il a également mis en place un Asset System, qui permet de donner la main à des chefs de projet pour la production de supports visuels en masse via les variables.

Contrôle et flexibilité

La mise en place d’un Asset System pour une campagne spécifique se fait en quelques étapes :

• Brief par le marketing
• Création du key visuel et validation
• Définition et naming précis des variables
• Création des différents formats d’asset
• Phase d’itération et de tests
• Transfert au chef de projet marketing qui duplique le modèle et configure les variables, ajoutant au besoin de nouveaux modes pour différents clubs
• Déclinaison, recettage et ajustements à la main pour assurer la qualité des visuels

En amont, les utilisateurs de l’Asset System ont été formés à la manipulation des variables, et ils disposent d’un tutoriel pour décliner les visuels. Pour Bastien Revel, strategic partnership manager, « cela permet de rendre Figma accessible aux chefs de projet et aux néophytes, et de faire gagner du temps à tout le monde, en particulier à l’équipe marketing, qui dispose désormais des éléments nécessaires pour produire les assets une fois les templates préparés. » Et grâce à la mise à jour automatique des composants, tous les éléments du produit jusqu’au marketing sont en phase. Le résultat ? Un flow aligné de A à Z.

Selon Nabil, les avantages sont nombreux : « Avec l’Asset System, les équipes gagnent en temps et en qualité de vie, le travail est plus simple et agréable, et aboutit à un résultat plus qualitatif, car les variables diminuent la marge d’erreur. » Le gain est également financier, puisque la production via l’Asset System requiert moins de personnel, le temps de travail ayant été divisé par trois. Cela a également permis à Sorare de maximiser l’utilisation des droits négociés avec les ligues sportives, et du même coup, le nombre d’assets potentiels. En effet, au lieu de trois semaines de production, il suffit aujourd’hui d’une semaine à Nabil pour créer une campagne et son Asset System, et d'une petite heure au marketing pour produire un nouveau set d'assets (ligue/club) en ajoutant un mode de variables avec de nouveaux textes, couleurs, logos et cartes sur Figma.

Pour en savoir plus, regardez la vidéo de l’intervention de Nabil lors de l’événement Friends of Figma du 20/02/2025.

D’autres évolutions à venir

Pour aller plus loin, les équipes de Sorare travaillent à la création d’un plugin pour intégrer leur API à Figma afin d’appeler automatiquement les cartes lors de la création des assets. De plus, l’équipe marketing envisage la création d’un Content System adaptable et global pour la marque, dédié à la création de contenus social media organiques et des meilleures cartes du moment. En reliant ce Content System à la bibliothèque du Design System, le marketing disposera d’une version dédiée à l’équipe produit. Il constituera une version plus vivante, modulable et adaptable de l’Asset System existant. De quoi rendre la production encore plus sereine et rapide pour les équipes de Sorare !

Aller plus loin avec Figma Buzz

Pour Nabil Amara, Figma Buzz offre aujourd'hui des possibilités de production graphique massive et facilitée. L'outil présente de nombreuses similarités avec l'Asset System de Sorare, avec notamment la production facile et automatique d'assets à partir d'un tableau (variables vs .csv), ainsi que la prise en main simplifiée des différents éléments du design (textes, couleurs, variantes, etc.) via une interface accessible aux néophytes. Les équipes de Sorare sont actuellement en phase d'exploration de l'outil, dans l'objectif d'industrialiser la production de différents assets.