Auditer vos design systems Figma pas à pas avec Claude Code

Un nombre croissant d’équipes produit laissent dormir des dizaines de composants « morts » dans leurs fichiers Figma, sans savoir lesquels sont utilisés, cohérents ou obsolètes. En 2026, des outils comme Claude Code et les APIs modernes permettent pourtant de cartographier automatiquement un design system, de détecter les incohérences et de proposer des refontes ciblées. L’objectif de ce tutoriel : vous montrer, en partant de zéro, comment connecter vos fichiers Figma à Claude Code, auditer votre design system et en sortir un plan d’action concret. Chaque étape est numérotée, illustrée par des exemples de prompts et balise clairement ce qui est gratuit ou payant.

Étape 0 : Pré requis et choix du bon plan Claude

Avant d’ouvrir Claude Code, il faut vous assurer que les bases sont en place.

💡 À retenir : Claude Code n’est pas vendu séparément, il est inclus dans certains abonnements Claude.

Ce qu’il vous faut côté Figma

Pour auditer un design system, vous avez besoin :

• D’un compte Figma (gratuit suffit pour commencer) avec accès en édition ou en lecture au fichier du design system.
• D’un design system structuré dans un fichier ou une bibliothèque : composants, styles de texte, styles de couleur, éventuellement tokens.
• D’un navigateur moderne (Chrome, Edge, Firefox, Safari) ou de l’app Figma Desktop.

Un fichier de design system typique contient plusieurs dizaines à plusieurs centaines de composants (boutons, formulaires, cartes, etc.), ainsi que des styles typographiques et des couleurs nommées.

Ce qu’il vous faut côté Claude / Claude Code

Claude Code est une interface et un moteur orientés développement et analyse de code, mais il fonctionne très bien pour analyser des structures de fichiers Figma exportées en JSON ou via API.

Les informations publiques récentes indiquent :

• Le plan Claude Pro est facturé 20 $/mois (environ 18–20 € selon le taux de change) et inclut l’accès à Claude Code.
• Le plan annuel Pro tourne autour de 200 $/an, soit environ 17 $/mois.
• Des plans Max 5x et Max 20x sont proposés à respectivement 100 $/mois et 200 $/mois, avec des limites d’usage beaucoup plus larges.
• Les offres Team et Enterprise ajoutent une tarification « par siège » (prix indicatif courant autour de 20–25 $/mois pour un siège standard et 100–125 $/mois pour un siège premium), avec administration et reporting.
• L’accès par API se fait en pay-as-you-go, avec un prix de l’ordre de 3 $ par million de tokens en entrée et 15 $ par million en sortie pour un modèle type Sonnet 4.

⚠️ Attention :

• Le plan gratuit Claude ne donne pas accès à Claude Code d’après les grilles de prix publiées.
• Il n’existe pas d’abonnement « Claude Code seul » : il faut passer par un plan Pro/Max/Team ou l’API.

Pour débuter ce tutoriel, un compte Claude Pro suffit largement à auditer un design system de taille classique (quelques centaines de composants).

Étape 1 : Créer votre compte Claude et accéder à Claude Code

Un bon audit commence par une configuration propre.

1.1 Créer un compte Claude

1. Ouvrez votre navigateur et allez sur le site de Claude.
2. Cliquez sur le bouton Sign up ou Get started en haut à droite.
3. Choisissez une méthode de connexion (email, compte Google, compte GitHub, selon ce qui est proposé).
4. Renseignez vos informations (nom, email) et validez votre compte via le mail de confirmation.

Une fois connecté, vous arrivez sur l’interface principale de chat Claude.

1.2 Passer au plan Pro (pour débloquer Claude Code)

1. Dans la barre latérale ou le menu utilisateur (souvent en haut à droite), cliquez sur votre avatar ou sur Settings / Billing.
2. Choisissez le plan Claude Pro.
3. Validez le paiement (carte bancaire ou autre moyen proposé).
4. Vérifiez que votre statut a bien changé (mention Pro visible sur votre compte).

