Couches de code Figma et Specs : ce qu’elles sont, comment elles fonctionnent et où elles s’arrêtent14 min read

Les couches de code Figma placent le code en cours d’exécution sur le canevas, et Figma Specs y place également Markdown. Les deux sont entrés en version bêta ouverte sur Config India le 15 octobre 2026, de sorte qu’un fichier de conception peut désormais contenir des cadres, un prototype fonctionnel et le plan écrit à partir duquel un agent construit.

Ce guide est destiné aux concepteurs, aux chefs de projet et aux ingénieurs front-end qui décident de déplacer ou non les travaux de prototypes et de spécifications vers Figma. Il explique ce que fait chaque fonctionnalité, comment démarrer, ce qu’elle coûte en crédits IA et où le travail doit quitter Figma pour les coéquipiers de Claude, ChatGPT ou Cursor.

À l’ère de l’IA, le design est du code. Pour concevoir directement en code avec l’IA, ou pour transformer vos conceptions Figma en code, utilisez Anima Playground: décrivez un écran ou partez d’une conception Figma, puis continuez à itérer sur une application modifiable que vous pouvez prévisualiser et publier.

Concevoir directement dans le code avec l’IA

Concevoir avec l’IA : décrivez un écran ou transformez les conceptions Figma en code.

Qu’a lancé Figma au Config India 2026 ?

Les couches de code et Specs faisaient la une, mais ils sont arrivés avec un ensemble de fonctionnalités d’agent autour d’eux. Voici l’état actuel du centre d’aide de Figma :

Les deux versions bêta se déroulent sur plusieurs semaines, vous pourrez donc les voir avant ou après le reste de votre équipe.

Que sont les couches de code Figma ?

Une couche de code est une couche qui contient du code réel et en cours d’exécution. Au lieu d’un prototype qui simule les interactions avec les liens de cadre, vous obtenez un prototype fonctionnel, basé sur du code, posé sur le canevas à côté de vos conceptions. Les coéquipiers peuvent cliquer dessus, le commenter et le dupliquer pour essayer une direction différente côte à côte.

Figma vous propose quatre façons d’en démarrer un :

• À partir d’un dessin. Sélectionnez les frames et demandez à l’agent Figma de les transformer en couche de code.
• À partir d’un site Web en direct. Capturez une page avec l’extension Figma Chrome et collez-la sur le canevas.
• À partir d’un dépôt. Importez une base de code de prototypage léger prise en charge à partir de GitHub ou d’un dossier local. Une importation GitHub reste connectée à ce référentiel.
• À partir de zéro. Ajoutez une couche de code vide et invitez l’agent à créer.

Vous pouvez également importer sur le canevas un prototype que vous avez créé dans un outil de codage via le serveur Figma MCP.

L’édition s’effectue de trois manières. Vous invitez l’agent, vous annotez des cadres pour lui montrer à quoi appartient une modification, ou vous ouvrez l’éditeur de code et modifiez le code vous-même. Quand les détails visuels comptent plus que le code, Extract designs transforme les écrans d’une couche de code en cadres Figma modifiables. Lorsque le code est prêt pour les ingénieurs, vous pouvez le transmettre à une succursale et ouvrir une pull request.

Qu’est-ce que le Figma Specs ?

Figma appelle Specs « une maison native pour le contexte ». En pratique, il s’agit d’un document collaboratif Markdown qui réside soit sur le canevas d’un fichier Figma Design ou d’un tableau FigJam, soit en tant que son propre fichier Spec.

La mise en route est rapide :

1. Créez un Spec autonome à partir du navigateur de fichiers ou accédez à figma.com/spec/new.
2. Dans un fichier de conception ou une carte FigJam, cliquez sur Spec dans la barre d’outils ou appuyez sur D.
3. J’ai déjà un .md fichier ? Faites-le glisser sur la toile et il devient une spécification.
4. Écrivez avec le Markdown que vous connaissez déjà : # pour les titres, - pour les balles, [] pour les choses à faire, > pour les guillemets, trois backticks pour le code. Tapez / pour les images, Figma intègre et diviseur.

Ce qui fait qu’une spécification est plus qu’un fichier Markdown, c’est ce qui entoure le texte. Vous pouvez intégrer un cadre, une carte FigJam ou n’importe quel nœud du canevas, de sorte que l’exigence et la conception qu’elle décrit restent côte à côte. Les coéquipiers le commentent et l’agent Figma peut lire et répondre à ces commentaires.

Specs fonctionne également en dehors de Figma. Les agents de codage connectés au serveur Figma MCP peuvent lire, créer et mettre à jour les spécifications à l’aide du figma-spec compétence. Pour en remettre un, vous copiez le lien de spécification dans l’invite de votre agent de codage, et les cadres, diagrammes, couches de code et extraits de code Code Connect liés l’accompagnent.

