Workflow Claude Figma : du code à la maquette, puis retour

Que peut-on capturer avec Claude Code to Figma ?

Claude Code to Figma capture l’interface affichée dans votre navigateur, qu’elle soit en production, en préproduction ou sur localhost, le serveur de développement de votre ordinateur. Vous pouvez capturer plusieurs écrans au cours d’une même session, puis les réunir sur le canevas pour les comparer. Chaque écran devient une frame modifiable, que vous pouvez déplacer, dupliquer, retravailler et annoter. L’annonce de Figma présente ces environnements et les parcours composés de plusieurs écrans.

Imaginez votre application en fonctionnement, étalée sur une table de travail. Le navigateur montre l’expérience au fil de la navigation ; Figma permet d’en examiner les étapes côte à côte.

MCP, pour Model Context Protocol, est le protocole qui permet à Claude Code d’utiliser les outils de Figma. L’outil de capture s’appelle generate_figma_design. Il peut envoyer les calques vers un nouveau fichier Figma Design, un fichier Design existant ou le presse-papiers. Les nouveaux fichiers issus d’une capture sont placés dans les brouillons de votre équipe ou de votre organisation ; le contenu envoyé au presse-papiers peut être collé sur un canevas. La documentation des outils Figma détaille ces destinations.

Connexion Claude Figma : une seule configuration suffit

Pour ce workflow, utilisez le serveur distant. Il se connecte à https://mcp.figma.com/mcp et fonctionne sans l’application de bureau Figma. La documentation de Figma propose une méthode recommandée avec un plugin et une configuration manuelle. Choisissez l’une des deux. Configurer le serveur distant.

Méthode recommandée : installer le plugin Figma pour Claude Code

Si Claude Code est déjà installé, exécutez cette commande dans votre terminal :

claude plugin install figma@claude-plugins-official

Suivez ensuite la procédure d’autorisation décrite par Figma :

1. Redémarrez Claude Code s’il était en cours d’exécution.
2. Saisissez /plugin, ouvrez Installed, sélectionnez figma et lancez l’autorisation.
3. Poursuivez dans le navigateur et choisissez Allow access pour votre compte Figma.
4. Revenez dans /plugin et vérifiez que Figma apparaît comme connecté sous Installed.

Le plugin comprend la configuration MCP et des skills, des instructions réutilisables pour les workflows Figma courants. Si votre organisation bloque l’installation, Figma vous invite à contacter vos administrateurs Claude. Le guide de configuration de Claude Code par Figma.

Configuration manuelle : rendre la connexion accessible dans tous vos projets

Pour réutiliser la configuration d’un projet à l’autre, Figma fournit cette commande exacte :

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Ouvrez une nouvelle session Claude Code, saisissez /mcp, sélectionnez figma, puis Authenticate et Allow Access. Vérifiez la connexion avec /mcp.

L’option --scope user rend la connexion accessible dans tous vos projets. Figma documente aussi la commande claude mcp add --transport http figma https://mcp.figma.com/mcp, dont la portée se limite par défaut au projet en cours. Configuration manuelle et portée de la connexion.

Quel forfait et quel type de siège Figma faut-il ?

La connexion, la création de frames et la lecture des maquettes pour revenir au code répondent à des conditions distinctes. Voici les règles publiées par Figma, vérifiées le 12 octobre 2026 :

Sources : disponibilité de MCP, autorisations de capture et limites de lecture.

Les utilisateurs du forfait Starter et les titulaires de sièges View ou Collab disposent de 20 appels d’outils de lecture par mois au maximum. Un appel d’outil correspond à une requête individuelle : ce quota ne représente donc pas 20 allers-retours complets. L’outil de capture generate_figma_design est exempté des limites de débit MCP habituelles. Quota de lecture et exemption de l’outil de capture.

Pour une vue d’ensemble du produit et des éléments pour choisir votre abonnement, consultez notre avis sur Figma.

Cas pratique : un aller-retour sur un parcours d’onboarding en trois écrans

Prenons une application déjà fonctionnelle, avec trois écrans d’onboarding : Bienvenue, Inviter des coéquipiers et Premier projet. Cet exemple vous guide de la capture à l’implémentation, en passant par la revue des maquettes.

Capturer tout le parcours dans un seul fichier