💡 À retenir : Pro à 20 $/mois vous donne accès à Claude Code, Claude Design et d’autres modes spécialisés, sans coût supplémentaire.

1.3 Ouvrir Claude Code

Depuis l’interface Claude :

1. Dans la barre latérale, repérez l’entrée Claude Code, Code ou un menu Modes / Tools selon l’interface.
2. Cliquez pour ouvrir Claude Code.
3. Vous devez voir une interface proche d’un IDE simplifié : zone de chat à gauche, arbre de fichiers ou panneau de projet à droite.

⚠️ Attention : si vous ne voyez pas Claude Code, vérifiez que vous êtes bien sur un plan payant Pro/Max ou que la fonctionnalité est disponible dans votre région.

Étape 2 : Préparer et exporter votre design system Figma

Claude Code ne peut pas « voir » directement vos frames Figma; il a besoin de données structurées.

2.1 Vérifier la structure de votre design system

Avant l’export, assurez-vous que :

• Vos composants sont tous dans une ou plusieurs pages dédiées (par exemple Components / Buttons, Components / Forms).
• Vos styles de texte sont nommés de manière cohérente (Heading/H1, Body/Default…).
• Vos styles de couleur suivent une nomenclature claire (Primary/500, Neutral/100…).

💡 À retenir : plus vos conventions de nommage sont claires, plus l’analyse automatisée de Claude Code sera pertinente.

2.2 Exporter le fichier Figma en JSON via plugin

La façon la plus exploitable pour Claude Code est d’utiliser un export JSON.

1. Ouvrez Figma et chargez votre fichier de design system.
2. Dans le menu principal, cliquez sur Resources ou sur l’icône de plugin (selon la version).
3. Cherchez un plugin de type Figma to JSON, Design tokens exporter ou Figma API exporter.
4. Installez le plugin (bouton Install ou Run).
5. Lancez le plugin depuis le menu Plugins > Installed.
6. Sélectionnez la page de votre design system ou l’ensemble du fichier.
7. Choisissez un format d’export JSON (souvent .json ou .tokens.json).
8. Cliquez sur Export ou Download.

Enregistrez le fichier exporté sur votre machine, par exemple design-system.json.

⚠️ Attention : certains plugins limitent la taille ou le nombre de nœuds exportés dans leur version gratuite. Si votre design system est massif (plusieurs milliers de layers), il peut être nécessaire de passer sur une version payante du plugin ou de découper l’export en plusieurs fichiers.

2.3 Alternative : exporter en CSV (pour les styles)

Pour des audits ciblés (ex. uniquement les styles de texte), vous pouvez :

1. Utiliser un plugin de type Text styles to CSV.
2. Exporter un fichier text-styles.csv contenant le nom du style, la police, la taille, la hauteur de ligne, etc.

Claude Code peut analyser aussi bien du JSON que du CSV; l’important est que les colonnes ou clés soient explicites.

Étape 3 : Importer vos fichiers Figma dans Claude Code

Une fois vos exports prêts, vous allez les charger dans Claude Code.

3.1 Créer un nouveau projet Claude Code

1. Dans l’interface Claude Code, cliquez sur New project, Create workspace ou Open folder selon les options visibles.
2. Donnez un nom au projet, par exemple Audit design system Figma – Acme.
3. Choisissez un emplacement local ou un espace cloud proposé par l’outil.

3.2 Importer les fichiers JSON/CSV

1. Dans le panneau de fichiers (généralement à droite), cliquez sur Upload files ou faites un glisser-déposer.
2. Déposez votre fichier design-system.json et, si vous en avez un, text-styles.csv.
3. Vérifiez que les fichiers apparaissent bien dans l’arborescence.

Vous pouvez maintenant les ouvrir directement dans l’interface Claude Code pour inspecter la structure.

3.3 Vérifier que Claude Code peut lire les fichiers

1. Cliquez sur design-system.json pour voir son contenu.
2. Si le fichier est trop volumineux, Claude Code propose généralement une vue partielle avec possibilité de recherche.
3. Testez un premier prompt pour valider l’accès aux données.

Exemple de prompt à copier-coller dans Claude Code :