Pourquoi Markdown est devenu le format de transfert

Le propre message de lancement de Figma le dit clairement : Markdown est désormais le format de facto pour partager le contexte avec les agents. Chaque agent de codage le lit. La plupart des équipes produit conservent déjà les plans, les PRD et les instructions des agents dans .md fichiers.

D’après ce que j’ai lu, Specs est Figma acceptant que le transfert à un agent soit un texte, puis rendant ce texte multijoueur. Un local AGENTS.md ou PRD n’a jamais échoué à cause du format. Il a échoué parce qu’une seule personne l’a édité, il s’est éloigné des conceptions et personne ne pouvait voir quelle version l’agent utilisait.

Dans Figma, Specs corrige ce problème. La question ouverte est de savoir ce qui se passe à l’extérieur. Les intégrations, commentaires et références de conception dynamique sont des fonctionnalités Figma et les agents y accèdent via les clients répertoriés dans le catalogue Figma MCP. Si vos ingénieurs, le ChatGPT de votre PM et Claude de votre équipe marketing ont tous besoin du même plan, vous devez toujours décider où se trouve la copie partagée.

Un workflow pratique : du PRD à la couche de code en passant par la pull request

Voici comment les deux fonctionnalités s’assemblent sur une fonctionnalité réelle, en utilisant uniquement ce que Figma documente aujourd’hui.

1. Faites glisser votre PRD sur le canevas. Votre existant .md le fichier devient une spécification. Rien n’est réécrit et l’édition manuelle ne nécessite aucun crédit d’IA.
2. Intégrez les cadres dont il parle. Utiliser / pour ajouter les flux décrits par PRD. Les réviseurs voient désormais l’exigence et l’écran ensemble.
3. Transformez les images clés en une couche de code. Sélectionnez-les et invitez l’agent. Si vous disposez déjà d’un dépôt prototype, importez-le plutôt depuis GitHub.
4. Révisez en un seul endroit. Recueillez des commentaires sur la spécification et la couche de code. Demandez à l’agent Figma de répondre à chaque commentaire ouvert avec une suggestion de correctif pendant que les gens interviennent sur les mêmes fils de discussion.
5. Remettez les spécifications. Collez le lien de spécification dans Codex, Claude Code ou Cursor connecté au serveur Figma MCP. L’agent obtient le Markdown ainsi que le contexte de conception lié.
6. Expédiez le code du prototype. Transférez les modifications de la couche de code vers une branche et ouvrez une demande d’extraction afin que les ingénieurs les examinent avant de fusionner.

Le résultat est une spécification que votre agent de codage peut lire et un prototype fonctionnel sur lequel votre équipe a réellement cliqué. Testez le code généré comme n’importe quel autre code. Un prototype qui s’exécute n’est pas la même chose qu’un code prêt pour la production.

Si l’étape suivante consiste à transformer une conception Figma en code que vous pouvez exécuter, ou à concevoir du code à partir d’une invite, c’est le travail de Anima Playground.

Combien coûtent les couches de code et Specs ?

• Les couches de code utilisent des crédits IA. Sur les forfaits payants, la génération et la modification au sein d’une couche de code sont gratuites jusqu’au 4 novembre 2026. Le travail des autres agents dans la même invite utilise toujours des crédits, et après le 4 novembre, toutes les tâches de la couche de code utilisent des crédits.
• Les Specs sont libres d’écriture. Taper et modifier une spécification vous-même n’utilise pas de crédits. Utiliser l’agent avec une spécification le fait. Passez la souris sur le reçu après chaque invite pour voir combien cela coûte.
• Payload et les directives ajoutent des coûts. Figma note que les deux donnent à l’agent plus de contexte et plus de travail, de sorte que la même invite peut utiliser plus de crédits.

Limites à vérifier avant de planifier autour d’elles

• Déploiement. Les deux fonctionnalités sont des versions bêta ouvertes déployées sur plusieurs semaines. Recherchez l’icône Code dans la barre d’outils Figma Design et l’option Spec dans le navigateur de fichiers.
• Plans. Specs nécessite un forfait payant. Les utilisateurs débutants obtiennent des couches de code mais pas Specs. Les deux ont besoin d’un accès en modification pour créer.
• Se désinscrire. Seuls les administrateurs d’entreprise peuvent désactiver les couches de code, et uniquement en désactivant toutes les fonctionnalités IA du Figma.
• Taille du dépôt. L’importation GitHub est destinée aux bases de code de prototypage léger, et non à une application de production complète.
• Concevoir le code du système. La connexion de votre code de composant réel via des sources de code est toujours une version bêta fermée, il est donc possible que les couches de code n’utilisent pas encore vos composants de production.

Où s’arrête Figma et où s’adaptent Anima et AgentGrid.io

