Claude Code + Figma MCP : Transformer tes Designs en Code Automatiquement

Mis à jour le 27 mars 2026

Avec le MCP Server Figma, Claude Code peut lire directement tes maquettes Figma et les transformer en composants React, en pages HTML, ou en n'importe quel framework de ton choix. Plus besoin de traduire manuellement chaque design en code — l'IA le fait pour toi, en respectant tes conventions. Ce guide te montre comment installer, configurer et utiliser efficacement l'intégration Figma + Claude Code, étape par étape.

Si tu n'es pas encore familier avec les MCP Servers, commence par le guide des MCP Servers de Claude Code. Pour une vue d'ensemble de toutes les fonctionnalités avancées, consulte le guide des fonctionnalités avancées de Claude Code.

Pourquoi connecter Figma à Claude Code ?

Le fossé entre design et développement est le goulot d'étranglement numéro 1 dans la production web. Un designer produit une maquette en quelques heures. Le développeur met des jours à la transformer en code pixel-perfect. Avec le MCP Figma, ce temps est divisé par 5 à 10.

Ce que le MCP Figma permet concrètement

• Lire la structure d'un fichier Figma : frames, composants, variantes, styles, Auto Layouts.
• Extraire les design tokens : couleurs, typographies, espacements, ombres — transformés en variables CSS ou config Tailwind.
• Générer du code depuis un frame : un composant React, une page complète, du HTML/CSS — directement depuis la maquette.
• Synchroniser les mises à jour : quand le design évolue, Claude Code met à jour le code existant.

Le résultat : un workflow design-to-code fluide où le designer travaille dans Figma et le code suit automatiquement. C'est du Vibe Coding appliqué au design.

Comment installer le MCP Server Figma ?

L'installation se fait en deux étapes : obtenir un token API Figma, puis configurer le MCP Server dans Claude Code.

Étape 1 : Créer un token API Figma

Connecte-toi à Figma, puis :

1. Clique sur ton avatar en haut à gauche.
2. Va dans Settings.
3. Scroll jusqu'à Personal Access Tokens.
4. Clique sur Generate new token.
5. Donne un nom descriptif (ex : "Claude Code MCP").
6. Sélectionne les permissions : File content (Read) au minimum.
7. Copie le token généré. Tu ne pourras plus le voir après.

Garde ce token en sécurité. Ne le commite jamais dans un repo git. Stocke-le dans une variable d'environnement ou un gestionnaire de secrets.

Étape 2 : Configurer le MCP Server dans Claude Code

Deux méthodes pour ajouter le MCP Server Figma à Claude Code.

Méthode 1 : Via la commande CLI (recommandée)

claude mcp add figma -- npx figma-developer-mcp --figma-api-key=TON_TOKEN_FIGMA

Cette commande ajoute automatiquement la configuration dans ton fichier settings.json.

Méthode 2 : Configuration manuelle dans settings.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["figma-developer-mcp", "--figma-api-key=TON_TOKEN_FIGMA"]
    }
  }
}

Place cette configuration dans ~/.claude/settings.json pour un usage global, ou dans .claude/settings.json à la racine de ton projet pour un usage par projet.

Étape 3 : Vérifier la connexion

Lance Claude Code et teste :

claude
> Liste mes fichiers Figma récents

Si Claude Code affiche tes fichiers Figma, la connexion est opérationnelle. Si tu obtiens une erreur, vérifie que ton token est valide et que les permissions sont correctes.

Comment transformer un design Figma en code ?

La transformation design-to-code se fait en quelques étapes simples. Voici le workflow optimal.

Étape 1 : Préparer ton design Figma

La qualité du code généré dépend directement de la qualité de ton design Figma. Quelques règles pour un résultat optimal :

• Utilise les Auto Layouts : ils se traduisent en flexbox/grid propre. Les éléments positionnés en absolu donnent du code rigide.
• Nomme tes layers : "hero-section", "cta-button", "pricing-card" sont infiniment mieux que "Frame 47", "Rectangle 12".
• Utilise les composants Figma : ils se traduisent naturellement en composants React/Vue.
• Définis tes styles : couleurs, typographies et effets nommés deviennent des design tokens.

Étape 2 : Copier le lien du frame

Dans Figma, sélectionne le frame que tu veux convertir en code. Clic droit > Copy link (ou Ctrl+L / Cmd+L). Ce lien contient l'identifiant du fichier et du frame — c'est ce que Claude Code utilise pour accéder au design.

Étape 3 : Demander la transformation à Claude Code