« Tu as accès à un fichier design-system.json qui contient la structure de mon design system Figma (composants, styles, couleurs). Peux-tu lister les principales clés au niveau racine et me dire combien de composants uniques tu vois ? »

💡 À retenir : mentionner explicitement le nom des fichiers dans vos prompts aide Claude Code à les retrouver dans le projet.

Étape 4 : Auditer la structure et la couverture du design system

Cette étape vise à comprendre ce que couvre réellement votre design system.

4.1 Cartographier les composants

Commencez par demander une vue macro :

Prompt à copier-coller :

« En te basant sur design-system.json, peux-tu me fournir un tableau récapitulatif des types de composants présents (boutons, inputs, cards, modals, etc.), avec pour chaque type : nombre de variantes, présence ou non d’états (hover, disabled), et si les props semblent documentées dans le JSON ? »

Claude Code va analyser la structure, compter les occurrences et générer une synthèse.

⚠️ Attention : l’outil se base sur ce que le plugin Figma a exporté. Si certains composants n’ont pas été inclus dans l’export ou sont cachés dans d’autres pages, ils n’apparaîtront pas dans l’audit.

4.2 Vérifier la cohérence des styles

Pour les styles de texte et de couleur :

Prompt à copier-coller :

« À partir de text-styles.csv et des informations présentes dans design-system.json, peux-tu identifier les styles de texte et de couleur redondants ou incohérents (noms similaires mais valeurs différentes, valeurs identiques mais noms différents) et proposer une liste de styles à fusionner ou renommer ? »

Vous obtenez :

• Une liste de styles possiblement redondants.
• Des suggestions de consolidation (par exemple fusionner Body/Default et Body/Normal si leurs valeurs sont identiques).

💡 À retenir : demandez toujours à Claude Code de justifier ses suggestions par des exemples précis (nom du style, valeur actuelle, valeur proposée).

4.3 Évaluer la couverture fonctionnelle

Demandez à Claude Code d’identifier les manques évidents.

Prompt à copier-coller :

« En comparant les types de composants présents dans design-system.json avec une checklist de design system moderne (navigation, formulaires, tableaux, messages d’état, modals, notifications, etc.), peux-tu lister ce qui manque clairement dans mon design system et qui serait recommandé d’ajouter ? »

Claude produira une checklist personnalisée des composants à ajouter.

⚠️ Attention : Claude Code ne connaît pas les besoins métier exacts de votre produit. Les suggestions doivent être relues à l’aune de vos réalités (B2B vs B2C, mobile vs desktop, etc.).

Étape 5 : Détecter les incohérences et dettes de design

Après la couverture, l’enjeu est d’identifier les désalignements.

5.1 Chercher les variations de tokens non maîtrisées

Si votre export JSON inclut des design tokens (couleurs, espacements, radius, etc.), vous pouvez demander :

Prompt à copier-coller :

« Dans design-system.json, peux-tu analyser les tokens de couleur et de spacing et repérer : 1) les valeurs très proches les unes des autres (par exemple spacing de 7px et 8px) qui pourraient être rationalisées, 2) les couleurs dont la différence de contraste est faible, et 3) des exemples d’utilisation potentiellement problématiques pour l’accessibilité (contraste texte/fond) ? »

Claude Code mettra en avant :

• Les spacings quasi identiques.
• Les couleurs redondantes ou trop nombreuses.
• Les combinaisons à risque pour l’accessibilité.

💡 À retenir : vous pouvez demander à Claude de calculer le ratio de contraste WCAG pour certaines paires de couleurs, à partir des valeurs hex.

5.2 Détecter les composants quasi duplicés

Demandez à Claude de trouver des composants très similaires :

Prompt à copier-coller :

« Analyse les composants déclarés dans design-system.json et repère les cas où plusieurs composants semblent être des variantes à peine différentes les unes des autres (par exemple des boutons avec des marges ou des radius très proches). Propose une liste des couples de composants quasi dupliqués, avec une suggestion de consolidation. »