Ouvrez le projet dans Claude Code et indiquez l’URL de votre application ainsi que le fichier de destination. Par exemple :

Si vous souhaitez un nouveau fichier, demandez plutôt à Claude d’en créer un. Si l’application n’est pas lancée, demandez-lui de démarrer le serveur local. Dans ce workflow, le client prépare le script nécessaire et ouvre le navigateur. Une première capture a lieu à l’ouverture de cette fenêtre. Les instructions de capture de Figma.

Vérifiez que l’écran Bienvenue est bien présent, puis avancez dans l’application. Sur Inviter des coéquipiers et Premier projet, utilisez Entire screen dans la barre d’outils de capture. Pour ne capturer qu’une partie de l’écran, choisissez Select element. Terminez avec Open file. Barre d’outils et étapes de finalisation.

Mon conseil : conservez la même taille de fenêtre d’affichage pendant ce premier passage et notez l’état capturé. Un écran affichant une erreur de validation et le même écran avec des données valides méritent des noms distincts.

Retravailler le parcours dans Figma

Conservez les captures originales sur une rangée et dupliquez-la pour les modifications proposées. Donnez des noms clairs aux frames, puis prenez une décision précise pour chaque écran :

Ces modifications restent des hypothèses de design. En particulier, dessiner une option pour passer une étape ne crée ni les autorisations ni la logique de routage nécessaires. Notez cette décision à côté de la frame validée et ajoutez-la au brief d’implémentation.

Examinez les calques capturés avant de les considérer comme des éléments de votre design system. Figma précise que les captures produisent des calques simples, sans correspondance automatique avec les composants ou les styles de vos bibliothèques. L’outil peut les lier à des variables compatibles, c’est-à-dire des valeurs réutilisables comme les couleurs et les espacements, présentes dans le fichier ou dans une bibliothèque que vous avez ajoutée. L’ajout de bibliothèques publiées nécessite un forfait payant. Fonctionnement des captures et des variables.

Renvoyer les frames validées à Claude Code

Pour chaque frame validée, faites un clic droit et choisissez Copy link to selection. Collez ces liens dans Claude Code avec votre demande d’implémentation. C’est le workflow distant décrit par Figma. Utiliser les liens des frames.

Pour cet exemple, le brief pourrait être :

L’outil get_design_context de Figma transmet les informations de design à l’agent. Dans le prompt, vous pouvez préciser votre framework et le dossier contenant vos composants existants. Avec le serveur distant, fournissez des liens vers les frames ou les calques : sélectionner un élément sur le canevas ne suffit pas à transmettre le contexte distant. Les outils de passage du design au code.

Enfin, lancez l’application mise à jour et refaites le même parcours. Comparez la mise en page et les textes, puis vérifiez le passage de l’étape facultative, la validation des saisies et la navigation au clavier. Capturez les écrans révisés si une nouvelle revue des maquettes peut être utile. Cette vérification incombe à votre équipe : Figma fournit le contexte et l’agent de programmation réalise l’implémentation. Le rôle de MCP et celui de l’agent.

Cinq situations où ce workflow peut être utile

Commencez par les situations où plusieurs personnes doivent se prononcer sur une interface existante. Les usages proposés ci-dessous sont classés selon leur capacité à éviter de refaire le même travail.

Si votre équipe souhaite formaliser des instructions de design réutilisables, notre pack de skills personnalisées pour un design system dans Figma Make complète le sujet, dans le cadre de ce workflow Figma Make distinct.

Évaluer le gain : combien coûte le travail de reconstruction ?

Les postes à examiner sont la préparation des maquettes et les reprises d’implémentation. Si votre équipe recrée les écrans déjà développés avant de les passer en revue, comparez cet effort à celui de la capture et de la remise en ordre des calques :

Valeur nette par revue = (ancien temps de préparation et de reprise en heures − nouveau temps de capture, de remise en ordre et de reprise en heures) × votre coût horaire interne − coûts supplémentaires des outils.

