Six équipes, six manières d'exploiter les calques de code
Les calques de code sont désormais en phase bêta ouverte, et vous pouvez intégrer du code au canvas. Voici comment six équipes utilisent cette option pour expérimenter, harmoniser les points de vue des parties prenantes et gagner en rapidité.
Partager Six équipes, six manières d'exploiter les calques de code
Lorsque nous avons avons intégré le code au canvas, nous avions hâte de voir comment les équipes allaient créer visuellement, donner forme à leurs idées ensemble et repousser les limites du possible. Bon nombre d’entre elles utilisent déjà des calques de code pour explorer des idées fondées sur le code directement sur le canvas et passer plus rapidement du design au code. Qu'il s'agisse de tester une micro-interaction ou de réfléchir à un flux complet, les équipes, de Dell à Cox Automotive, vous proposent un point de départ.
Superside : Créer des interactions complexes à partir de designs statiques
Superside est un partenaire créatif au service de marques internationales, et Leonardo Rica, responsable du design d'animation, souhaitait explorer de nouvelles possibilités en matière d’animation interactive à l’aide de calques de code. Dans le cadre d’un projet pilote, Leonardo a développé le concept d’un porte-cartes interactif permettant aux utilisateurs de faire défiler une pile de cartes, d’en sélectionner une en appuyant dessus pour la mettre en avant, puis de la retourner pour en consulter les détails. Leonardo a conçu les frames statiques dans Figma, a demandé à agent Figma de transformer les frames en un calque de code, puis a ajouté une animation au calque de code grâce à des prompts. Il a inclus des captures d'écran de référence et des valeurs exactes pour la position, la taille et le mouvement de ressort de chaque carte. « Les calques de code fonctionnent mieux si je leur fournis des chiffres précis », explique Leonardo. Le résultat offre un niveau d’interaction qui, selon lui, serait pratiquement impossible à réaliser avec un prototype traditionnel.
Au lieu de tout générer d'un coup, Leonardo a procédé par étapes. « J'ai d'abord mis au point le défilement, puis j'ai ajouté la fonction permettant d'appuyer sur l'élément et de le retourner sans perturber ce qui fonctionnait déjà », explique-t-il. À un moment donné, une carte qui glissait pour rejoindre la pile s’est affichée brièvement devant les cartes qui auraient dû se trouver au-dessus. Leonardo a décrit la cause dans un seul prompt précis, et l'agent Figma l'a corrigée « comme par magie ». Il prévoit que des calques de code alimenteront désormais des systèmes d’animation interactifs pour les marques, allant des comportements de défilement et de clic aux moments clés de l’UI des produits, que les clients pourront découvrir avant même de passer au développement.
Conseils de Leonardo concernant les prompts
→ Attribuez des numéros fixes aux calques de code : position exacte, taille et valeurs de ressort
→ Ajoutez des captures d'écran de référence
→ Procédez par étapes. Mettez d'abord au point le défilement, puis ajoutez les fonctions permettant d'appuyer sur l'élément et de le retourner.
→ Lorsqu’un problème survient, décrivez la cause en un seul prompt précis.
Dell : Comparer des alternatives du projet côte à côte
Miguel Wermuth, designer produit chez Dell, travaille sur l'expérience du compte client tant pour les entreprises que pour les acheteurs de dell.com, sur mobile, tablette et bureau. Depuis que l'équipe des design systems de Dell mis à disposition ses composants React codés dans Figma, Miguel crée ses calques de code à partir des mêmes composants que ceux utilisés par les développeurs. Les membres de l’équipe disposent ainsi d’une représentation plus fidèle de l’aspect et du comportement d’un projet de design dans le produit final. Miguel utilise les calques de code pour intégrer des expériences d’IA conversationnelle dans le canvas : une partie prenante peut poser une question et le prototype répond en affichant l’écran approprié. « La possibilité pour une partie prenante de taper effectivement du texte dans un champ de saisie ouvre la voie à un niveau supérieur de prototypage dont nous ne disposions pas auparavant », explique-t-il.
Une fois que les autres designers approuvent un flux, Miguel le développe en calques de code pour obtenir l'approbation des partenaires transversaux, qui considèrent un prototype fonctionnel plus facile à suivre qu'une série d'écrans statiques. Sous forme de modifications, il duplique les calques de code pour conserver les versions côte à côte, ce qui facilite le choix entre les alternatives plutôt que de devoir parcourir l’historique des versions. « C'est comme si vous les regardiez sur un mur, vous regardez la version A puis la version B », dit Miguel. Le prototype fonctionnel fait également forte impression lors des cycles d'examen : « Lorsque je le montre aux product managers et aux parties prenantes de l'entreprise, nous obtenons cet impact visuel. C'est extrêmement efficace. »
« Grâce aux calques de code, je peux travailler sur du code tout en concevant sur le canvas. Cette interaction plus fluide entre le design et le code est vraiment très puissante. »
Cox Automotive : Réaliser un prototype 10 fois plus rapidement
Cox Automotive, qui fait partie de Cox Enterprises, produit VinSolutions, un logiciel de gestion de la relation client (CRM) destiné aux concessionnaires automobiles. Lindsay Brechler, product manager senior, intègre l'IA dans ces workflows, notamment avec l'assistant de contact virtuel, un agent que l'équipe a créé et qui peut envoyer des e-mails et des SMS aux clients pour le compte du concessionnaire. Afin de rallier les parties prenantes autour de quatre niveaux proposés pour une nouvelle fonctionnalité destinée aux concessionnaires, Lindsay a transposé un prototype HTML de grande envergure en calques de code et l’a affiné à l’aide de l’agent Figma. « Je ne suis pas designer, je suis product manager », dit-elle. « L’agent s’est chargé des modifications, ce qui m’a permis de me concentrer sur les concepts sous-jacents à chaque niveau. »
Parce que chaque version restait sur le canvas, Lindsay pouvait reprendre l'une d'elles et continuer à itérer sans avoir à repartir de zéro. « J’ai enchaîné 19 versions en passant à peine une heure devant mon clavier, puisque l’agent s’est chargé de la majeure partie du traitement », explique-t-elle. « Par rapport à une création que j’aurais réalisée moi-même dans Figma en tant que non-designer, c’est au moins dix fois plus efficace, avec un gain de temps d’environ 90 %. » Lorsque le prototypage a été terminé, Lindsay a téléchargé un fichier HTML unique et complexe à partager sur le site interne de Cox Automotive. « D'itération en itération, les calques de code permettent de très bien conserver la cohérence entre chaque écran et chaque interaction », explique Lindsay. Le prototype cliquable illustre ce qu’un long cahier des charges ne peut pas afficher, et il permet de maintenir la cohérence entre le design, l’ingénierie et le produit pendant que les équipes élaborent ensemble la fonctionnalité.
Rocket Money : Régler les détails dès le début
Rocket Money, une filiale opérationnelle de Rocket, LLP, aide les particuliers à prendre le contrôle de leurs finances personnelles. Derek Onay, designer produit principal, Design systems, utilise des calques de code pour partager des idées préliminaires avec l'équipe sous forme de prototypes fonctionnels. Les design systems régissent tous les détails, depuis l'apparence et le comportement des composants jusqu'à leur intégration dans un produit. Lors de la création des composants d'écran de base par l'équipe, il était important de régler les détails d'interaction et de vérifier leur conformité aux normes d'accessibilité dès le début, avant qu'ils n'affectent les utilisateurs du produit. Derek a créé un concept dans des calques de code afin de faciliter ces échanges. « Pour moi, la discussion autour des modèles d’interaction est l'aspect le plus utile, car ce sont des éléments difficiles à communiquer à l’aide de frames statiques », explique-t-il.
Derek a demandé à l’agent Figma de recréer un design existant sous forme de code en utilisant les noms exacts des composants du design system de l’équipe. Après quelques minutes et deux prompts de nettoyage, il l'a partagé avec les parties prenantes pour décider si le concept méritait d’être approfondi. « Les calques de code constituent un atout majeur pour la coordination et le prototypage », explique Derek. « Au lieu d’essayer de décrire un modèle d’interaction, je peux simplement partager un lien vers un calque de code et en discuter avec mon équipe ».
« Avec les calques de code, la véritable valeur réside dans la capacité à mieux communiquer des idées et à obtenir l’adhésion des parties prenantes », déclare-t-il. « Je peux partager un prototype fonctionnel et rejoindre mon équipe là où elle est déjà, sur Figma. »
Merkle : Réduire les transferts entre le design et le développement
L'impact des calques de code pour Merkle :
Une accélération de 30 % des itérations et du développement des fonctionnalités
Une réduction de près de 50 % du temps consacré à la création d'une documentation, comme les spécifications d’interaction sur les tickets
Merkle, un cabinet de conseil international, utilise des calques de code tout au long de son processus de design et de développement, depuis l'idéation sur un canvas vierge jusqu'à l'itération sur des fonctionnalités déjà développées en code. Ainsi, les itérations et le développement des fonctionnalités sont 30 % plus rapides grâce à la réduction des transferts de tâches et à la diminution des temps d’attente liés à la disponibilité des designers ou des développeurs. Les équipes consacrent également jusqu’à 50 % de temps en moins à la création d'une documentation, telle que les spécifications d’interaction sur les tickets. « Les calques de code améliorent considérablement la capacité à communiquer des idées de la meilleure façon possible », déclare Dave Calleja, vice-président, responsable mondial du design d'expérience. « Ils offrent aux équipes davantage d’options, et non moins, pour explorer, évoluer et collaborer d’une manière qui n’était auparavant pas envisageable sans une charge de travail importante. »
Les calques de code représentent avant tout un changement dans le mode de travail, du transfert de tâches à une collaboration étroite, ce qui permet à Merkle et à ses clients de travailler plus rapidement tout en approfondissant leur travail. « L'intérêt des calques de code dans Figma réside dans le dépassement de la dichotomie perçue entre les outils basés sur le code et ceux basés sur le canvas, tout en offrant les avantages des deux », souligne Dave.
Grâce à la juxtaposition du code et du canvas, nos équipes peuvent explorer et proposer des expériences différenciées et créatives, fondées sur un support commun.
Checkout.com : Peaufiner le code fonctionnel par des modifications de design
Checkout.com est une plateforme de paiements mondiale, et Kris Murphy, designer produit senior, travaille sur les fonctionnalités de design associées au paiement. Lorsqu’un client potentiel a souhaité voir la technologie en action, Kris a créé une démo par calques de code et a partagé des captures d’écran de l’application du client afin que l'agent Figma puisse reproduire ses couleurs, ses polices et ses motifs graphiques. « Les calques de code m'ont aidé à concevoir et à mettre en œuvre mes idées rapidement », dit-il.
Avant de partager la démo avec le client, Kris voulait s'assurer de la qualité de chaque écran. Au lieu de cliquer sur le prototype écran par écran, il a extrait chaque écran du calque de code sur le canvas de Figma. À partir de là, il était facile de les revoir côte à côte pour repérer et corriger tout ce qui nécessitait une retouche. Kris a ensuite renvoyé ces modifications au calque de code, et l'équipe de Checkout.com a également pu revoir le flux complet des révisions effectuées sur le canvas.
Les calques de code représentent le parfait trait d'union entre le design et le développement. Ils m'ont aidé à concevoir et à mettre en œuvre mes idées rapidement.
Les calques de code sont déployés en bêta ouverte et utiliseront des crédits d'IA. Dans les forfaits payants, la création et l'édition au sein des calques de code sont gratuites jusqu'au 4 novembre 2026.