À son Config de New Delhi, le 14 octobre 2026, Figma a ouvert en bêta publique ses code layers : du vrai code posé directement sur le canvas, pour prototyper en conditions quasi réelles. On demande à l'agent de transformer une maquette en code, puis d'itérer. C'est impressionnant. Mais je vais être direct : un prototype en code n'est pas un site prêt à être mis en ligne, ni à ranker. Voici ce qui sépare les deux, et pourquoi ça compte pour votre projet.
Ce que Figma a annoncé
Les code layers permettent d'ajouter du code aux designs sur le canvas pour construire des prototypes plus interactifs. La fonctionnalité était en bêta privée depuis juin 2026, elle passe en bêta publique. Figma a aussi présenté Specs, un éditeur en Markdown pour définir le langage de design d'une équipe, et l'intégration de Payload (le CMS headless open source racheté l'an dernier) à Figma Make pour générer des sites dynamiques.
Un chiffre cité par Loredana Crisan, directrice design de Figma, résume l'époque : on produit aujourd'hui 17 fois plus de lignes de code qu'avant, pour seulement 1,3 fois plus de mises en production. Produire du code n'a jamais été aussi facile. Livrer un site de qualité, lui, reste difficile.
Prototype n'est pas production
Un prototype sert à valider une idée, un parcours, une interaction. Un site de production doit être rapide, accessible, indexable, maintenable et pensé pour la conversion. Entre les deux, il y a tout le travail invisible qui ne se voit pas sur un canvas.
La performance et les Core Web Vitals
Le code généré pour prototyper vise la ressemblance visuelle, pas le poids des pages ni l'INP (Interaction to Next Paint), le signal de réactivité que Google regarde. Un prototype peut embarquer des bibliothèques lourdes, des images non optimisées, un DOM inutilement profond. En production, chacun de ces détails coûte des points de page experience.
Le HTML sémantique et la structure SEO
Une IA qui transforme un design en code produit souvent une empilade de div. Or le référencement et la citation par les IA reposent sur une structure claire : un seul H1, une hiérarchie H2/H3 logique, des balises de section, des données structurées. Ce travail ne sort pas tout seul d'un prototype.
L'accessibilité
Depuis l'entrée en vigueur de l'European Accessibility Act, l'accessibilité n'est plus une option, c'est une obligation (et un bonus SEO). Un prototype généré ne gère presque jamais les contrastes, le focus clavier ou les attributs ARIA correctement. J'en ai fait le tour dans mon article sur l'European Accessibility Act.
Où les code layers sont vraiment utiles
Je ne crache pas dans la soupe. Les code layers rapprochent enfin designers et développeurs sur un même support, raccourcissent les allers-retours et permettent de tester une interaction avant de la construire pour de bon. C'est un excellent outil de conception. Le problème n'est pas l'outil, c'est de confondre la maquette animée avec le livrable final. C'est exactement le piège que je retrouve quand je dois reprendre un site généré par IA.
Ce qu'un prototype ne remplacera pas
Transformer une belle maquette en site qui se charge vite, qui respecte les Core Web Vitals, qui est accessible et structuré pour le SEO et le GEO, c'est un métier. C'est tout l'objet de mon travail de création de site web, pensé dès le départ pour la performance et le référencement, pas rattrapé après coup. Un prototype Figma est un formidable point de départ. Ce n'est pas une ligne d'arrivée.
Vous avez une maquette et vous voulez un vrai site derrière ? On en parle 30 minutes : réserver un créneau.
Qui écrit
Je suis Charles-Henry Soulet, fondateur de Treelink. Je conçois et optimise des sites Webflow et Shopify, et je passe une bonne partie de mon temps à transformer des maquettes en sites qui tiennent la route côté perf et SEO. Plus sur ma page à propos.
Sources
- Figma, Design Together With Code Layers on the Canvas (figma.com/blog)
- TechCrunch, Figma announces new features to define how agents work on its platform (14 octobre 2026)
Récap des liens
🔗 Internes : Création de site web, Service SEO, Reprendre un site généré par IA, European Accessibility Act.
🌐 Externes : Figma Blog, TechCrunch.