Appuyez-vous sur vos propres relevés de temps. Comptez aussi toute revue d’implémentation supplémentaire créée par ce workflow. Pour une équipe qui utilise déjà Claude Code et dispose des sièges Figma nécessaires, les abonnements existants figurent des deux côtés de la comparaison ; seules les dépenses supplémentaires changent le résultat. Figma distingue le type de siège des autorisations sur les fichiers, et le coût de son abonnement Professional dépend du nombre de sièges et de la périodicité de facturation. Les explications de Figma sur la facturation.

Ma règle de décision : gardez ce workflow s’il permet à l’équipe d’aboutir à une modification validée avec moins d’effort cumulé en design et en développement. Un import plus rapide qui exige ensuite une lourde remise en ordre présente peu d’intérêt.

Deux offres ciblées à développer autour de ce workflow

L’opportunité consiste à structurer une offre de revue autour de la connexion native. Les idées qui suivent sont des hypothèses de produit. Les estimations DataForSEO pour les recherches en anglais aux États-Unis, vérifiées le 12 octobre 2026, mesurent des recherches mensuelles, pas des clients payants.

La piste la plus solide : un kit de revue de l’onboarding

Une équipe produit ou une petite agence pourrait payer pour une méthode reproductible qui transforme son onboarding fonctionnel en revue organisée et en brief d’implémentation. Les signaux de demande sur des sujets voisins sont de 590 recherches mensuelles pour « claude code to figma » et de 260 pour « website to figma ». Ces audiences peuvent se recouper.

La version minimale pourrait réunir une checklist de capture propre au projet, un modèle de revue Figma, une convention de nommage des frames et des prompts réutilisables associant les liens des frames validées aux décisions de comportement. Commencez par une prestation accompagnée pour observer les points sur lesquels les équipes ont besoin d’aide.

C’est la piste la plus solide, car le livrable comprend des décisions sur le parcours propre au client. Sa limite : Figma fournit déjà la capture, donc une simple surcouche d’import apporte peu. Il reste à vérifier que les équipes sont prêtes à payer pour ce kit de revue.

Un vérificateur de briefs d’implémentation

Une équipe qui confie régulièrement des modifications Figma à Claude Code pourrait utiliser un petit outil signalant les liens de frames manquants, les destinations ambiguës et l’absence de consignes sur les composants avant l’implémentation. « Figma to code » représente environ 720 recherches mensuelles : c’est un signal général sur le besoin sous-jacent, pas la preuve d’une demande pour ce vérificateur.

La version minimale pourrait examiner un brief structuré contenant les liens validés, les chemins des composants et les critères d’acceptation, puis dresser la liste des questions encore ouvertes. La limite tient au sens : l’outil peut signaler l’absence d’une règle expliquant comment passer une étape, mais il ne peut pas décider si vos utilisateurs doivent avoir cette possibilité. Cette décision revient toujours à un responsable produit.

Ce que l’aller-retour ne résout pas

Considérez ce workflow comme un cycle volontaire de capture, de modification et d’implémentation. Figma présente MCP comme une source de contexte de design structuré et un point de départ pour le code ; l’agent a toujours besoin des conventions de votre projet et de consignes claires. Cela ne garantit pas un code finalisé et ne corrige pas automatiquement les problèmes d’implémentation. Les limites de ce rôle selon Figma.

La qualité de capture varie aussi. Figma cite parmi les difficultés possibles les animations JavaScript complexes, le rendu canvas et les listes virtualisées, qui n’affichent qu’une partie d’une longue liste à la fois. Si la capture de la page entière donne un résultat médiocre, essayez de capturer un élément précis. Des noms de variables CSS devenus illisibles peuvent également empêcher leur mise en correspondance ; une capture depuis le serveur de développement peut préserver des noms lisibles. Les limites connues de la capture.

Je me passerais de cet aller-retour pour une simple correction de texte qui ne demande aucune décision de design. Je l’utiliserais lorsque comparer l’ensemble du parcours peut changer ce que l’équipe va construire. Si c’est le canevas partagé de Figma lui-même qui ne convient pas, notre comparatif des alternatives à Figma aborde ce choix plus large.

Dès lundi, choisissez un parcours d’onboarding en trois écrans, capturez-le, accordez-vous sur une amélioration et reportez cette décision dans l’application. Bouclez ce premier aller-retour avant d’étendre la méthode au reste du produit.

Pour adapter ce workflow de revue au produit de votre équipe, nous pouvons vous aider à l’automatiser.