MCP Servers : passer de Figma au code en quelques minutes

Figma au code
mcp servers

Abdelilah Neqrouz n’avait pas prévu de changer quoi que ce soit à son setup. Développeur frontend chez Exomind, il utilisait GitHub Copilot comme la plupart de ses pairs : suggestions inline, Tab pour accepter, et parfois un prompt dans le chat pour générer un bout de composant. C’était efficace, prévisible et surtout suffisant. Jusqu’au jour où il a découvert les MCP servers, et qu’un assistant pouvait lire directement ses maquettes Figma, mémoriser l’architecture de son projet d’une session à l’autre, et enchaîner des workflows complets sans qu’il ait à tenir la main à chaque étape.

Ce qui a suivi n’est pas une conversion enthousiaste à la dernière technologie à la mode. C’est une transition lente, honnête, avec ses limites et ses ajustements. Et c’est justement ce qui rend son retour d’expérience utile.

Ce que les MCP Servers changent vraiment

Le MCP, pour Model Context Protocol (protocole de contexte de modèle), est un standard ouvert lancé par Anthropic en novembre 2024. L’idée est simple : permettre à un assistant IA de se connecter à des outils externes via un protocole commun, de la même façon qu’un câble USB-C peut alimenter des appareils de marques différentes. Figma, GitHub, Jira : tant qu’un MCP server existe pour l’outil, Claude Code peut interagir avec lui directement, sans intermédiaire manuel.

Ce qui distingue Claude Code des chatbots classiques, c’est qu’il fonctionne comme un agent de développement complet : il lit des fichiers, en crée, exécute des commandes, navigue dans l’arborescence d’un projet. Là où Copilot regarde ce qui se passe dans le fichier actif, Claude Code comprend l’ensemble de ce sur quoi il travaille.

Comparatif de deux MCP

COPILOT

  • Autocomplétion inline en temps réel
  • Contexte limité au fichier ouvert
  • Aucune connexion aux outils externes
  • Pas de mémoire entre les sessions
  • Quota extensible par abonnement
copilot vs Claude

CLAUDE CODE

  • Workflows multi-fichiers et multi-étapes
  • Comprend l’architecture du projet
  • Connexion directe à Figma via MCP
  • Mémoire persistante via CLAUDE.md
  • Quota glissant sur 5 heures par abonnement

Figma est lu, MCP Figma est décodé

C’est probablement le changement le plus concret dans le quotidien d’Abdelilah. Avant, implémenter un composant depuis une maquette Figma ressemblait à une séance de traduction : lire le design, interpréter les intentions, taper le code, ajuster, recommencer. Une part non négligeable du temps passé à développer une interface consistait en réalité à décoder ce qu’un designer avait voulu dire.

Avec le MCP Figma configuré, Claude Code ne “regarde” plus une image. Il lit une structure de données brutes : les autolayouts, les variantes de composants, les design tokens, les propriétés de chaque élément. Le lien Figma suffit. Ce qui prenait une journée de traduction et d’ajustements se réduit à quelques allers-retours.

La surprise est venue de l’autre sens. Avec un skill dédié, Abdelilah peut aussi pousser un composant React existant vers Figma. Quand il prototype directement en code, le designer peut récupérer le résultat dans son environnement habituel et itérer de son côté. Les cycles, qui prenaient parfois plusieurs jours, se sont resserrés à quelques heures.

Le fichier qui remplace la mémoire

Le CLAUDE.md est un fichier Markdown placé à la racine du projet, que Claude Code lit automatiquement à chaque nouvelle session. Abdelilah y a consigné ce qu’il répétait autrefois dans chaque prompt : le stack technique, les conventions de nommage, les patterns retenus par l’équipe, la structure des dossiers. Une fois écrit, ce fichier circule dans le dépôt Git. Toute l’équipe bénéficie du même contexte sans effort supplémentaire.

L’effet de bord inattendu : rédiger ce fichier a forcé Abdelilah à documenter ce qui n’existait que dans les têtes. Les conventions implicites, les décisions prises à l’oral lors d’une rétrospective, les règles jamais écrites nulle part. Le CLAUDE.md est devenu, presque par accident, la documentation technique réelle du projet.

La partie dont personne ne parle : les quotas

Il y a une réalité moins glamour que les démos ne montrent jamais. Le plan Claude Pro fonctionne avec des quotas qui se régénèrent toutes les cinq heures, et non toutes les 24 heures comme beaucoup le supposent. Sur un sprint intense, il n’est pas rare d’atteindre la limite avant la fin de la matinée.

Abdelilah a construit une stratégie quotidienne autour de cette contrainte, plutôt que contre elle. Il cale les sessions les plus exigeantes, celles où il génère des composants complexes depuis Figma ou restructure une architecture entière, en début de journée, quota frais et serveurs moins chargés. Le reste de la journée fonctionne sur Copilot pour les tâches simples, avec une deuxième fenêtre Claude en milieu d’après-midi si le quota s’est régénéré.

CréneauUsageOutil
6h – 9hSessions intensives : composants Figma, design system, refactoring multi-fichiersClaude Code (quota frais)
9h – 14hCode manuel, reviews, tâches courantesCopilot
14h – 18hRequêtes légères si quota disponible, sinon CopilotClaude Code ou Copilot

L’autre levier : regrouper les requêtes. Un seul prompt structuré qui demande trois composants d’un coup consomme bien moins qu’une conversation découpée en cinq échanges. Et le CLAUDE.md économise du contexte en évitant de répéter les conventions projet à chaque fois.

Ce que ça change, et ce que ça ne change pas

Abdelilah ne présente pas Claude Code comme un accélérateur magique. Les gains sont réels et mesurables : un design system qui aurait mobilisé plusieurs semaines a été construit en quelques jours. Les cycles avec le designer sont devenus nettement plus fluides, avec trois ou quatre allers-retours là où il en fallait dix avant. Et les erreurs de traduction entre maquette et code se sont considérablement réduites.

Mais les limites méritent d’être dites clairement. Le code produit nécessite toujours une review sérieuse. Les choix de patterns ne sont pas toujours adaptés au contexte spécifique du projet. Et la dépendance est bien réelle : travailler sans IA après quelques semaines à ce rythme donne l’impression de coder avec les mains dans le dos.

“Tout ce que Claude produit […] Je reviens toujours dessus. Mais partir d’une base déjà structurée plutôt que d’une page blanche, ça change tout dans le rythme de la journée.”

Ce que l’expérience d’Abdelilah illustre, finalement, ce n’est pas qu’un outil est supérieur à un autre. C’est que la question n’est plus “quel assistant génère le meilleur code ligne par ligne”, mais “comment l’IA s’intègre dans la boucle design → code → itération”. Et c’est là, dans cette intégration, que les MCP Servers ont changé quelque chose de fondamental. Pas le métier, mais ses standards.

Plus qu’une promesse, c’est notre standard sur vos projets.

Enquire now