Figma permet désormais de prototyper en code directement sur son canvas collaboratif

Quelques jours après la disponibilité générale de son agent, Figma déploie de nouveaux outils pour réunir designers, développeurs et product managers sur un même espace.

Config-India-2026_hero_code-layers
Les calques de code permettent de construire, modifier et comparer des prototypes adossés à du vrai code, directement sur le canvas de Figma Design. © Figma

Figma continue de faire de son outil de design un espace où les équipes construisent des produits de bout en bout. Après les annonces de Config 2026 en juin, l’éditeur ouvre en bêta le code sur son canvas et ajoute un éditeur de spécifications, ainsi qu’une intégration de son CMS Payload. « Les clients nous disent souvent qu’ils préfèrent travailler avec leurs équipes sur le canvas plutôt que seuls avec des agents de code dans un terminal ou un IDE », a justifié Dylan Field, cofondateur et CEO de Figma.

Des prototypes codés directement sur le canvas

Les « code layers », ou calques de code, de Figma servent à construire, explorer, modifier et comparer des prototypes adossés à du vrai code, directement sur le canvas de Figma Design. Ces prototypes peuvent ensuite être poussés jusqu’en production. Trois portes d’entrée sont prévues pour en créer :

  • Un prompt adressé à l’agent Figma,
  • L’import depuis un dépôt GitHub,
  • Un agent de code tiers connecté au serveur MCP de Figma.

Une maquette existante peut aussi être convertie en code layer interactif. Le serveur MCP de Figma accueille par ailleurs 20 nouveaux partenaires, parmi lesquels Open Code, Dia et Meta Muse.

Parallèlement, l’agent Figma, lancé en bêta en mai, est un assistant IA intégré à Figma Design. Il s’appuie sur les composants, les variables et le design system de l’équipe pour générer des variantes, appliquer des modifications en masse ou documenter une bibliothèque, comme nous le détaillions lors de son lancement. Il est passé en disponibilité générale le 6 octobre, avec une latence réduite, la recherche de fichiers Figma depuis le chat et des consignes configurables pour lui fournir le contexte des bibliothèques de design. Depuis cette date, son usage consomme des crédits IA, ce qui n’était pas le cas pendant la bêta.

Figma Specs pour fixer l’intention, à destination des équipes comme des agents

Également présenté ce jour, Figma Specs est un éditeur Markdown natif, conçu pour documenter l’intention d’un projet et ses détails d’implémentation. Ces documents s’adressent autant aux membres de l’équipe qu’aux agents IA chargés d’exécuter. Une spec peut exister comme fichier autonome sur la plateforme ou prendre place à côté du travail, sur le canvas. En plus des fonctions d’un fichier Markdown classique, elle peut faire référence à des éléments du canvas et intégrer des diagrammes FigJam, des code layers ou des maquettes.

Specs_hero
Figma Specs, l’éditeur de Markdown natif, conçu pour documenter un projet © Figma

Figma regroupe aussi la gestion des design systems dans un espace centralisé : les équipes peuvent y réunir les bibliothèques de design, les bibliothèques de code et les guidelines, puis connecter un seul design system au lieu d’attacher des sources de contexte éparpillées. L’éditeur y ajoute des outils pour visualiser ces systèmes et les améliorer.

Payload s’invite dans Figma Make pour publier avec de vraies données

Payload, le CMS et back-end open source passé dans le giron de Figma, se connecte désormais à Figma Make. Une application générée par prompt dans Make peut s’appuyer sur Payload pour créer, publier et gérer ses contenus et ses données au même endroit. Selon Figma, les téléchargements de Payload ont été multipliés par six sur les douze derniers mois.

Payload_inline_1_preview-mode
Payload peut se connecter à Figma Make. © Figma

Dans la pratique, plusieurs profils peuvent intervenir sur la même base :

  • Le designer construit l’interface avec des contenus réels,
  • Le marketeur ajoute et met à jour ces contenus depuis un panneau d’administration intégré,
  • Le développeur personnalise l’application à partir du framework open source de Payload.

Ces nouveautés sont déployées progressivement dans les semaines à venir, avec une disponibilité variable selon les cas. Les code layers sont proposés en bêta ouverte et le détail des conditions d’accès figure sur le centre d’aide de Figma.

Sujets liés :
Publier un commentaire
Ajouter un commentaire

Votre adresse email ne sera pas publiée.

Les meilleurs outils Prototypage