Menu
Dossiers

Figma fait entrer le code dans son canvas : ce que ça change pour la création de sites

Figma a annoncé le 15 octobre 2026 l’arrivée de calques de code directement dans son canvas : les équipes peuvent désormais construire, modifier et comparer des prototypes adossés à du vrai code sans quitter l’outil de design, puis les pousser en production.

En bref
• Les « code layers » arrivent en bêta ouverte dans Figma Design : du code exécutable, posé sur le canvas comme une maquette.
• Trois portes d’entrée : un prompt à l’agent Figma, un import GitHub ou un agent de code tiers connecté via le serveur MCP.
• Figma Specs, un éditeur de documentation natif, et l’intégration du CMS Payload complètent l’annonce.

Le prototype en vrai code, posé à côté des maquettes #

Jusqu’ici, la frontière était nette : on dessinait dans Figma, on codait ailleurs. Les nouveaux calques de code, détaillés par Blog du Modérateur, brouillent cette frontière. Un prototype fonctionnel, écrit en code réel, vit désormais sur le même canvas collaboratif que les écrans dessinés.

Concrètement, une maquette existante peut être convertie en calque de code interactif. On teste alors le comportement réel d’un composant, ses états, ses animations, au lieu d’en simuler l’enchaînement avec des liens de prototypage classiques.

À lire Refonte de site : les délais de prise en compte évoqués par Google à Barcelone

Trois façons de créer un calque de code #

Figma prévoit trois points d’entrée. Le premier passe par un prompt adressé à l’agent Figma, qui génère le code demandé. Le deuxième consiste à importer du code existant depuis GitHub. Le troisième ouvre la porte aux agents de code tiers, connectés au serveur MCP de Figma.

Ce serveur MCP s’étoffe d’ailleurs de 20 nouveaux partenaires. L’idée est claire : laisser chaque équipe brancher ses propres outils d’ingénierie sur le canvas, plutôt que d’imposer une chaîne fermée.

L’agent Figma passe à la caisse

L’agent Figma, en bêta depuis mai, est passé en disponibilité générale le 6 octobre. Changement notable : son usage consomme désormais des crédits IA, ce qui n’était pas le cas pendant la bêta. Un paramètre à intégrer dans le budget des studios et des agences qui l’utilisent intensivement.

Figma Specs : documenter pour les humains et pour les agents #

L’annonce comprend aussi Figma Specs, un éditeur Markdown natif pensé pour consigner l’intention d’un projet et ses détails d’implémentation. Une spec peut référencer le canvas, intégrer des diagrammes FigJam, des calques de code ou des maquettes.

À lire Followers : Guide pour Augmenter vos Abonnés 2026

Le public visé est double : les équipes, bien sûr, mais aussi les agents IA, qui ont besoin d’un contexte structuré pour produire du code pertinent. La documentation cesse d’être un document mort rangé dans un wiki : elle devient l’entrée d’une chaîne de production.

Payload rejoint Figma Make #

Dernier volet : l’intégration de Payload, le CMS open source passé dans le giron de Figma, au sein de Figma Make. Une application générée par prompt peut désormais gérer ses contenus et ses données au même endroit. Figma indique que les téléchargements de Payload ont été multipliés par six sur les douze derniers mois.

Pour la création de sites, c’est le chaînon qui manquait aux outils de génération : un front généré sans back-office exploitable reste un prototype. Avec un CMS intégré, le livrable se rapproche d’un site administrable par le client final. L’ensemble des annonces est détaillé sur le blog officiel de Figma.

Ce que cela change pour les projets sur mesure #

Ces annonces prolongent la trajectoire amorcée à la conférence Config en juin : faire converger design, code et agents IA dans un seul espace de travail. Le déploiement s’effectue progressivement dans les semaines à venir, les conditions d’accès aux calques de code étant précisées dans le centre d’aide de Figma.

À lire Instagram Story : Guide complet pour créer des stories

Pour les équipes qui conçoivent des sites sur mesure, l’intérêt est double. Les allers-retours entre designers et développeurs se raccourcissent, puisque le composant réel remplace sa simulation. Et la phase de validation client gagne en fiabilité : ce que l’on montre se comporte déjà comme ce que l’on livrera.

La vigilance porte ailleurs : gouvernance du code généré, revue systématique avant mise en production et maîtrise des coûts en crédits IA. L’outil rapproche les métiers, il ne dispense ni de l’architecture ni du contrôle qualité.

Questions fréquentes #

Les calques de code sont-ils disponibles pour tout le monde ?

Ils sont lancés en bêta ouverte, avec un déploiement progressif annoncé sur les semaines à venir. Les conditions d’accès exactes sont décrites dans le centre d’aide de Figma.

Faut-il savoir coder pour en profiter ?

Pas nécessairement pour créer : un prompt à l’agent Figma suffit à générer un calque de code. En revanche, relire, corriger et industrialiser ce code reste un travail de développeur.

À lire Format Instagram : Guide Tailles Images 2026

Qu’est-ce que Payload apporte à Figma Make ?

Payload est un CMS open source : son intégration permet à une application générée dans Figma Make de gérer contenus et données sans outil externe, ce qui rapproche le résultat d’un site livrable en production.

Partagez votre avis

Dans la même rubrique : Réseaux sociaux

A voir aussi : création de site e-commerce • Sofiane Boumedine, consultant SEO