⚠️ Attention : Claude Code ne voit pas le rendu visuel exact, seulement ce que le plugin a exporté. Il peut manquer des différences purement visuelles (icônes, illustration) si elles ne sont pas structurées dans le JSON.

5.3 Identifier les dettes de documentation

Votre design system est aussi un outil de communication.

Prompt à copier-coller :

« Sur la base de la structure de design-system.json, peux-tu repérer les composants ou styles qui semblent critiques (très utilisés, nombreux variants) mais dont la documentation semble absente ou minimale (pas de description, pas de notes, pas de propriétés explicites) ? Propose une liste priorisée de composants à documenter. »

Claude Code peut compter les occurrences de composants et voir si des champs de description sont vides ou inexistants.

Étape 6 : Générer des recommandations de refonte et un plan de migration

Vous avez maintenant une vision des incohérences. Il faut l’organiser en plan d’action.

6.1 Synthétiser l’audit en catégories

Demandez à Claude Code une synthèse structurée :

Prompt à copier-coller :

« À partir de toutes les analyses précédentes (couverture, incohérences de styles, tokens redondants, composants quasi dupliqués, documentation), peux-tu produire un rapport structuré en trois colonnes : 1) problème identifié, 2) impact concret (ex : temps perdu, risques d’incohérence), 3) recommandation de refonte ? Formate ce rapport sous forme de tableau Markdown. »

Claude vous donnera un tableau exploitable directement.

Exemple de structure attendue :

💡 À retenir : demandez à Claude Code de trier le tableau par impact décroissant pour concentrer vos efforts sur ce qui compte.

6.2 Générer des guidelines textuelles

Un bon design system repose sur des règles claires.

Prompt à copier-coller :

« Sur la base du rapport d’audit, rédige un ensemble de guidelines de design system en français, orienté Figma, qui explique : 1) la nomenclature recommandée pour les styles et composants, 2) les règles de création de nouvelles variantes, 3) les critères d’acceptation (accessibilité, performance, lisibilité). Formate le tout en sections courtes, prêtes à être intégrées dans la documentation Figma. »

Claude Code produira un texte que vous pourrez coller dans la section Description de vos pages Figma ou dans votre documentation interne.

⚠️ Attention : vérifiez manuellement que les recommandations sont compatibles avec vos contraintes produit (charte marque, écosystème technique, etc.). Claude Code ne connaît pas vos contraintes internes.

6.3 Proposer une roadmap de migration

Pour passer du diagnostic à l’action :

Prompt à copier-coller :

« En tenant compte du fait que mon équipe design dispose d’environ 2 jours par sprint pour travailler sur le design system, peux-tu proposer une roadmap de migration sur 6 sprints, avec pour chaque sprint : objectifs concrets, composants à traiter, livrables attendus, et risques à surveiller ? »

💡 À retenir : plus vous donnez de contraintes (temps, taille de l’équipe, deadlines produit), plus la roadmap proposée sera réaliste.

Étape 7 : Comparer Claude Code avec d’autres approches et optimiser les coûts

Auditer un design system avec Claude Code a un coût et des alternatives.

7.1 Claude Code vs autres outils IA/code

Voici un tableau comparatif simplifié, basé sur les informations publiques récentes sur les plans développeur IA :

Ces ordres de grandeur permettent de choisir entre :

• Un abonnement Pro pour des audits ponctuels.
• Un Max si vous faites tourner des audits lourds plusieurs fois par semaine.
• L’API si vous industrialisez la démarche avec des scripts.

⚠️ Attention : les prix exacts peuvent varier légèrement dans le temps, selon les annonces officielles d’Anthropic et le taux de change.

7.2 Réduire la facture en structurant vos prompts

Quelques bonnes pratiques pour limiter les coûts :

• Évitez les prompts trop vagues; ils génèrent souvent des réponses longues donc plus de tokens.
• Prétraitez vos exports Figma : supprimez les pages et composants inutiles avant d’envoyer le JSON à Claude Code.
• Réutilisez les mêmes prompts structurés et demandez des réponses sous forme de tableaux pour gagner du temps.