Si toute votre équipe travaille dans Figma, les couches de code et Specs constituent une valeur par défaut forte. Le prototype, le plan et les commentaires se trouvent dans le même fichier, et l’agent de Figma et les clients de MCP peuvent travailler dessus.

Deux situations courantes ne relèvent toujours pas de ce dossier.

L’idée est née ailleurs. Un prototype Claude Design, une page HTML générée par ChatGPT ou un site en ligne sur lequel vous souhaitez apprendre. Le serveur MCP de Figma dispose désormais d’un html_to_figma outil pour HTML généré par l’agent. Le Buddy de Anima, notre agent de conception IA à l’intérieur du Figma, tourne également HTML, artefacts Claude, images et URL dans des couches Figma modifiables, ce qui est utile lorsque vous souhaitez continuer à concevoir sur ces calques avec votre système de conception.

Le résultat doit quitter Figma. Votre spécification ou prototype doit être examiné par des personnes extérieures à votre équipe Figma, modifié par des agents de plusieurs fournisseurs ou publié sous forme de lien en direct. C’est le travail que fait AgentGrid.io, construit par Anima. Un artefact Markdown sur AgentGrid.io est un document en direct et enregistré automatiquement que les personnes et les agents connectés tels que Claude, ChatGPT, Cursor et Grok Bot peuvent modifier, chaque modification étant attribuée par son nom dans l’historique des versions. Un artefact HTML est une page en cours d’exécution sur laquelle vous pouvez commenter et publier sur une URL publique lorsqu’elle est approuvée. Vous pouvez également importer une image Figma dans AgentGrid.io en tant qu’artefact d’application. Cette importation est unidirectionnelle, donc les modifications ultérieures de Figma ne sont pas synchronisées.

Les deux ne rivalisent pas pour le même échelon. Figma est propriétaire du canevas de conception. AgentGrid.io est l’endroit où le Markdown et les artefacts HTML disparaissent lorsque le travail traverse des outils et des équipes.

Essayez AgentGrid.io pour conserver une spécification ou un prototype que chaque agent de votre équipe peut modifier et publier.

Utilisez chaque outil lorsque

• Utiliser les couches de code Figma lorsque les parties prenantes doivent cliquer sur un prototype fonctionnel à côté des conceptions et comparer les instructions côte à côte.
• Utiliser Figma Specs alors que le plan doit vivre à côté des cadres et être lu par un agent de codage via le serveur Figma MCP.
• Utiliser Anima Playground lorsque vous souhaitez concevoir directement dans le code avec l’IA, ou transformer une conception Figma en une application modifiable que vous pouvez prévisualiser et publier.
• Utiliser Buddy lorsque le point de départ est en dehors de Figma et que vous souhaitez des calques modifiables sur le canevas. Pour une comparaison plus complète de la création dans Figma par rapport à un générateur de navigateur, voir Figma Make contre Anima Playground.
• Utiliser AgentGrid.io lorsque la spécification ou le prototype doit être modifié par des personnes et des agents à travers les outils, révisé avec des commentaires et publié sous forme de lien en direct.

Questions fréquemment posées

Que sont les couches de code dans Figma ?

Une couche de code est une couche sur le canevas Figma qui contient du code réel en cours d’exécution. Vous pouvez en créer un à partir de cadres sélectionnés, d’un site Web en direct capturé avec l’extension Figma Chrome, d’un dépôt de prototypage GitHub ou d’une invite vierge, puis cliquer dessus, le commenter et le dupliquer pour comparer les directions.

Figma Specs est-il simplement Markdown ?

Specs utilise Markdown pour son texte et vous pouvez faire glisser n’importe quel fichier .md sur le canevas pour en créer un. Il ajoute des fonctionnalités Figma autour de ce texte : des cadres intégrés et des tableaux FigJam, des commentaires et un agent capable de lire et de répondre à ces commentaires.

Les couches de code Figma coûtent-elles des crédits IA ?

Oui. Sur les forfaits payants, la génération et la modification au sein d’une couche de code sont gratuites jusqu’au 4 novembre 2026. Le travail des autres agents dans la même invite utilise toujours des crédits, et après le 4 novembre, toutes les tâches de la couche de code utilisent des crédits IA.

Les Claude Code, Codex ou Cursor peuvent-ils lire un Figma Spec ?

Oui, s’ils sont connectés au serveur Figma MCP. Les agents de codage peuvent lire, créer et mettre à jour des spécifications avec la compétence figma-spec, et vous pouvez coller un lien de spécification dans votre invite pour transmettre son contexte de conception lié.

Quels forfaits Figma incluent Specs ?

Specs est en version bêta ouverte sur les forfaits payants : Professionnel, Organisation, Entreprise et Éducation, plus Gouvernement, conformément à l’article Config India de Figma. Ce n’est pas sur le plan Starter gratuit. Les couches de code sont déployées sur tous les plans, y compris Starter.