Aller au contenu

Transformez vos maquettes Figma en code dans Cursor

Reconstruire une maquette à l'œil fait dériver les espacements, les couleurs et les états par rapport au design.

3 étapesIntermédiaire
CursorClaude CodeFigmaGitHub

Comment ça se connecte

Votre IA accède à vos apps via de petits connecteurs appelés serveurs MCP.
Votre IA
CursorClaude Code
Connecteurs
FigmaGitHub
Vos apps
FigmaGitHub

Cette configuration s'adresse aux développeurs frontend et aux design engineers qui transforment des frames Figma en composants. Le serveur MCP de Figma donne à Cursor ou Claude Code la structure du frame, ses variables et des captures d'écran, et GitHub permet à l'agent de travailler dans votre dépôt et d'ouvrir une pull request. Vous obtenez des composants qui utilisent vos tokens de design au lieu de valeurs codées en dur recopiées à l'œil.

Mise en place

3 étapes. Ouvrez-en une pour les détails.
  1. 1Activer le serveur MCP Figma

    Dans l'application de bureau Figma, ouvrez un fichier Design, passez en Dev Mode et activez le serveur MCP de bureau depuis le panneau d'inspection ou dans le menu Figma sous Préférences. Il tourne en local sur http://127.0.0.1:3845/mcp ; ajoutez cette URL dans les paramètres MCP de Cursor ou avec claude mcp add. Figma propose aussi un serveur distant sur mcp.figma.com si vous préférez ne pas utiliser l'application de bureau.

    Astuce: Le serveur MCP nécessite un siège Dev ou Full sur une offre Figma payante ; consultez la documentation de Figma pour les règles actuelles.

  2. 2Connecter GitHub

    Ajoutez le serveur MCP de GitHub avec un jeton fine-grained capable de créer des branches et des pull requests dans votre dépôt frontend. Demandez à l'agent de lister votre dossier de composants pour qu'il sache ce qui existe déjà. Cela l'empêche de reconstruire un bouton que vous avez déjà.

    Astuce: Indiquez à l'agent votre fichier de tokens, comme tailwind.config ou un fichier de variables CSS, dans le même prompt.

  3. 3Construire à partir d'un frame

    Sélectionnez un frame dans Figma, ou copiez son lien, et demandez à l'agent de le construire comme composant en utilisant vos tokens et composants existants. L'agent récupère le contexte de code du frame, ses variables et une capture d'écran, puis écrit le composant. Comparez le résultat avec le frame dans le navigateur, à la même largeur.

    Astuce: Les petits frames donnent de meilleurs résultats : construisez une carte ou une section de formulaire, pas une page entière d'un coup.

Ensuite, demandez

Quoi dire une fois connecté. Cliquez pour copier.
Demandez à Cursor…Cursor

Bon à savoir

Ce qu'il vous faut, ce qu'il ne fait pas et comment rester en sécurité.
Ce qu'il vous faut
  • Une offre Figma payante avec un siège Dev ou Full
  • L'application de bureau Figma pour le serveur local, ou le serveur distant
  • Cursor ou Claude Code
  • Un jeton GitHub avec accès aux branches et aux pull requests de votre dépôt
Limites
  • L'agent travaille sur un frame à la fois et peut manquer les interactions, les animations et le comportement responsive que le frame ne montre pas.
  • Des fichiers Figma mal structurés, sans auto layout ni variables, produisent des valeurs codées en dur.
  • Vous devez toujours vérifier l'accessibilité à la main, comme les libellés et les états de focus.
Restez en sécurité
  • L'accès à Figma est en lecture seule.
  • Utilisez un jeton GitHub limité à un seul dépôt et relisez la pull request.
Figma MCP Server (design-read) GitHub MCP Server (repository-read, issue-write, pull-request-write)

Questions fréquentes

Des réponses claires avant de commencer
De quelle offre Figma ai-je besoin ?
Le serveur MCP de Figma nécessite un siège Dev ou Full sur une offre payante. Consultez le centre d'aide de Figma pour le détail actuel des sièges et des offres.
Est-ce que cela fonctionne avec Claude Code comme avec Cursor ?
Oui. Les deux hôtes prennent en charge les serveurs MCP Figma de bureau et distant. Les étapes sont identiques, à part l'endroit où vous ajoutez l'URL du serveur.
Utilisera-t-il mes composants existants ?
Oui, si vous lui dites où ils se trouvent et le lui demandez. Code Connect de Figma peut associer les composants Figma aux composants de code, ce qui rend le résultat plus cohérent.
Mes maquettes quittent-elles ma machine ?
Les données du frame et les captures d'écran entrent dans la conversation et partent chez le fournisseur du modèle. Vérifiez la politique de votre entreprise avant d'utiliser des maquettes de clients.

Outils de cette configuration

Les produits concernés