💡 À retenir : un designer ou développeur qui fait 2–3 audits ciblés par mois reste en général largement dans les capacités du plan Pro.

7.3 Quand passer à un plan supérieur

Vous pouvez envisager Max ou Team si :

• Votre équipe (3–10 personnes) lance des audits quasi quotidiens.
• Vous utilisez Claude Code pour d’autres tâches lourdes (analyse de code, refactoring, génération d’agents) en plus du design system.

Dans ce cas, le surcoût (100–200 $/mois) se justifie par le gain de temps et de cohérence.

Étape 8 : Produire un livrable concret à présenter à votre équipe

Un tutoriel utile se termine par un résultat tangible.

8.1 Générer un rapport d’audit prêt à partager

Demandez à Claude Code de finaliser un rapport professionnel.

Prompt à copier-coller :

« En utilisant tous les résultats de l’audit (tableaux, listes de problèmes, roadmap), rédige un rapport d’audit complet de mon design system Figma, structuré en : 1) résumé exécutif, 2) état des lieux (couverture, dettes), 3) recommandations prioritaires, 4) roadmap sur 6 sprints. Le rapport doit être concis, orienté décision, et rédigé en français professionnel. »

Vous obtenez un document que vous pouvez :

• Copier-coller dans un doc interne (Notion, Confluence, Google Docs).
• Partager en PDF lors d’un design review.
• Intégrer dans la page Design system de votre Figma.

8.2 Créer une page de documentation Figma mise à jour

À partir des guidelines générées :

1. Dans Figma, créez une nouvelle page appelée Design system – Principles & Guidelines.
2. Collez la synthèse textuelle fournie par Claude Code (nomenclatures, règles de création de variantes, critères d’acceptation).
3. Ajoutez des liens vers :

• Les composants rationalisés.
• Les nouveaux styles de texte et de couleur.
• Les futures tâches de migration (sprints planifiés).

💡 À retenir : le changement se fait dans Figma, pas dans Claude. Claude Code sert à clarifier, prioriser et documenter vos décisions.

8.3 Mesurer l’impact pour le montrer en review

Pour que votre travail soit visible, suivez quelques métriques avant/après :

• Nombre de styles de texte (par exemple, passer de 40 à 15).
• Nombre de couleurs de base (par exemple, passer de 60 à 20).
• Nombre de variantes de bouton (par exemple, passer de 12 à 4 bien documentées).
• Temps moyen pour choisir un composant en review (vous pouvez demander un feedback aux designers).

Vous pouvez demander à Claude Code de vous aider à mettre en forme ces métriques dans un slide deck :

Prompt à copier-coller :

« Sur la base des données d’audit (nombre de styles, couleurs, composants avant/après), propose une courte présentation de 5 diapositives pour une design review, avec pour chaque slide : titre, message clé, 1–2 chiffres à mettre en avant et une phrase de conclusion. »

Notre avis : qui devrait adopter ce workflow Figma + Claude Code maintenant ?

L’audit de design system assisté par IA n’est plus réservé aux grandes équipes avec leurs propres scripts. En 2026, un abonnement Claude Pro à 20 $/mois suffit déjà à un designer ou un développeur pour analyser en profondeur un design system Figma exporté en JSON, détecter les incohérences, rationaliser les tokens et produire une documentation exploitable.

Dans les 6 prochains mois, les organisations qui tireront le plus de valeur de ce workflow sont :

• Les équipes produit qui ont accumulé plusieurs années de dettes de design dans Figma.
• Les scale-ups qui passent à une phase de normalisation UI entre plusieurs squads.
• Les agences qui doivent auditer rapidement des design systems clients pour des missions de refonte.

⚠️ Attention : Claude Code ne remplace pas le regard d’un designer senior sur la cohérence visuelle et la pertinence métier. Il accélère le diagnostic, structure les recommandations et vous évite d’ouvrir chaque frame à la main.

L’enjeu, sur les prochains mois, sera de pousser plus loin l’intégration directe avec Figma (via API ou plugins dédiés) pour rendre l’audit quasi temps réel. Et vous, à quand remonte le dernier audit sérieux de votre design system Figma ?