Le 15 octobre 2026, Figma a présenté une série de nouveautés qui touchent directement la façon dont on conçoit un site ou une application. La plus commentée s’appelle « code layers » : des calques qui ne contiennent plus une simple image d’interface, mais du code qui tourne, posé sur le même canevas que les maquettes. Pour une petite agence, un graphiste indépendant ou une entreprise qui fait refaire son site, c’est un changement de méthode autant qu’une nouvelle fonction.
Voici ce qui a été annoncé, ce qui est réellement disponible aujourd’hui, et ce qu’il faut regarder avant de s’y mettre.
Plan de l'article
Ce que Figma a annoncé cette semaine #
L’annonce tient dans un billet signé Dylan Field, cofondateur et patron de Figma, intitulé « Build by Design ». L’idée générale : rapprocher la maquette et le produit fini, pour que l’écart entre ce qu’on dessine et ce qu’on met en ligne se réduise.
Les code layers en sont le cœur. Selon Figma, ils permettent d’amener du code fonctionnel sur le canevas pour explorer une expérience à côté du code qui la fait tourner. Ils sont déployés en bêta ouverte depuis le 15 octobre.
Deux autres briques accompagnent ce lancement. Les « Specs », présentées comme un espace natif pour le contexte d’un projet (intentions, explorations visuelles, détails techniques), arrivent en bêta ouverte sur les offres payantes. Et des fichiers de « guidelines » peuvent désormais être ajoutés aux bibliothèques de design publiées, pour donner des règles à respecter à l’assistant intégré.
Comment on crée un code layer #
La page d’aide officielle de Figma décrit plusieurs points d’entrée. On peut sélectionner l’outil Code dans la barre d’outils et tracer une zone sur le canevas, ou partir de cadres déjà dessinés et cliquer sur « Build selection » pour les transformer en code.
Il est aussi possible de connecter un dépôt GitHub, d’importer un dossier local, ou de capturer une page web existante grâce à l’extension Chrome de Figma. Ce dernier point intéressera ceux qui préparent une refonte : on peut partir du site actuel plutôt que d’une page blanche.
À lire Design Thinking : Méthode Complète et Applications
Une fois le calque créé, on le modifie en dialoguant avec l’agent de Figma, en ouvrant l’éditeur de code, ou en pointant directement un élément à changer. À l’inverse, une fonction permet de retransformer l’état d’un prototype en calques de design classiques, modifiables comme avant.
Le lien avec le code de production
Quand un dépôt GitHub est connecté, Figma indique qu’on peut créer des pull requests pour renvoyer les modifications dans le dépôt d’origine. Autrement dit, une correction faite dans Figma peut repartir vers le code du développeur, sous forme de proposition à valider. C’est sans doute le point qui demandera le plus de discipline dans une équipe : qui valide, et selon quelles règles ?
Qui peut l’utiliser, et à quel prix #
D’après la page d’aide, les code layers sont proposés sur les offres Education, Starter, Professional, Organization et Enterprise. Il faut un droit d’édition sur le fichier, et la création d’un code layer demande un siège « Full ». Le déploiement est progressif : deux personnes d’une même équipe peuvent ne pas y avoir accès au même moment.
Côté coût, la génération et l’édition de code dans un code layer ne consomment pas de crédits IA sur les offres payantes jusqu’au 4 novembre 2026. Après cette date, toutes ces opérations passeront par les crédits. Le reste du travail confié à l’agent dans une même demande consomme déjà des crédits.
Ce point compte, car les crédits IA sont devenus un vrai sujet chez Figma. Les notes de version précisent que l’agent Figma, sorti de bêta le 6 octobre, utilise des crédits IA depuis cette date. La même page signale aussi, au 13 octobre, l’arrivée du modèle Gemini 4 Argon dans Figma Make, sur toutes les offres.
Ce que ça change pour un projet de site #
Jusqu’ici, le circuit classique d’un projet web passait par des maquettes statiques, puis un prototype cliquable, puis l’intégration par un développeur. Chaque étape apportait son lot d’écarts : une animation imaginée qui ne se comporte pas pareil, un formulaire dont les états d’erreur n’avaient pas été dessinés, une page qui casse sur mobile.
Avec un prototype qui tourne vraiment, ces questions arrivent plus tôt dans la discussion. Le client voit un comportement réel, pas une suite d’écrans. Pour une agence, c’est l’occasion de faire valider plus vite, et de limiter les allers-retours en fin de projet.
Il faut pourtant garder la tête froide. Un prototype en code n’est pas un site prêt à mettre en ligne : performance, accessibilité, référencement et sécurité restent des chantiers à part. Figma prévient d’ailleurs que certains projets importés devront être adaptés pour tourner comme code layers, et que les imports via son serveur MCP peuvent prendre dix minutes ou plus.
Les précautions à prendre
Pour une entreprise, la première question est celle de la gouvernance. Figma indique que seules les offres Enterprise peuvent désactiver la fonction, et que la désactivation passe par l’arrêt de toutes les fonctions IA. Sur les autres offres, elle sera donc présente pour les sièges concernés.
La seconde est budgétaire. La période sans crédits jusqu’au 4 novembre est un bon moment pour tester sur un vrai projet et mesurer la consommation, avant que chaque génération soit décomptée. Mieux vaut savoir combien coûte une itération avant de bâtir un devis dessus.
Enfin, la question du rôle de chacun. Si un designer peut proposer des modifications de code, il faut décider ensemble de ce qui est de son ressort et de ce qui reste au développeur. L’outil rapproche les métiers, il ne les remplace pas.
En résumé #
Avec les code layers, Figma fait un pas net vers le prototype qui fonctionne pour de bon, au cœur même de l’outil de maquette. La fonction est en bêta ouverte depuis le 15 octobre, accessible avec un siège Full sur les offres listées, et gratuite en crédits pour la génération de code jusqu’au 4 novembre. Pour ceux qui conçoivent des sites, c’est le moment de l’essayer sur un projet réel, en gardant en tête qu’un beau prototype ne dispense ni d’une intégration soignée, ni d’un vrai travail sur la performance et le référencement.
À lire Expérience Utilisateur (UX) : Tests Utilisateurs et Analyse de Données avec Google Analytics.
