# 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.

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.

## Étapes

1. **Activer 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. **Connecter 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. **Construire à 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.

## Prompts à essayer

- Construis le frame Figma sélectionné comme composant React dans src/components/PricingCard.tsx avec nos tokens Tailwind.
- Récupère les variables utilisées dans ce frame et associe-les à nos variables CSS dans tokens.css.
- Reconstruis cette section de formulaire avec nos composants Input et Button existants plutôt que de nouveaux.
- Compare le composant que tu as écrit avec la capture Figma et corrige les écarts d'espacement.
- Crée une branche, committe le nouveau composant et ouvre une pull request avec un lien vers la capture Figma.

## 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.

## Notes de 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.

## Serveurs MCP

- [Figma MCP Server](https://help.figma.com/hc/en-us/articles/32132100833559): design-read
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## Questions fréquentes

**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

- **[Figma](https://suiteintent.com/t/figma?m=FR)**: Design d'interfaces collaboratif dans le navigateur. · Idéal pour: Designers et développeurs dans un même fichier · Offre gratuite · Gratuit pour les étudiants
- **[GitHub](https://suiteintent.com/t/github?m=FR)**: Hébergement de code, tickets et pull requests. · Idéal pour: Équipes qui relisent le code par pull request · Offre gratuite · 10000