Dans ta session Claude Code, formule ta demande avec le lien Figma :

> Transforme ce design Figma en composant React avec Tailwind CSS.
> Respecte les conventions du projet (CLAUDE.md).
> Lien : https://www.figma.com/file/xxx/Mon-Projet?node-id=123:456

Claude Code va :

1. Lire la structure du frame via le MCP Server.
2. Analyser les styles, les espacements, les composants.
3. Générer le code dans le framework demandé.
4. Créer les fichiers dans ton projet.

Étape 4 : Affiner le résultat

Le code généré est rarement parfait du premier coup. Demande des ajustements :

• "Rends ce composant responsive avec des breakpoints mobile/tablette/desktop."
• "Ajoute les animations de hover sur les cartes."
• "Extrais les couleurs en variables CSS custom properties."
• "Ajoute les attributs d'accessibilité (aria-labels, rôles, alt text)."

Quels sont les meilleurs prompts pour le workflow Figma + Claude Code ?

La qualité du résultat dépend beaucoup de comment tu formules ta demande. Voici les patterns de prompts les plus efficaces.

Pour un composant isolé

> Regarde ce composant Figma [lien] et crée un composant React TypeScript.
> Utilise Tailwind CSS pour le styling.
> Le composant doit être responsive (mobile-first).
> Exporte-le dans src/components/NomDuComposant.tsx

Pour une page complète

> Analyse cette page Figma [lien] et crée la page complète.
> Découpe en composants réutilisables.
> Respecte l'architecture existante du projet.
> Mobile-first, accessibilité incluse.

Pour extraire les design tokens

> Extrais tous les design tokens de ce fichier Figma [lien].
> Génère un fichier tokens.css avec les CSS custom properties.
> Génère aussi la configuration Tailwind correspondante.
> Inclus : couleurs, typographies, espacements, ombres, border-radius.

Pour synchroniser un design mis à jour

> Le design de ce composant a été mis à jour dans Figma [lien].
> Compare avec le code actuel dans src/components/Hero.tsx
> Applique les modifications nécessaires sans casser le comportement existant.

Quelles sont les limites du MCP Figma ?

Le MCP Figma est puissant, mais il a des limites qu'il faut connaître pour éviter les frustrations.

Côté testing, le MCP Playwright complète parfaitement le workflow design-to-code.

Limite 1 : Les animations complexes

Figma gère les prototypes avec des transitions et des interactions. Le MCP Server ne peut pas extraire ces animations. Tu devras les spécifier manuellement dans ton prompt ou les ajouter après la génération du code.

Limite 2 : Les images et assets

Le MCP Figma peut détecter les images dans un design, mais ne les exporte pas automatiquement. Tu devras exporter les assets manuellement depuis Figma et les placer dans ton projet. Claude Code peut ensuite les référencer dans le code généré.

Limite 3 : Les interactions dynamiques

Un bouton qui ouvre un menu, un formulaire avec validation, un carrousel — ces comportements n'existent pas dans Figma. Claude Code génère la structure visuelle, mais les interactions doivent être décrites dans ton prompt.

Limite 4 : La taille des fichiers

Les fichiers Figma très volumineux (100+ frames) peuvent prendre du temps à analyser. Pour les gros projets, travaille frame par frame plutôt que de demander la conversion de tout le fichier d'un coup.

Comment optimiser son workflow Figma + Claude Code au quotidien ?

Voici les bonnes pratiques pour un workflow design-to-code efficace au quotidien.

Crée un Skill dédié

Écris un Skill Claude Code (/figma-to-code) qui contient tes conventions de conversion : framework cible, conventions de nommage, structure de fichiers, et patterns de composants. Tu n'auras plus à les répéter à chaque conversion.

Standardise ton Figma

Établis des conventions de design que Claude Code comprend bien : Auto Layouts systématiques, nommage sémantique des layers, composants avec variantes, et styles partagés. Un Figma bien structuré = un code propre sans effort.

Itère par petits morceaux

Ne demande pas la conversion d'une page entière d'un coup. Commence par les composants individuels, vérifie chacun, puis assemble la page. C'est plus fiable et plus facile à débugger.

Pour aller plus loin avec les MCP Servers, consulte le guide complet des MCP Servers de Claude Code. Et pour maîtriser l'ensemble de l'écosystème, le guide complet de Claude Code est ta référence.

Meydeey — Architecte IA & Automatisation

+110 entrepreneurs formés au Vibe Coding et à l'automatisation IA. Fondateur du Labo IA, +28K abonnés YouTube.

YouTube LinkedIn Communauté