Code layers : transformer une maquette Figma en prototype vraiment interactif

Avec Code layers, Figma franchit une nouvelle étape dans le prototypage interactif. Annoncée en bêta ouverte le 15 octobre 2026, cette fonctionnalité permet d’intégrer des interactions pilotées par du code directement dans les maquettes. 

Dans ce tutoriel, découvrez comment transformer une simple interface e-commerce en prototype fonctionnel, étape par étape.

Étape 1 : Préparer une maquette Figma pour notre démonstration

Prenons l'exemple d'une fiche produit e-commerce. Notre objectif est de transformer une interface statique en prototype permettant d'ajouter un produit au panier, de modifier sa quantité et de voir le montant total évoluer automatiquement.

Commencez par ouvrir un fichier dans Figma Design et créez une frame contenant les éléments suivants.

• Une photo du produit, son nom, sa description et son prix.

• Un sélecteur de quantité avec les boutons « + » et « − ».

• Un bouton « Ajouter au panier ».

• Une icône de panier accompagnée d'un compteur.

À ce stade, les éléments sont uniquement visuels. Le bouton d'ajout au panier ne déclenche aucune action et le prix reste inchangé, quelle que soit la quantité affichée.

Veillez à regrouper l'ensemble des éléments dans une même frame et à utiliser des noms de calques explicites. Nous allons maintenant nous appuyer sur cette maquette pour générer une première version interactive.

Étape 2 : Transformer la maquette en Code layer

Code layers permet de convertir une frame Figma en prototype reposant sur du code exécutable, directement sur le canvas. Pour commencer, suivez ces quelques étapes.

1. Sélectionnez la frame contenant votre fiche produit.

2. Cliquez sur l'outil Code dans la barre d'outils de Figma Design. Vous pouvez également utiliser le raccourci clavier B.

3. Dans le panneau latéral droit, sélectionnez Build selection.

4. Utilisez l'agent Figma pour lancer la génération et préciser votre demande si nécessaire.

L'agent utilise votre design comme point de départ pour créer un Code layer. Vous obtenez ainsi une version de votre interface alimentée par du code, que vous pouvez prévisualiser et faire évoluer sans quitter votre fichier Figma.

L'intérêt est de conserver votre maquette comme référence visuelle tout en explorant son fonctionnement dans le même environnement.

Étape 3 : Ajouter de véritables interactions avec l'agent Figma

Notre fiche produit est désormais convertie en Code layer. Il reste à définir les comportements attendus lorsque l'utilisateur interagit avec l'interface.

Sélectionnez le Code layer et ouvrez l'agent Figma. Plutôt que de demander simplement de rendre la page interactive, décrivez précisément les actions souhaitées.

Voici un exemple de prompt à utiliser :

“Rends cette fiche produit e-commerce interactive en conservant au maximum son design actuel. Le sélecteur de quantité doit permettre d'augmenter ou de diminuer le nombre d'articles, sans jamais descendre sous 1. Le prix total doit se mettre à jour automatiquement selon la quantité sélectionnée. Lorsque l'utilisateur clique sur « Ajouter au panier », le compteur du panier doit être actualisé et un message de confirmation doit apparaître. Permets également d'ouvrir un récapitulatif du panier, de modifier les quantités et de supprimer le produit. Toutes les interactions doivent fonctionner localement, sans connexion à un service externe.”

L'agent génère ou adapte le code nécessaire à ces interactions. Vous pouvez ensuite lui soumettre de nouvelles instructions pour affiner certains comportements, ajouter des états particuliers ou ajuster les transitions.

Dans notre exemple, il ne s'agit pas de connecter une véritable boutique en ligne, mais de simuler suffisamment fidèlement le parcours d'achat pour pouvoir l'évaluer.

Étape 4 : Tester le prototype et corriger les comportements

Une fois les interactions générées, sélectionnez le Code layer et cliquez sur Play, dans son angle supérieur droit. Le prototype devient manipulable directement sur le canvas.

Testez maintenant notre parcours comme le ferait un utilisateur.

1. Augmentez la quantité du produit et vérifiez que le total évolue correctement.

2. Diminuez la quantité jusqu'à 1 et assurez-vous qu'il est impossible de descendre à 0.

3. Cliquez sur « Ajouter au panier » et vérifiez l'actualisation du compteur.

4. Ouvrez le panier pour contrôler les quantités et le montant affiché.

5. Supprimez le produit et vérifiez que le panier revient à son état vide.

Si un comportement ne correspond pas au résultat attendu, décrivez le problème à l'agent Figma. Par exemple, vous pouvez lui demander de corriger un total qui ne s'actualise pas après la suppression d'un article.

Vous pouvez également utiliser Open code editor pour examiner le prototype et ajuster certains éléments visuels avec l'outil d'édition. Après une modification, il peut être nécessaire de cliquer sur Reload code layer pour afficher la dernière version.

Cette phase permet aussi d'évaluer les détails difficiles à anticiper sur une maquette statique, comme les messages de confirmation, les états vides ou les réactions de l'interface aux actions successives.

Étape 5 : Comparer plusieurs versions et récupérer les écrans dans Figma

L'un des intérêts de Code layers est de pouvoir tester plusieurs approches sans perdre la version précédente.

Dupliquez votre Code layer et demandez à l'agent de modifier le fonctionnement du panier dans cette nouvelle version. Vous pourriez, par exemple, remplacer l'ouverture d'un panneau latéral par un récapitulatif directement intégré à la fiche produit.

Placez les deux versions côte à côte sur le canvas, puis utilisez Play pour comparer les parcours.

Une fois la version la plus pertinente identifiée, vous pouvez récupérer ses écrans sous forme de calques Figma éditables grâce à Extract designs.

Pour cela, sélectionnez le Code layer et cliquez sur Extract designs dans la barre d'outils secondaire située en bas du fichier. 

Plusieurs possibilités s'offrent à vous : 

• Current state pour extraire l'écran dans son état actuel.

• Select element pour récupérer un élément précis de l'interface.

• Record a flow pour parcourir le prototype et générer plusieurs frames représentant les différentes étapes de l'interaction.

Dans notre exemple, utilisez Record a flow pour capturer le parcours allant de la fiche produit initiale jusqu'au panier contenant les articles sélectionnés.

Les écrans récupérés peuvent ensuite être retravaillés dans Figma Design. Vous pouvez notamment ajuster leur mise en page, affiner les composants ou préparer leur présentation à l'équipe. Les modifications apportées aux designs extraits peuvent également être répercutées dans le Code layer.

Vous disposez ainsi d'un parcours qui peut être testé grâce au code, puis retravaillé visuellement dans Figma, sans devoir reconstruire chaque écran manuellement.

Design with Figma est un média indépendant, créé par des passionnés de design. Nous ne sommes ni affiliés à Figma ni sponsorisés par l'entreprise.